@helpwave/hightide 0.0.18 → 0.1.0

package/dist/components/{LoadingButton.js → loading-states/LoadingButton.cjs}

@@ -27,62 +27,31 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/components/LoadingButton.tsx
+// src/components/loading-states/LoadingButton.tsx
 var LoadingButton_exports = {};
 __export(LoadingButton_exports, {
   LoadingButton: () => LoadingButton
 });
 module.exports = __toCommonJS(LoadingButton_exports);
-var import_clsx3 = __toESM(require("clsx"));
+var import_clsx3 = __toESM(require("clsx"), 1);
 
-// src/components/icons/Helpwave.tsx
-var import_clsx = require("clsx");
+// src/components/user-action/Button.tsx
+var import_clsx = __toESM(require("clsx"), 1);
 var import_jsx_runtime = require("react/jsx-runtime");
-var Helpwave = ({
-  color = "currentColor",
-  animate = "none",
-  size = 64,
-  ...props
-}) => {
-  const isLoadingAnimation = animate === "loading";
-  let svgAnimationKey = "";
-  if (animate === "pulse") {
-    svgAnimationKey = "animate-pulse";
-  } else if (animate === "bounce") {
-    svgAnimationKey = "animate-bounce";
-  }
-  if (size < 0) {
-    console.error("size cannot be less than 0");
-    size = 64;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "svg",
-    {
-      width: size,
-      height: size,
-      viewBox: "0 0 888 888",
-      fill: "none",
-      strokeLinecap: "round",
-      strokeWidth: 48,
-      ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { className: (0, import_clsx.clsx)(svgAnimationKey), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { className: (0, import_clsx.clsx)({ "animate-wave-big-left-up": isLoadingAnimation }), d: "M144 543.235C144 423.259 232.164 326 340.92 326", stroke: color, strokeDasharray: "1000" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { className: (0, import_clsx.clsx)({ "animate-wave-big-right-down": isLoadingAnimation }), d: "M537.84 544.104C429.084 544.104 340.92 446.844 340.92 326.869", stroke: color, strokeDasharray: "1000" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { className: (0, import_clsx.clsx)({ "animate-wave-small-left-up": isLoadingAnimation }), d: "M462.223 518.035C462.223 432.133 525.348 362.495 603.217 362.495", stroke: color, strokeDasharray: "1000" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { className: (0, import_clsx.clsx)({ "animate-wave-small-right-down": isLoadingAnimation }), d: "M745.001 519.773C666.696 519.773 603.218 450.136 603.218 364.233", stroke: color, strokeDasharray: "1000" })
-      ] })
-    }
-  );
-};
-
-// src/components/Button.tsx
-var import_clsx2 = __toESM(require("clsx"));
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var ButtonSizePaddings = {
+var paddingMapping = {
   small: "btn-sm",
   medium: "btn-md",
   large: "btn-lg"
 };
+var iconPaddingMapping = {
+  small: "icon-btn-sm",
+  medium: "icon-btn-md",
+  large: "icon-btn-lg"
+};
+var ButtonUtil = {
+  paddingMapping,
+  iconPaddingMapping
+};
 var SolidButton = ({
   children,
   disabled = false,
@@ -100,7 +69,8 @@ var SolidButton = ({
     tertiary: "bg-button-solid-tertiary-background text-button-solid-tertiary-text",
     positive: "bg-button-solid-positive-background text-button-solid-positive-text",
     warning: "bg-button-solid-warning-background text-button-solid-warning-text",
-    negative: "bg-button-solid-negative-background text-button-solid-negative-text"
+    negative: "bg-button-solid-negative-background text-button-solid-negative-text",
+    neutral: "bg-button-solid-neutral-background text-button-solid-neutral-text"
   }[color];
   const iconColorClasses = {
     primary: "text-button-solid-primary-icon",
@@ -108,27 +78,28 @@ var SolidButton = ({
     tertiary: "text-button-solid-tertiary-icon",
     positive: "text-button-solid-positive-icon",
     warning: "text-button-solid-warning-icon",
-    negative: "text-button-solid-negative-icon"
+    negative: "text-button-solid-negative-icon",
+    neutral: "text-button-solid-neutral-icon"
   }[color];
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "button",
     {
       onClick: disabled ? void 0 : onClick,
       disabled: disabled || onClick === void 0,
-      className: (0, import_clsx2.default)(
+      className: (0, import_clsx.default)(
         className,
         {
           "text-disabled-text bg-disabled-background": disabled,
-          [(0, import_clsx2.default)(colorClasses, "hover:brightness-90")]: !disabled
+          [(0, import_clsx.default)(colorClasses, "hover:brightness-90")]: !disabled
         },
-        ButtonSizePaddings[size]
+        ButtonUtil.paddingMapping[size]
       ),
       ...restProps,
       children: [
-        startIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        startIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "span",
           {
-            className: (0, import_clsx2.default)({
+            className: (0, import_clsx.default)({
               [iconColorClasses]: !disabled,
               [`text-disabled-icon`]: disabled
             }),
@@ -136,10 +107,10 @@ var SolidButton = ({
           }
         ),
         children,
-        endIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        endIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "span",
           {
-            className: (0, import_clsx2.default)({
+            className: (0, import_clsx.default)({
               [iconColorClasses]: !disabled,
               [`text-disabled-icon`]: disabled
             }),
@@ -154,10 +125,82 @@ var SolidButton = ({
 // src/util/noop.ts
 var noop = () => void 0;
 
-// src/components/LoadingButton.tsx
+// src/components/icons-and-geometry/Helpwave.tsx
+var import_clsx2 = require("clsx");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Helpwave = ({
+  color = "currentColor",
+  animate = "none",
+  size = 64,
+  ...props
+}) => {
+  const isLoadingAnimation = animate === "loading";
+  let svgAnimationKey = "";
+  if (animate === "pulse") {
+    svgAnimationKey = "animate-pulse";
+  } else if (animate === "bounce") {
+    svgAnimationKey = "animate-bounce";
+  }
+  if (size < 0) {
+    console.error("size cannot be less than 0");
+    size = 64;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 888 888",
+      fill: "none",
+      strokeLinecap: "round",
+      strokeWidth: 48,
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { className: (0, import_clsx2.clsx)(svgAnimationKey), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "path",
+          {
+            className: (0, import_clsx2.clsx)({ "animate-wave-big-left-up": isLoadingAnimation }),
+            d: "M144 543.235C144 423.259 232.164 326 340.92 326",
+            stroke: color,
+            strokeDasharray: "1000"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "path",
+          {
+            className: (0, import_clsx2.clsx)({ "animate-wave-big-right-down": isLoadingAnimation }),
+            d: "M537.84 544.104C429.084 544.104 340.92 446.844 340.92 326.869",
+            stroke: color,
+            strokeDasharray: "1000"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "path",
+          {
+            className: (0, import_clsx2.clsx)({ "animate-wave-small-left-up": isLoadingAnimation }),
+            d: "M462.223 518.035C462.223 432.133 525.348 362.495 603.217 362.495",
+            stroke: color,
+            strokeDasharray: "1000"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "path",
+          {
+            className: (0, import_clsx2.clsx)({ "animate-wave-small-right-down": isLoadingAnimation }),
+            d: "M745.001 519.773C666.696 519.773 603.218 450.136 603.218 364.233",
+            stroke: color,
+            strokeDasharray: "1000"
+          }
+        )
+      ] })
+    }
+  );
+};
+
+// src/components/loading-states/LoadingButton.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var LoadingButton = ({ isLoading = false, size = "medium", onClick, ...rest }) => {
-  const paddingClass = ButtonSizePaddings[size];
+  const paddingClass = ButtonUtil.paddingMapping[size];
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "inline-block relative", children: [
     isLoading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: (0, import_clsx3.default)("absolute inset-0 row items-center justify-center bg-white/40", paddingClass), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Helpwave, { animate: "loading", className: "text-white" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SolidButton, { ...rest, disabled: rest.disabled, onClick: isLoading ? noop : onClick })
@@ -167,4 +210,4 @@ var LoadingButton = ({ isLoading = false, size = "medium", onClick, ...rest }) =
 0 && (module.exports = {
   LoadingButton
 });
-//# sourceMappingURL=LoadingButton.js.map
+//# sourceMappingURL=LoadingButton.cjs.map

package/dist/components/loading-states/LoadingButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/loading-states/LoadingButton.tsx","../../../src/components/user-action/Button.tsx","../../../src/util/noop.ts","../../../src/components/icons-and-geometry/Helpwave.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport type { SolidButtonProps } from '../user-action/Button'\nimport { ButtonUtil, SolidButton } from '../user-action/Button'\nimport { noop } from '@/util/noop'\nimport { Helpwave } from '../icons-and-geometry/Helpwave'\n\ntype LoadingButtonProps = {\n  isLoading?: boolean,\n} & SolidButtonProps\n\nexport const LoadingButton = ({ isLoading = false, size = 'medium', onClick, ...rest }: LoadingButtonProps) => {\n  const paddingClass = ButtonUtil.paddingMapping[size]\n\n  return (\n    <div className=\"inline-block relative\">\n      {\n        isLoading && (\n          <div className={clsx('absolute inset-0 row items-center justify-center bg-white/40', paddingClass)}>\n            <Helpwave animate=\"loading\" className=\"text-white\"/>\n          </div>\n        )\n      }\n      <SolidButton {...rest} disabled={rest.disabled} onClick={isLoading ? noop : onClick}/>\n    </div>\n  )\n}\n","import type { ButtonHTMLAttributes, PropsWithChildren, ReactNode } from 'react'\nimport clsx from 'clsx'\n\n\nexport const ButtonColorUtil = {\n  solid: ['primary', 'secondary', 'tertiary', 'positive', 'warning', 'negative', 'neutral'] as const,\n  text: ['primary', 'negative', 'neutral'] as const,\n  outline: ['primary'] as const,\n}\n\n\n/**\n * The allowed colors for the SolidButton and IconButton\n */\nexport type SolidButtonColor = typeof ButtonColorUtil.solid[number]\n/**\n * The allowed colors for the OutlineButton\n */\nexport type OutlineButtonColor = typeof ButtonColorUtil.outline[number]\n/**\n * The allowed colors for the TextButton\n */\nexport type TextButtonColor = typeof ButtonColorUtil.text[number]\n\n/**\n * The different sizes for a button\n */\ntype ButtonSizes = 'small' | 'medium' | 'large'\n\n/**\n * The shard properties between all button types\n */\nexport type ButtonProps = PropsWithChildren<{\n  /**\n   * @default 'medium'\n   */\n  size?: ButtonSizes,\n}> & ButtonHTMLAttributes<Element>\n\nconst paddingMapping: Record<ButtonSizes, string> = {\n  small: 'btn-sm',\n  medium: 'btn-md',\n  large: 'btn-lg'\n}\n\nconst iconPaddingMapping: Record<ButtonSizes, string> = {\n  small: 'icon-btn-sm',\n  medium: 'icon-btn-md',\n  large: 'icon-btn-lg'\n}\n\nexport const ButtonUtil = {\n  paddingMapping,\n  iconPaddingMapping\n}\n\ntype ButtonWithIconsProps = ButtonProps & {\n  startIcon?: ReactNode,\n  endIcon?: ReactNode,\n}\n\nexport type SolidButtonProps = ButtonWithIconsProps & {\n  color?: SolidButtonColor,\n}\n\nexport type OutlineButtonProps = ButtonWithIconsProps & {\n  color?: OutlineButtonColor,\n}\n\nexport type TextButtonProps = ButtonWithIconsProps & {\n  color?: TextButtonColor,\n}\n\nexport type IconButtonProps = ButtonProps & {\n  color?: SolidButtonColor,\n}\n\n/**\n * A button with a solid background and different sizes\n */\nconst SolidButton = ({\n                       children,\n                       disabled = false,\n                       color = 'primary',\n                       size = 'medium',\n                       startIcon,\n                       endIcon,\n                       onClick,\n                       className,\n                       ...restProps\n                     }: SolidButtonProps) => {\n  const colorClasses = {\n    primary: 'bg-button-solid-primary-background text-button-solid-primary-text',\n    secondary: 'bg-button-solid-secondary-background text-button-solid-secondary-text',\n    tertiary: 'bg-button-solid-tertiary-background text-button-solid-tertiary-text',\n    positive: 'bg-button-solid-positive-background text-button-solid-positive-text',\n    warning: 'bg-button-solid-warning-background text-button-solid-warning-text',\n    negative: 'bg-button-solid-negative-background text-button-solid-negative-text',\n    neutral: 'bg-button-solid-neutral-background text-button-solid-neutral-text',\n  }[color]\n\n  const iconColorClasses = {\n    primary: 'text-button-solid-primary-icon',\n    secondary: 'text-button-solid-secondary-icon',\n    tertiary: 'text-button-solid-tertiary-icon',\n    positive: 'text-button-solid-positive-icon',\n    warning: 'text-button-solid-warning-icon',\n    negative: 'text-button-solid-negative-icon',\n    neutral: 'text-button-solid-neutral-icon',\n  }[color]\n\n  return (\n    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled || onClick === undefined}\n      className={clsx(\n        className,\n        {\n          'text-disabled-text bg-disabled-background': disabled,\n          [clsx(colorClasses, 'hover:brightness-90')]: !disabled\n        },\n        ButtonUtil.paddingMapping[size]\n      )}\n      {...restProps}\n    >\n      {startIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {startIcon}\n      </span>\n      )}\n      {children}\n      {endIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {endIcon}\n      </span>\n      )}\n    </button>\n  )\n}\n\n/**\n * A button with an outline border and different sizes\n */\nconst OutlineButton = ({\n                         children,\n                         disabled = false,\n                         color = 'primary',\n                         size = 'medium',\n                         startIcon,\n                         endIcon,\n                         onClick,\n                         className,\n                         ...restProps\n                       }: OutlineButtonProps) => {\n  const colorClasses = {\n    primary: 'bg-transparent border-2 border-button-outline-primary-text text-button-outline-primary-text',\n  }[color]\n\n  const iconColorClasses = {\n    primary: 'text-button-outline-primary-icon',\n  }[color]\n  return (\n    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled || onClick === undefined}\n      className={clsx(\n        className, {\n          'text-disabled-text border-disabled-outline': disabled,\n          [clsx(colorClasses, 'hover:brightness-80')]: !disabled,\n        },\n        ButtonUtil.paddingMapping[size]\n      )}\n      {...restProps}\n    >\n      {startIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {startIcon}\n      </span>\n      )}\n      {children}\n      {endIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {endIcon}\n      </span>\n      )}\n    </button>\n  )\n}\n\n/**\n * A text that is a button that can have different sizes\n */\nconst TextButton = ({\n                      children,\n                      disabled = false,\n                      color = 'neutral',\n                      size = 'medium',\n                      startIcon,\n                      endIcon,\n                      onClick,\n                      className,\n                      ...restProps\n                    }: TextButtonProps) => {\n  const colorClasses = {\n    primary: 'bg-transparent text-button-text-primary-text',\n    negative: 'bg-transparent text-button-text-negative-text',\n    neutral: 'bg-transparent text-button-text-neutral-text',\n  }[color]\n\n  const iconColorClasses = {\n    primary: 'text-button-text-primary-icon',\n    negative: 'text-button-text-negative-icon',\n    neutral: 'text-button-text-neutral-icon',\n  }[color]\n  return (\n    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled || onClick === undefined}\n      className={clsx(\n        className, {\n          'text-disabled-text': disabled,\n          [clsx(colorClasses, 'hover:bg-button-text-hover-background rounded-full')]: !disabled,\n        },\n        ButtonUtil.paddingMapping[size]\n      )}\n      {...restProps}\n    >\n      {startIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {startIcon}\n      </span>\n      )}\n      {children}\n      {endIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {endIcon}\n      </span>\n      )}\n    </button>\n  )\n}\n\n\n/**\n * A button for icons with a solid background and different sizes\n */\nconst IconButton = ({\n                      children,\n                      disabled = false,\n                      color = 'primary',\n                      size = 'medium',\n                      onClick,\n                      className,\n                      ...restProps\n                    }: IconButtonProps) => {\n  const colorClasses = {\n    primary: 'bg-button-solid-primary-background text-button-solid-primary-text',\n    secondary: 'bg-button-solid-secondary-background text-button-solid-secondary-text',\n    tertiary: 'bg-button-solid-tertiary-background text-button-solid-tertiary-text',\n    positive: 'bg-button-solid-positive-background text-button-solid-positive-text',\n    warning: 'bg-button-solid-warning-background text-button-solid-warning-text',\n    negative: 'bg-button-solid-negative-background text-button-solid-negative-text',\n    neutral: 'bg-button-solid-neutral-background text-button-solid-neutral-text',\n  }[color]\n\n  return (\n    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled || onClick === undefined}\n      className={clsx(\n        className,\n        {\n          'text-disabled-text bg-disabled-background': disabled,\n          [clsx(colorClasses, 'hover:brightness-90')]: !disabled\n        },\n        ButtonUtil.iconPaddingMapping[size]\n      )}\n      {...restProps}\n    >\n      {children}\n    </button>\n  )\n}\n\nexport { SolidButton, OutlineButton, TextButton, IconButton }\n","export const noop = () => undefined\n","import type { SVGProps } from 'react'\nimport { clsx } from 'clsx'\n\nexport type HelpwaveProps = SVGProps<SVGSVGElement> & {\n  color?: string,\n  animate?: 'none' | 'loading' | 'pulse' | 'bounce',\n  size?: number,\n}\n\n/**\n * The helpwave loading spinner based on the svg logo.\n */\nexport const Helpwave = ({\n                           color = 'currentColor',\n                           animate = 'none',\n                           size = 64,\n                           ...props\n                         }: HelpwaveProps) => {\n  const isLoadingAnimation = animate === 'loading'\n  let svgAnimationKey = ''\n\n  if (animate === 'pulse') {\n    svgAnimationKey = 'animate-pulse'\n  } else if (animate === 'bounce') {\n    svgAnimationKey = 'animate-bounce'\n  }\n\n  if (size < 0) {\n    console.error('size cannot be less than 0')\n    size = 64\n  }\n\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox=\"0 0 888 888\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeWidth={48}\n      {...props}\n    >\n      <g className={clsx(svgAnimationKey)}>\n        <path className={clsx({ 'animate-wave-big-left-up': isLoadingAnimation })}\n              d=\"M144 543.235C144 423.259 232.164 326 340.92 326\" stroke={color} strokeDasharray=\"1000\"/>\n        <path className={clsx({ 'animate-wave-big-right-down': isLoadingAnimation })}\n              d=\"M537.84 544.104C429.084 544.104 340.92 446.844 340.92 326.869\" stroke={color} strokeDasharray=\"1000\"/>\n        <path className={clsx({ 'animate-wave-small-left-up': isLoadingAnimation })}\n              d=\"M462.223 518.035C462.223 432.133 525.348 362.495 603.217 362.495\" stroke={color}\n              strokeDasharray=\"1000\"/>\n        <path className={clsx({ 'animate-wave-small-right-down': isLoadingAnimation })}\n              d=\"M745.001 519.773C666.696 519.773 603.218 450.136 603.218 364.233\" stroke={color}\n              strokeDasharray=\"1000\"/>\n      </g>\n    </svg>\n  )\n}\n"],"mappings":"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","names":["import_clsx","clsx","import_clsx","import_jsx_runtime","import_jsx_runtime","clsx"]}

package/dist/components/{LoadingButton.d.mts → loading-states/LoadingButton.d.cts}

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { SolidButtonProps } from './Button.mjs';
+import { SolidButtonProps } from '../user-action/Button.cjs';
 import 'react';
 
 type LoadingButtonProps = {

package/dist/components/{LoadingButton.d.ts → loading-states/LoadingButton.d.ts}

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { SolidButtonProps } from './Button.js';
+import { SolidButtonProps } from '../user-action/Button.js';
 import 'react';
 
 type LoadingButtonProps = {

package/dist/components/{LoadingButton.mjs → loading-states/LoadingButton.js}

@@ -1,54 +1,23 @@
-// src/components/LoadingButton.tsx
+// src/components/loading-states/LoadingButton.tsx
 import clsx3 from "clsx";
 
-// src/components/icons/Helpwave.tsx
-import { clsx } from "clsx";
+// src/components/user-action/Button.tsx
+import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
-var Helpwave = ({
-  color = "currentColor",
-  animate = "none",
-  size = 64,
-  ...props
-}) => {
-  const isLoadingAnimation = animate === "loading";
-  let svgAnimationKey = "";
-  if (animate === "pulse") {
-    svgAnimationKey = "animate-pulse";
-  } else if (animate === "bounce") {
-    svgAnimationKey = "animate-bounce";
-  }
-  if (size < 0) {
-    console.error("size cannot be less than 0");
-    size = 64;
-  }
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      width: size,
-      height: size,
-      viewBox: "0 0 888 888",
-      fill: "none",
-      strokeLinecap: "round",
-      strokeWidth: 48,
-      ...props,
-      children: /* @__PURE__ */ jsxs("g", { className: clsx(svgAnimationKey), children: [
-        /* @__PURE__ */ jsx("path", { className: clsx({ "animate-wave-big-left-up": isLoadingAnimation }), d: "M144 543.235C144 423.259 232.164 326 340.92 326", stroke: color, strokeDasharray: "1000" }),
-        /* @__PURE__ */ jsx("path", { className: clsx({ "animate-wave-big-right-down": isLoadingAnimation }), d: "M537.84 544.104C429.084 544.104 340.92 446.844 340.92 326.869", stroke: color, strokeDasharray: "1000" }),
-        /* @__PURE__ */ jsx("path", { className: clsx({ "animate-wave-small-left-up": isLoadingAnimation }), d: "M462.223 518.035C462.223 432.133 525.348 362.495 603.217 362.495", stroke: color, strokeDasharray: "1000" }),
-        /* @__PURE__ */ jsx("path", { className: clsx({ "animate-wave-small-right-down": isLoadingAnimation }), d: "M745.001 519.773C666.696 519.773 603.218 450.136 603.218 364.233", stroke: color, strokeDasharray: "1000" })
-      ] })
-    }
-  );
-};
-
-// src/components/Button.tsx
-import clsx2 from "clsx";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var ButtonSizePaddings = {
+var paddingMapping = {
   small: "btn-sm",
   medium: "btn-md",
   large: "btn-lg"
 };
+var iconPaddingMapping = {
+  small: "icon-btn-sm",
+  medium: "icon-btn-md",
+  large: "icon-btn-lg"
+};
+var ButtonUtil = {
+  paddingMapping,
+  iconPaddingMapping
+};
 var SolidButton = ({
   children,
   disabled = false,
@@ -66,7 +35,8 @@ var SolidButton = ({
     tertiary: "bg-button-solid-tertiary-background text-button-solid-tertiary-text",
     positive: "bg-button-solid-positive-background text-button-solid-positive-text",
     warning: "bg-button-solid-warning-background text-button-solid-warning-text",
-    negative: "bg-button-solid-negative-background text-button-solid-negative-text"
+    negative: "bg-button-solid-negative-background text-button-solid-negative-text",
+    neutral: "bg-button-solid-neutral-background text-button-solid-neutral-text"
   }[color];
   const iconColorClasses = {
     primary: "text-button-solid-primary-icon",
@@ -74,27 +44,28 @@ var SolidButton = ({
     tertiary: "text-button-solid-tertiary-icon",
     positive: "text-button-solid-positive-icon",
     warning: "text-button-solid-warning-icon",
-    negative: "text-button-solid-negative-icon"
+    negative: "text-button-solid-negative-icon",
+    neutral: "text-button-solid-neutral-icon"
   }[color];
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs(
     "button",
     {
       onClick: disabled ? void 0 : onClick,
       disabled: disabled || onClick === void 0,
-      className: clsx2(
+      className: clsx(
         className,
         {
           "text-disabled-text bg-disabled-background": disabled,
-          [clsx2(colorClasses, "hover:brightness-90")]: !disabled
+          [clsx(colorClasses, "hover:brightness-90")]: !disabled
         },
-        ButtonSizePaddings[size]
+        ButtonUtil.paddingMapping[size]
       ),
       ...restProps,
       children: [
-        startIcon && /* @__PURE__ */ jsx2(
+        startIcon && /* @__PURE__ */ jsx(
           "span",
           {
-            className: clsx2({
+            className: clsx({
               [iconColorClasses]: !disabled,
               [`text-disabled-icon`]: disabled
             }),
@@ -102,10 +73,10 @@ var SolidButton = ({
           }
         ),
         children,
-        endIcon && /* @__PURE__ */ jsx2(
+        endIcon && /* @__PURE__ */ jsx(
           "span",
           {
-            className: clsx2({
+            className: clsx({
               [iconColorClasses]: !disabled,
               [`text-disabled-icon`]: disabled
             }),
@@ -120,10 +91,82 @@ var SolidButton = ({
 // src/util/noop.ts
 var noop = () => void 0;
 
-// src/components/LoadingButton.tsx
+// src/components/icons-and-geometry/Helpwave.tsx
+import { clsx as clsx2 } from "clsx";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var Helpwave = ({
+  color = "currentColor",
+  animate = "none",
+  size = 64,
+  ...props
+}) => {
+  const isLoadingAnimation = animate === "loading";
+  let svgAnimationKey = "";
+  if (animate === "pulse") {
+    svgAnimationKey = "animate-pulse";
+  } else if (animate === "bounce") {
+    svgAnimationKey = "animate-bounce";
+  }
+  if (size < 0) {
+    console.error("size cannot be less than 0");
+    size = 64;
+  }
+  return /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 888 888",
+      fill: "none",
+      strokeLinecap: "round",
+      strokeWidth: 48,
+      ...props,
+      children: /* @__PURE__ */ jsxs2("g", { className: clsx2(svgAnimationKey), children: [
+        /* @__PURE__ */ jsx2(
+          "path",
+          {
+            className: clsx2({ "animate-wave-big-left-up": isLoadingAnimation }),
+            d: "M144 543.235C144 423.259 232.164 326 340.92 326",
+            stroke: color,
+            strokeDasharray: "1000"
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "path",
+          {
+            className: clsx2({ "animate-wave-big-right-down": isLoadingAnimation }),
+            d: "M537.84 544.104C429.084 544.104 340.92 446.844 340.92 326.869",
+            stroke: color,
+            strokeDasharray: "1000"
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "path",
+          {
+            className: clsx2({ "animate-wave-small-left-up": isLoadingAnimation }),
+            d: "M462.223 518.035C462.223 432.133 525.348 362.495 603.217 362.495",
+            stroke: color,
+            strokeDasharray: "1000"
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "path",
+          {
+            className: clsx2({ "animate-wave-small-right-down": isLoadingAnimation }),
+            d: "M745.001 519.773C666.696 519.773 603.218 450.136 603.218 364.233",
+            stroke: color,
+            strokeDasharray: "1000"
+          }
+        )
+      ] })
+    }
+  );
+};
+
+// src/components/loading-states/LoadingButton.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var LoadingButton = ({ isLoading = false, size = "medium", onClick, ...rest }) => {
-  const paddingClass = ButtonSizePaddings[size];
+  const paddingClass = ButtonUtil.paddingMapping[size];
   return /* @__PURE__ */ jsxs3("div", { className: "inline-block relative", children: [
     isLoading && /* @__PURE__ */ jsx3("div", { className: clsx3("absolute inset-0 row items-center justify-center bg-white/40", paddingClass), children: /* @__PURE__ */ jsx3(Helpwave, { animate: "loading", className: "text-white" }) }),
     /* @__PURE__ */ jsx3(SolidButton, { ...rest, disabled: rest.disabled, onClick: isLoading ? noop : onClick })
@@ -132,4 +175,4 @@ var LoadingButton = ({ isLoading = false, size = "medium", onClick, ...rest }) =
 export {
   LoadingButton
 };
-//# sourceMappingURL=LoadingButton.mjs.map
+//# sourceMappingURL=LoadingButton.js.map

package/dist/components/loading-states/LoadingButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/loading-states/LoadingButton.tsx","../../../src/components/user-action/Button.tsx","../../../src/util/noop.ts","../../../src/components/icons-and-geometry/Helpwave.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport type { SolidButtonProps } from '../user-action/Button'\nimport { ButtonUtil, SolidButton } from '../user-action/Button'\nimport { noop } from '@/util/noop'\nimport { Helpwave } from '../icons-and-geometry/Helpwave'\n\ntype LoadingButtonProps = {\n  isLoading?: boolean,\n} & SolidButtonProps\n\nexport const LoadingButton = ({ isLoading = false, size = 'medium', onClick, ...rest }: LoadingButtonProps) => {\n  const paddingClass = ButtonUtil.paddingMapping[size]\n\n  return (\n    <div className=\"inline-block relative\">\n      {\n        isLoading && (\n          <div className={clsx('absolute inset-0 row items-center justify-center bg-white/40', paddingClass)}>\n            <Helpwave animate=\"loading\" className=\"text-white\"/>\n          </div>\n        )\n      }\n      <SolidButton {...rest} disabled={rest.disabled} onClick={isLoading ? noop : onClick}/>\n    </div>\n  )\n}\n","import type { ButtonHTMLAttributes, PropsWithChildren, ReactNode } from 'react'\nimport clsx from 'clsx'\n\n\nexport const ButtonColorUtil = {\n  solid: ['primary', 'secondary', 'tertiary', 'positive', 'warning', 'negative', 'neutral'] as const,\n  text: ['primary', 'negative', 'neutral'] as const,\n  outline: ['primary'] as const,\n}\n\n\n/**\n * The allowed colors for the SolidButton and IconButton\n */\nexport type SolidButtonColor = typeof ButtonColorUtil.solid[number]\n/**\n * The allowed colors for the OutlineButton\n */\nexport type OutlineButtonColor = typeof ButtonColorUtil.outline[number]\n/**\n * The allowed colors for the TextButton\n */\nexport type TextButtonColor = typeof ButtonColorUtil.text[number]\n\n/**\n * The different sizes for a button\n */\ntype ButtonSizes = 'small' | 'medium' | 'large'\n\n/**\n * The shard properties between all button types\n */\nexport type ButtonProps = PropsWithChildren<{\n  /**\n   * @default 'medium'\n   */\n  size?: ButtonSizes,\n}> & ButtonHTMLAttributes<Element>\n\nconst paddingMapping: Record<ButtonSizes, string> = {\n  small: 'btn-sm',\n  medium: 'btn-md',\n  large: 'btn-lg'\n}\n\nconst iconPaddingMapping: Record<ButtonSizes, string> = {\n  small: 'icon-btn-sm',\n  medium: 'icon-btn-md',\n  large: 'icon-btn-lg'\n}\n\nexport const ButtonUtil = {\n  paddingMapping,\n  iconPaddingMapping\n}\n\ntype ButtonWithIconsProps = ButtonProps & {\n  startIcon?: ReactNode,\n  endIcon?: ReactNode,\n}\n\nexport type SolidButtonProps = ButtonWithIconsProps & {\n  color?: SolidButtonColor,\n}\n\nexport type OutlineButtonProps = ButtonWithIconsProps & {\n  color?: OutlineButtonColor,\n}\n\nexport type TextButtonProps = ButtonWithIconsProps & {\n  color?: TextButtonColor,\n}\n\nexport type IconButtonProps = ButtonProps & {\n  color?: SolidButtonColor,\n}\n\n/**\n * A button with a solid background and different sizes\n */\nconst SolidButton = ({\n                       children,\n                       disabled = false,\n                       color = 'primary',\n                       size = 'medium',\n                       startIcon,\n                       endIcon,\n                       onClick,\n                       className,\n                       ...restProps\n                     }: SolidButtonProps) => {\n  const colorClasses = {\n    primary: 'bg-button-solid-primary-background text-button-solid-primary-text',\n    secondary: 'bg-button-solid-secondary-background text-button-solid-secondary-text',\n    tertiary: 'bg-button-solid-tertiary-background text-button-solid-tertiary-text',\n    positive: 'bg-button-solid-positive-background text-button-solid-positive-text',\n    warning: 'bg-button-solid-warning-background text-button-solid-warning-text',\n    negative: 'bg-button-solid-negative-background text-button-solid-negative-text',\n    neutral: 'bg-button-solid-neutral-background text-button-solid-neutral-text',\n  }[color]\n\n  const iconColorClasses = {\n    primary: 'text-button-solid-primary-icon',\n    secondary: 'text-button-solid-secondary-icon',\n    tertiary: 'text-button-solid-tertiary-icon',\n    positive: 'text-button-solid-positive-icon',\n    warning: 'text-button-solid-warning-icon',\n    negative: 'text-button-solid-negative-icon',\n    neutral: 'text-button-solid-neutral-icon',\n  }[color]\n\n  return (\n    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled || onClick === undefined}\n      className={clsx(\n        className,\n        {\n          'text-disabled-text bg-disabled-background': disabled,\n          [clsx(colorClasses, 'hover:brightness-90')]: !disabled\n        },\n        ButtonUtil.paddingMapping[size]\n      )}\n      {...restProps}\n    >\n      {startIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {startIcon}\n      </span>\n      )}\n      {children}\n      {endIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {endIcon}\n      </span>\n      )}\n    </button>\n  )\n}\n\n/**\n * A button with an outline border and different sizes\n */\nconst OutlineButton = ({\n                         children,\n                         disabled = false,\n                         color = 'primary',\n                         size = 'medium',\n                         startIcon,\n                         endIcon,\n                         onClick,\n                         className,\n                         ...restProps\n                       }: OutlineButtonProps) => {\n  const colorClasses = {\n    primary: 'bg-transparent border-2 border-button-outline-primary-text text-button-outline-primary-text',\n  }[color]\n\n  const iconColorClasses = {\n    primary: 'text-button-outline-primary-icon',\n  }[color]\n  return (\n    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled || onClick === undefined}\n      className={clsx(\n        className, {\n          'text-disabled-text border-disabled-outline': disabled,\n          [clsx(colorClasses, 'hover:brightness-80')]: !disabled,\n        },\n        ButtonUtil.paddingMapping[size]\n      )}\n      {...restProps}\n    >\n      {startIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {startIcon}\n      </span>\n      )}\n      {children}\n      {endIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {endIcon}\n      </span>\n      )}\n    </button>\n  )\n}\n\n/**\n * A text that is a button that can have different sizes\n */\nconst TextButton = ({\n                      children,\n                      disabled = false,\n                      color = 'neutral',\n                      size = 'medium',\n                      startIcon,\n                      endIcon,\n                      onClick,\n                      className,\n                      ...restProps\n                    }: TextButtonProps) => {\n  const colorClasses = {\n    primary: 'bg-transparent text-button-text-primary-text',\n    negative: 'bg-transparent text-button-text-negative-text',\n    neutral: 'bg-transparent text-button-text-neutral-text',\n  }[color]\n\n  const iconColorClasses = {\n    primary: 'text-button-text-primary-icon',\n    negative: 'text-button-text-negative-icon',\n    neutral: 'text-button-text-neutral-icon',\n  }[color]\n  return (\n    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled || onClick === undefined}\n      className={clsx(\n        className, {\n          'text-disabled-text': disabled,\n          [clsx(colorClasses, 'hover:bg-button-text-hover-background rounded-full')]: !disabled,\n        },\n        ButtonUtil.paddingMapping[size]\n      )}\n      {...restProps}\n    >\n      {startIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {startIcon}\n      </span>\n      )}\n      {children}\n      {endIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {endIcon}\n      </span>\n      )}\n    </button>\n  )\n}\n\n\n/**\n * A button for icons with a solid background and different sizes\n */\nconst IconButton = ({\n                      children,\n                      disabled = false,\n                      color = 'primary',\n                      size = 'medium',\n                      onClick,\n                      className,\n                      ...restProps\n                    }: IconButtonProps) => {\n  const colorClasses = {\n    primary: 'bg-button-solid-primary-background text-button-solid-primary-text',\n    secondary: 'bg-button-solid-secondary-background text-button-solid-secondary-text',\n    tertiary: 'bg-button-solid-tertiary-background text-button-solid-tertiary-text',\n    positive: 'bg-button-solid-positive-background text-button-solid-positive-text',\n    warning: 'bg-button-solid-warning-background text-button-solid-warning-text',\n    negative: 'bg-button-solid-negative-background text-button-solid-negative-text',\n    neutral: 'bg-button-solid-neutral-background text-button-solid-neutral-text',\n  }[color]\n\n  return (\n    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled || onClick === undefined}\n      className={clsx(\n        className,\n        {\n          'text-disabled-text bg-disabled-background': disabled,\n          [clsx(colorClasses, 'hover:brightness-90')]: !disabled\n        },\n        ButtonUtil.iconPaddingMapping[size]\n      )}\n      {...restProps}\n    >\n      {children}\n    </button>\n  )\n}\n\nexport { SolidButton, OutlineButton, TextButton, IconButton }\n","export const noop = () => undefined\n","import type { SVGProps } from 'react'\nimport { clsx } from 'clsx'\n\nexport type HelpwaveProps = SVGProps<SVGSVGElement> & {\n  color?: string,\n  animate?: 'none' | 'loading' | 'pulse' | 'bounce',\n  size?: number,\n}\n\n/**\n * The helpwave loading spinner based on the svg logo.\n */\nexport const Helpwave = ({\n                           color = 'currentColor',\n                           animate = 'none',\n                           size = 64,\n                           ...props\n                         }: HelpwaveProps) => {\n  const isLoadingAnimation = animate === 'loading'\n  let svgAnimationKey = ''\n\n  if (animate === 'pulse') {\n    svgAnimationKey = 'animate-pulse'\n  } else if (animate === 'bounce') {\n    svgAnimationKey = 'animate-bounce'\n  }\n\n  if (size < 0) {\n    console.error('size cannot be less than 0')\n    size = 64\n  }\n\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox=\"0 0 888 888\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeWidth={48}\n      {...props}\n    >\n      <g className={clsx(svgAnimationKey)}>\n        <path className={clsx({ 'animate-wave-big-left-up': isLoadingAnimation })}\n              d=\"M144 543.235C144 423.259 232.164 326 340.92 326\" stroke={color} strokeDasharray=\"1000\"/>\n        <path className={clsx({ 'animate-wave-big-right-down': isLoadingAnimation })}\n              d=\"M537.84 544.104C429.084 544.104 340.92 446.844 340.92 326.869\" stroke={color} strokeDasharray=\"1000\"/>\n        <path className={clsx({ 'animate-wave-small-left-up': isLoadingAnimation })}\n              d=\"M462.223 518.035C462.223 432.133 525.348 362.495 603.217 362.495\" stroke={color}\n              strokeDasharray=\"1000\"/>\n        <path className={clsx({ 'animate-wave-small-right-down': isLoadingAnimation })}\n              d=\"M745.001 519.773C666.696 519.773 603.218 450.136 603.218 364.233\" stroke={color}\n              strokeDasharray=\"1000\"/>\n      </g>\n    </svg>\n  )\n}\n"],"mappings":"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","names":["clsx","clsx","jsx","jsxs","jsx","jsxs","clsx"]}

package/dist/components/{ProgressIndicator.js → loading-states/ProgressIndicator.cjs}

@@ -17,7 +17,7 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/components/ProgressIndicator.tsx
+// src/components/loading-states/ProgressIndicator.tsx
 var ProgressIndicator_exports = {};
 __export(ProgressIndicator_exports, {
   ProgressIndicator: () => ProgressIndicator
@@ -81,4 +81,4 @@ var ProgressIndicator = ({
 0 && (module.exports = {
   ProgressIndicator
 });
-//# sourceMappingURL=ProgressIndicator.js.map
+//# sourceMappingURL=ProgressIndicator.cjs.map

package/dist/components/loading-states/ProgressIndicator.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/loading-states/ProgressIndicator.tsx"],"sourcesContent":["export type ProgressIndicatorProps = {\n  /*\n    The amount of progress that has been made\n    Value form 0 to 1\n   */\n  progress: number,\n  strokeWidth?: number,\n  size?: keyof typeof sizeMapping,\n  direction?: 'clockwise' | 'counterclockwise',\n  /*\n    Rotation of the starting point of the indicator\n    default start at 3 o'clock\n    Given in degree\n   */\n  rotation?: number,\n}\n\nconst sizeMapping = { small: 16, medium: 24, big: 48 }\n\n/**\n * A progress indicator\n *\n * Start rotation is 3 o'clock and fills counterclockwise\n *\n * Progress is given from 0 to 1\n */\nexport const ProgressIndicator = ({\n                                    progress,\n                                    strokeWidth = 5,\n                                    size = 'medium',\n                                    direction = 'counterclockwise',\n                                    rotation = 0\n                                  }: ProgressIndicatorProps) => {\n  const currentSize = sizeMapping[size]\n  const center = currentSize / 2\n  const radius = center - strokeWidth / 2\n  const arcLength = 2 * Math.PI * radius\n  const arcOffset = arcLength * progress\n  if (direction === 'clockwise') {\n    rotation += 360 * progress\n  }\n  return (\n    <svg\n      style={{\n        height: `${currentSize}px`,\n        width: `${currentSize}px`,\n        transform: `rotate(${rotation}deg)`\n      }}\n    >\n      <circle cx={center} cy={center} r={radius} fill=\"transparent\" strokeWidth={strokeWidth}\n              className=\"stroke-primary\"\n      />\n      <circle cx={center} cy={center} r={radius} fill=\"transparent\" strokeWidth={strokeWidth}\n              strokeDasharray={arcLength} strokeDashoffset={arcOffset} className=\"stroke-gray-300\"\n      />\n    </svg>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0CI;AAzBJ,IAAM,cAAc,EAAE,OAAO,IAAI,QAAQ,IAAI,KAAK,GAAG;AAS9C,IAAM,oBAAoB,CAAC;AAAA,EACE;AAAA,EACA,cAAc;AAAA,EACd,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,WAAW;AACb,MAA8B;AAC9D,QAAM,cAAc,YAAY,IAAI;AACpC,QAAM,SAAS,cAAc;AAC7B,QAAM,SAAS,SAAS,cAAc;AACtC,QAAM,YAAY,IAAI,KAAK,KAAK;AAChC,QAAM,YAAY,YAAY;AAC9B,MAAI,cAAc,aAAa;AAC7B,gBAAY,MAAM;AAAA,EACpB;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,QAAQ,GAAG,WAAW;AAAA,QACtB,OAAO,GAAG,WAAW;AAAA,QACrB,WAAW,UAAU,QAAQ;AAAA,MAC/B;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YAAO,IAAI;AAAA,YAAQ,IAAI;AAAA,YAAQ,GAAG;AAAA,YAAQ,MAAK;AAAA,YAAc;AAAA,YACtD,WAAU;AAAA;AAAA,QAClB;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YAAO,IAAI;AAAA,YAAQ,IAAI;AAAA,YAAQ,GAAG;AAAA,YAAQ,MAAK;AAAA,YAAc;AAAA,YACtD,iBAAiB;AAAA,YAAW,kBAAkB;AAAA,YAAW,WAAU;AAAA;AAAA,QAC3E;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/{ProgressIndicator.mjs → loading-states/ProgressIndicator.js}

@@ -1,4 +1,4 @@
-// src/components/ProgressIndicator.tsx
+// src/components/loading-states/ProgressIndicator.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var sizeMapping = { small: 16, medium: 24, big: 48 };
 var ProgressIndicator = ({
@@ -56,4 +56,4 @@ var ProgressIndicator = ({
 export {
   ProgressIndicator
 };
-//# sourceMappingURL=ProgressIndicator.mjs.map
+//# sourceMappingURL=ProgressIndicator.js.map

package/dist/components/loading-states/ProgressIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/loading-states/ProgressIndicator.tsx"],"sourcesContent":["export type ProgressIndicatorProps = {\n  /*\n    The amount of progress that has been made\n    Value form 0 to 1\n   */\n  progress: number,\n  strokeWidth?: number,\n  size?: keyof typeof sizeMapping,\n  direction?: 'clockwise' | 'counterclockwise',\n  /*\n    Rotation of the starting point of the indicator\n    default start at 3 o'clock\n    Given in degree\n   */\n  rotation?: number,\n}\n\nconst sizeMapping = { small: 16, medium: 24, big: 48 }\n\n/**\n * A progress indicator\n *\n * Start rotation is 3 o'clock and fills counterclockwise\n *\n * Progress is given from 0 to 1\n */\nexport const ProgressIndicator = ({\n                                    progress,\n                                    strokeWidth = 5,\n                                    size = 'medium',\n                                    direction = 'counterclockwise',\n                                    rotation = 0\n                                  }: ProgressIndicatorProps) => {\n  const currentSize = sizeMapping[size]\n  const center = currentSize / 2\n  const radius = center - strokeWidth / 2\n  const arcLength = 2 * Math.PI * radius\n  const arcOffset = arcLength * progress\n  if (direction === 'clockwise') {\n    rotation += 360 * progress\n  }\n  return (\n    <svg\n      style={{\n        height: `${currentSize}px`,\n        width: `${currentSize}px`,\n        transform: `rotate(${rotation}deg)`\n      }}\n    >\n      <circle cx={center} cy={center} r={radius} fill=\"transparent\" strokeWidth={strokeWidth}\n              className=\"stroke-primary\"\n      />\n      <circle cx={center} cy={center} r={radius} fill=\"transparent\" strokeWidth={strokeWidth}\n              strokeDasharray={arcLength} strokeDashoffset={arcOffset} className=\"stroke-gray-300\"\n      />\n    </svg>\n  )\n}\n"],"mappings":";AA0CI,SAOE,KAPF;AAzBJ,IAAM,cAAc,EAAE,OAAO,IAAI,QAAQ,IAAI,KAAK,GAAG;AAS9C,IAAM,oBAAoB,CAAC;AAAA,EACE;AAAA,EACA,cAAc;AAAA,EACd,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,WAAW;AACb,MAA8B;AAC9D,QAAM,cAAc,YAAY,IAAI;AACpC,QAAM,SAAS,cAAc;AAC7B,QAAM,SAAS,SAAS,cAAc;AACtC,QAAM,YAAY,IAAI,KAAK,KAAK;AAChC,QAAM,YAAY,YAAY;AAC9B,MAAI,cAAc,aAAa;AAC7B,gBAAY,MAAM;AAAA,EACpB;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,QAAQ,GAAG,WAAW;AAAA,QACtB,OAAO,GAAG,WAAW;AAAA,QACrB,WAAW,UAAU,QAAQ;AAAA,MAC/B;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YAAO,IAAI;AAAA,YAAQ,IAAI;AAAA,YAAQ,GAAG;AAAA,YAAQ,MAAK;AAAA,YAAc;AAAA,YACtD,WAAU;AAAA;AAAA,QAClB;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YAAO,IAAI;AAAA,YAAQ,IAAI;AAAA,YAAQ,GAAG;AAAA,YAAQ,MAAK;AAAA,YAAc;AAAA,YACtD,iBAAiB;AAAA,YAAW,kBAAkB;AAAA,YAAW,WAAU;AAAA;AAAA,QAC3E;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}