@helpwave/hightide 0.1.25 → 0.1.27

package/README.md

@@ -5,7 +5,7 @@ This repository contains all components and themes employed by helpwave's web ap
 ## Theming
 
 Theming is achieved through an extensive [tailwindcss](https://tailwindcss.com) config in
-the [globals.css](src/css/globals.css)
+the [globals.css](src/style/globals.css)
 
 ## Storybook
 

package/dist/components/branding/HelpwaveBadge.d.mts

@@ -1,14 +1,13 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes } from 'react';
 
-type Size = 'small' | 'large';
-type HelpwaveBadgeProps = {
+type Size = 'sm' | 'md' | 'lg';
+type HelpwaveBadgeProps = HTMLAttributes<HTMLSpanElement> & {
     size?: Size;
-    title?: string;
-    className?: string;
 };
 /**
  * A Badge with the helpwave logo and the helpwave name
  */
-declare const HelpwaveBadge: ({ size, title, className }: HelpwaveBadgeProps) => react_jsx_runtime.JSX.Element;
+declare const HelpwaveBadge: ({ size, ...props }: HelpwaveBadgeProps) => react_jsx_runtime.JSX.Element;
 
 export { HelpwaveBadge, type HelpwaveBadgeProps };

package/dist/components/branding/HelpwaveBadge.d.ts

@@ -1,14 +1,13 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes } from 'react';
 
-type Size = 'small' | 'large';
-type HelpwaveBadgeProps = {
+type Size = 'sm' | 'md' | 'lg';
+type HelpwaveBadgeProps = HTMLAttributes<HTMLSpanElement> & {
     size?: Size;
-    title?: string;
-    className?: string;
 };
 /**
  * A Badge with the helpwave logo and the helpwave name
  */
-declare const HelpwaveBadge: ({ size, title, className }: HelpwaveBadgeProps) => react_jsx_runtime.JSX.Element;
+declare const HelpwaveBadge: ({ size, ...props }: HelpwaveBadgeProps) => react_jsx_runtime.JSX.Element;
 
 export { HelpwaveBadge, type HelpwaveBadgeProps };

package/dist/components/branding/HelpwaveBadge.js

@@ -32,59 +32,14 @@ __export(HelpwaveBadge_exports, {
   HelpwaveBadge: () => HelpwaveBadge
 });
 module.exports = __toCommonJS(HelpwaveBadge_exports);
-var import_clsx3 = __toESM(require("clsx"));
 
-// src/components/layout-and-navigation/Tile.tsx
-var import_clsx = __toESM(require("clsx"));
-var import_lucide_react = require("lucide-react");
+// src/components/icons-and-geometry/HelpwaveLogo.tsx
+var import_clsx = require("clsx");
 var import_jsx_runtime = require("react/jsx-runtime");
-var Tile = ({
-  title,
-  titleClassName,
-  description,
-  descriptionClassName,
-  onClick,
-  isSelected = false,
-  disabled = false,
-  prefix,
-  suffix,
-  normalClassName = "hover:bg-primary/40 cursor-pointer",
-  selectedClassName = "bg-primary/20",
-  disabledClassName = "text-disabled-text bg-disabled-background cursor-not-allowed",
-  className
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "div",
-    {
-      className: (0, import_clsx.default)(
-        "flex-row-2 w-full items-center",
-        {
-          [normalClassName]: onClick && !disabled,
-          [selectedClassName]: isSelected && !disabled,
-          [disabledClassName]: disabled
-        },
-        className
-      ),
-      onClick: disabled ? void 0 : onClick,
-      children: [
-        prefix,
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex-col-0 w-full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_clsx.default)(titleClassName ?? "textstyle-title-normal"), children: title }),
-          !!description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_clsx.default)(descriptionClassName ?? "textstyle-description"), children: description })
-        ] }),
-        suffix ?? (isSelected ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Check, { size: 24 }) : void 0)
-      ]
-    }
-  );
-};
-
-// src/components/icons-and-geometry/Helpwave.tsx
-var import_clsx2 = require("clsx");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var Helpwave = ({
+var HelpwaveLogo = ({
   color = "currentColor",
+  size,
   animate = "none",
-  size = 64,
   ...props
 }) => {
   const isLoadingAnimation = animate === "loading";
@@ -94,53 +49,52 @@ var Helpwave = ({
   } 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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "svg",
     {
-      width: size,
-      height: size,
-      viewBox: "0 0 888 888",
+      ...props,
+      viewBox: "0 0 1024 1024",
       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)(
+      strokeWidth: 65,
+      className: (0, import_clsx.clsx)({
+        "max-w-16 max-h-16": size === "lg",
+        "max-w-12 max-h-12": size === "md",
+        "max-w-8 max-h-8": size === "sm"
+      }, props.className),
+      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_clsx2.clsx)({ "animate-wave-big-left-up": isLoadingAnimation }),
-            d: "M144 543.235C144 423.259 232.164 326 340.92 326",
+            className: (0, import_clsx.clsx)({ "animate-wave-big-left-up": isLoadingAnimation }),
+            d: "M146 644.214C146 498.088 253.381 379.629 385.843 379.629",
             stroke: color,
             strokeDasharray: "1000"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime.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",
+            className: (0, import_clsx.clsx)({ "animate-wave-big-right-down": isLoadingAnimation }),
+            d: "M625.686 645.272C493.224 645.272 385.843 526.813 385.843 380.687",
             stroke: color,
             strokeDasharray: "1000"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime.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",
+            className: (0, import_clsx.clsx)({ "animate-wave-small-left-up": isLoadingAnimation }),
+            d: "M533.585 613.522C533.585 508.895 610.47 424.079 705.312 424.079",
             stroke: color,
             strokeDasharray: "1000"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime.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",
+            className: (0, import_clsx.clsx)({ "animate-wave-small-right-down": isLoadingAnimation }),
+            d: "M878 615.639C782.628 615.639 705.313 530.822 705.313 426.196",
             stroke: color,
             strokeDasharray: "1000"
           }
@@ -151,26 +105,31 @@ var Helpwave = ({
 };
 
 // src/components/branding/HelpwaveBadge.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_clsx2 = __toESM(require("clsx"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var HelpwaveBadge = ({
-  size = "small",
-  title = "helpwave",
-  className = ""
+  size = "sm",
+  ...props
 }) => {
-  const iconSize = size === "small" ? 24 : 64;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    Tile,
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "span",
     {
-      prefix: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Helpwave, { size: iconSize }),
-      title,
-      titleClassName: size === "small" ? "textstyle-title-lg text-base" : "textstyle-title-xl",
-      className: (0, import_clsx3.default)(
+      ...props,
+      className: (0, import_clsx2.default)(
+        "flex flex-row items-center font-bold font-space rounded-md",
         {
-          "px-2 py-1 rounded-md": size === "small",
-          "px-4 py-1 rounded-md": size === "large"
+          "px-2 py-1": size === "sm" || size === "md",
+          "px-4 py-1": size === "lg",
+          "gap-x-1": size === "sm",
+          "gap-x-2 text-lg": size === "md",
+          "gap-x-2 text-xl": size === "lg"
         },
-        className
-      )
+        props.className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(HelpwaveLogo, { size }),
+        "helpwave"
+      ]
     }
   );
 };

package/dist/components/branding/HelpwaveBadge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/branding/HelpwaveBadge.tsx","../../../src/components/layout-and-navigation/Tile.tsx","../../../src/components/icons-and-geometry/Helpwave.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { Tile } from '../layout-and-navigation/Tile'\nimport { Helpwave } from '../icons-and-geometry/Helpwave'\n\ntype Size = 'small' | 'large'\n\nexport type HelpwaveBadgeProps = {\n  size?: Size,\n  title?: string,\n  className?: string,\n}\n\n/**\n * A Badge with the helpwave logo and the helpwave name\n */\nexport const HelpwaveBadge = ({\n                                size = 'small',\n                                title = 'helpwave',\n                                className = ''\n                              }: HelpwaveBadgeProps) => {\n  const iconSize: number = size === 'small' ? 24 : 64\n\n  return (\n    <Tile\n      prefix={(<Helpwave size={iconSize}/>)}\n      title={title}\n      titleClassName={size === 'small' ? 'textstyle-title-lg text-base' : 'textstyle-title-xl'}\n      className={clsx(\n        {\n          'px-2 py-1 rounded-md': size === 'small',\n          'px-4 py-1 rounded-md': size === 'large',\n        }, className\n      )}\n    />\n  )\n}\n","import type { ReactNode } from 'react'\nimport clsx from 'clsx'\nimport { Check } from 'lucide-react'\n\nexport type TileProps = {\n  title: ReactNode,\n  titleClassName?: string,\n  description?: ReactNode,\n  descriptionClassName?: string,\n  onClick?: () => void,\n  disabled?: boolean,\n  isSelected?: boolean,\n  isListItem?: boolean,\n  prefix?: ReactNode,\n  suffix?: ReactNode,\n  className?: string,\n  normalClassName?: string,\n  selectedClassName?: string,\n  disabledClassName?: string,\n}\n\n/**\n * A component for creating a tile similar to the flutter ListTile\n */\nexport const Tile = ({\n                       title,\n                       titleClassName,\n                       description,\n                       descriptionClassName,\n                       onClick,\n                       isSelected = false,\n                       disabled = false,\n                       prefix,\n                       suffix,\n                       normalClassName = 'hover:bg-primary/40 cursor-pointer',\n                       selectedClassName = 'bg-primary/20',\n                       disabledClassName = 'text-disabled-text bg-disabled-background cursor-not-allowed',\n                       className\n                     }: TileProps) => {\n  return (\n    <div\n      className={clsx(\n        'flex-row-2 w-full items-center',\n        {\n          [normalClassName]: onClick && !disabled,\n          [selectedClassName]: isSelected && !disabled,\n          [disabledClassName]: disabled,\n        },\n        className\n      )}\n      onClick={disabled ? undefined : onClick}\n    >\n      {prefix}\n      <div className=\"flex-col-0 w-full\">\n        <span className={clsx(titleClassName ?? ('textstyle-title-normal'))}>{title}</span>\n        {!!description &&\n          <span className={clsx(descriptionClassName ?? 'textstyle-description')}>{description}</span>}\n      </div>\n      {suffix ?? (isSelected ? (<Check size={24}/>) : undefined)}\n    </div>\n  )\n}\n\nexport type ListTileProps = TileProps\n\nexport const ListTile = ({\n  ...props\n}: ListTileProps) => {\n  return (\n    <Tile\n      {...props}\n      titleClassName={props.titleClassName ?? 'font-semibold'}\n      className={clsx('px-2 py-1 rounded-md', props.className)}\n      disabledClassName={props.disabledClassName ?? 'text-disabled-text cursor-not-allowed'}\n    />\n  )\n}\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"]}
+{"version":3,"sources":["../../../src/components/branding/HelpwaveBadge.tsx","../../../src/components/icons-and-geometry/HelpwaveLogo.tsx"],"sourcesContent":["import { HelpwaveLogo } from '../icons-and-geometry/HelpwaveLogo'\nimport type { HTMLAttributes } from 'react'\nimport clsx from 'clsx'\n\ntype Size = 'sm' | 'md' | 'lg'\n\nexport type HelpwaveBadgeProps = HTMLAttributes<HTMLSpanElement> & {\n  size?: Size,\n}\n\n/**\n * A Badge with the helpwave logo and the helpwave name\n */\nexport const HelpwaveBadge = ({\n                                size = 'sm',\n                                ...props\n                              }: HelpwaveBadgeProps) => {\n  return (\n    <span\n      {...props}\n      className={clsx(\n        'flex flex-row items-center font-bold font-space rounded-md',\n        {\n          'px-2 py-1': size === 'sm' || size === 'md',\n          'px-4 py-1': size === 'lg',\n          'gap-x-1': size === 'sm',\n          'gap-x-2 text-lg': size === 'md',\n          'gap-x-2 text-xl': size === 'lg'\n        }, props.className\n      )}\n    >\n      <HelpwaveLogo size={size}/>\n      helpwave\n    </span>\n  )\n}\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?: 'sm' | 'md' | 'lg',\n}\n\n/**\n * The helpwave loading spinner based on the svg logo.\n */\nexport const HelpwaveLogo = ({\n                               color = 'currentColor',\n                               size,\n                               animate = 'none',\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  return (\n    <svg\n      {...props}\n      viewBox=\"0 0 1024 1024\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeWidth={65}\n      className={clsx({\n        'max-w-16 max-h-16': size === 'lg',\n        'max-w-12 max-h-12': size === 'md',\n        'max-w-8 max-h-8': size === 'sm',\n      }, props.className)}\n    >\n      <g className={clsx(svgAnimationKey)}>\n        <path className={clsx({ 'animate-wave-big-left-up': isLoadingAnimation })}\n              d=\"M146 644.214C146 498.088 253.381 379.629 385.843 379.629\" stroke={color} strokeDasharray=\"1000\"/>\n        <path className={clsx({ 'animate-wave-big-right-down': isLoadingAnimation })}\n              d=\"M625.686 645.272C493.224 645.272 385.843 526.813 385.843 380.687\" stroke={color}\n              strokeDasharray=\"1000\"/>\n        <path className={clsx({ 'animate-wave-small-left-up': isLoadingAnimation })}\n              d=\"M533.585 613.522C533.585 508.895 610.47 424.079 705.312 424.079\" stroke={color}\n              strokeDasharray=\"1000\"/>\n        <path className={clsx({ 'animate-wave-small-right-down': isLoadingAnimation })}\n              d=\"M878 615.639C782.628 615.639 705.313 530.822 705.313 426.196\" stroke={color}\n              strokeDasharray=\"1000\"/>\n      </g>\n    </svg>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,kBAAqB;AAuCf;AA5BC,IAAM,eAAe,CAAC;AAAA,EACE,QAAQ;AAAA,EACR;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,MAAqB;AAChD,QAAM,qBAAqB,YAAY;AACvC,MAAI,kBAAkB;AAEtB,MAAI,YAAY,SAAS;AACvB,sBAAkB;AAAA,EACpB,WAAW,YAAY,UAAU;AAC/B,sBAAkB;AAAA,EACpB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,eAAc;AAAA,MACd,aAAa;AAAA,MACb,eAAW,kBAAK;AAAA,QACd,qBAAqB,SAAS;AAAA,QAC9B,qBAAqB,SAAS;AAAA,QAC9B,mBAAmB,SAAS;AAAA,MAC9B,GAAG,MAAM,SAAS;AAAA,MAElB,uDAAC,OAAE,eAAW,kBAAK,eAAe,GAChC;AAAA;AAAA,UAAC;AAAA;AAAA,YAAK,eAAW,kBAAK,EAAE,4BAA4B,mBAAmB,CAAC;AAAA,YAClE,GAAE;AAAA,YAA2D,QAAQ;AAAA,YAAO,iBAAgB;AAAA;AAAA,QAAM;AAAA,QACxG;AAAA,UAAC;AAAA;AAAA,YAAK,eAAW,kBAAK,EAAE,+BAA+B,mBAAmB,CAAC;AAAA,YACrE,GAAE;AAAA,YAAmE,QAAQ;AAAA,YAC7E,iBAAgB;AAAA;AAAA,QAAM;AAAA,QAC5B;AAAA,UAAC;AAAA;AAAA,YAAK,eAAW,kBAAK,EAAE,8BAA8B,mBAAmB,CAAC;AAAA,YACpE,GAAE;AAAA,YAAkE,QAAQ;AAAA,YAC5E,iBAAgB;AAAA;AAAA,QAAM;AAAA,QAC5B;AAAA,UAAC;AAAA;AAAA,YAAK,eAAW,kBAAK,EAAE,iCAAiC,mBAAmB,CAAC;AAAA,YACvE,GAAE;AAAA,YAA+D,QAAQ;AAAA,YACzE,iBAAgB;AAAA;AAAA,QAAM;AAAA,SAC9B;AAAA;AAAA,EACF;AAEJ;;;ADrDA,IAAAA,eAAiB;AAgBb,IAAAC,sBAAA;AALG,IAAM,gBAAgB,CAAC;AAAA,EACE,OAAO;AAAA,EACP,GAAG;AACL,MAA0B;AACtD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,aAAAC;AAAA,QACT;AAAA,QACA;AAAA,UACE,aAAa,SAAS,QAAQ,SAAS;AAAA,UACvC,aAAa,SAAS;AAAA,UACtB,WAAW,SAAS;AAAA,UACpB,mBAAmB,SAAS;AAAA,UAC5B,mBAAmB,SAAS;AAAA,QAC9B;AAAA,QAAG,MAAM;AAAA,MACX;AAAA,MAEA;AAAA,qDAAC,gBAAa,MAAW;AAAA,QAAE;AAAA;AAAA;AAAA,EAE7B;AAEJ;","names":["import_clsx","import_jsx_runtime","clsx"]}

package/dist/components/branding/HelpwaveBadge.mjs

@@ -1,57 +1,10 @@
-// src/components/branding/HelpwaveBadge.tsx
-import clsx3 from "clsx";
-
-// src/components/layout-and-navigation/Tile.tsx
-import clsx from "clsx";
-import { Check } from "lucide-react";
+// src/components/icons-and-geometry/HelpwaveLogo.tsx
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
-var Tile = ({
-  title,
-  titleClassName,
-  description,
-  descriptionClassName,
-  onClick,
-  isSelected = false,
-  disabled = false,
-  prefix,
-  suffix,
-  normalClassName = "hover:bg-primary/40 cursor-pointer",
-  selectedClassName = "bg-primary/20",
-  disabledClassName = "text-disabled-text bg-disabled-background cursor-not-allowed",
-  className
-}) => {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: clsx(
-        "flex-row-2 w-full items-center",
-        {
-          [normalClassName]: onClick && !disabled,
-          [selectedClassName]: isSelected && !disabled,
-          [disabledClassName]: disabled
-        },
-        className
-      ),
-      onClick: disabled ? void 0 : onClick,
-      children: [
-        prefix,
-        /* @__PURE__ */ jsxs("div", { className: "flex-col-0 w-full", children: [
-          /* @__PURE__ */ jsx("span", { className: clsx(titleClassName ?? "textstyle-title-normal"), children: title }),
-          !!description && /* @__PURE__ */ jsx("span", { className: clsx(descriptionClassName ?? "textstyle-description"), children: description })
-        ] }),
-        suffix ?? (isSelected ? /* @__PURE__ */ jsx(Check, { size: 24 }) : void 0)
-      ]
-    }
-  );
-};
-
-// 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 = ({
+var HelpwaveLogo = ({
   color = "currentColor",
+  size,
   animate = "none",
-  size = 64,
   ...props
 }) => {
   const isLoadingAnimation = animate === "loading";
@@ -61,53 +14,52 @@ var Helpwave = ({
   } else if (animate === "bounce") {
     svgAnimationKey = "animate-bounce";
   }
-  if (size < 0) {
-    console.error("size cannot be less than 0");
-    size = 64;
-  }
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     "svg",
     {
-      width: size,
-      height: size,
-      viewBox: "0 0 888 888",
+      ...props,
+      viewBox: "0 0 1024 1024",
       fill: "none",
       strokeLinecap: "round",
-      strokeWidth: 48,
-      ...props,
-      children: /* @__PURE__ */ jsxs2("g", { className: clsx2(svgAnimationKey), children: [
-        /* @__PURE__ */ jsx2(
+      strokeWidth: 65,
+      className: clsx({
+        "max-w-16 max-h-16": size === "lg",
+        "max-w-12 max-h-12": size === "md",
+        "max-w-8 max-h-8": size === "sm"
+      }, props.className),
+      children: /* @__PURE__ */ jsxs("g", { className: clsx(svgAnimationKey), children: [
+        /* @__PURE__ */ jsx(
           "path",
           {
-            className: clsx2({ "animate-wave-big-left-up": isLoadingAnimation }),
-            d: "M144 543.235C144 423.259 232.164 326 340.92 326",
+            className: clsx({ "animate-wave-big-left-up": isLoadingAnimation }),
+            d: "M146 644.214C146 498.088 253.381 379.629 385.843 379.629",
             stroke: color,
             strokeDasharray: "1000"
           }
         ),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx(
           "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",
+            className: clsx({ "animate-wave-big-right-down": isLoadingAnimation }),
+            d: "M625.686 645.272C493.224 645.272 385.843 526.813 385.843 380.687",
             stroke: color,
             strokeDasharray: "1000"
           }
         ),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx(
           "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",
+            className: clsx({ "animate-wave-small-left-up": isLoadingAnimation }),
+            d: "M533.585 613.522C533.585 508.895 610.47 424.079 705.312 424.079",
             stroke: color,
             strokeDasharray: "1000"
           }
         ),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx(
           "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",
+            className: clsx({ "animate-wave-small-right-down": isLoadingAnimation }),
+            d: "M878 615.639C782.628 615.639 705.313 530.822 705.313 426.196",
             stroke: color,
             strokeDasharray: "1000"
           }
@@ -118,26 +70,31 @@ var Helpwave = ({
 };
 
 // src/components/branding/HelpwaveBadge.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import clsx2 from "clsx";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var HelpwaveBadge = ({
-  size = "small",
-  title = "helpwave",
-  className = ""
+  size = "sm",
+  ...props
 }) => {
-  const iconSize = size === "small" ? 24 : 64;
-  return /* @__PURE__ */ jsx3(
-    Tile,
+  return /* @__PURE__ */ jsxs2(
+    "span",
     {
-      prefix: /* @__PURE__ */ jsx3(Helpwave, { size: iconSize }),
-      title,
-      titleClassName: size === "small" ? "textstyle-title-lg text-base" : "textstyle-title-xl",
-      className: clsx3(
+      ...props,
+      className: clsx2(
+        "flex flex-row items-center font-bold font-space rounded-md",
         {
-          "px-2 py-1 rounded-md": size === "small",
-          "px-4 py-1 rounded-md": size === "large"
+          "px-2 py-1": size === "sm" || size === "md",
+          "px-4 py-1": size === "lg",
+          "gap-x-1": size === "sm",
+          "gap-x-2 text-lg": size === "md",
+          "gap-x-2 text-xl": size === "lg"
         },
-        className
-      )
+        props.className
+      ),
+      children: [
+        /* @__PURE__ */ jsx2(HelpwaveLogo, { size }),
+        "helpwave"
+      ]
     }
   );
 };

package/dist/components/branding/HelpwaveBadge.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/branding/HelpwaveBadge.tsx","../../../src/components/layout-and-navigation/Tile.tsx","../../../src/components/icons-and-geometry/Helpwave.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { Tile } from '../layout-and-navigation/Tile'\nimport { Helpwave } from '../icons-and-geometry/Helpwave'\n\ntype Size = 'small' | 'large'\n\nexport type HelpwaveBadgeProps = {\n  size?: Size,\n  title?: string,\n  className?: string,\n}\n\n/**\n * A Badge with the helpwave logo and the helpwave name\n */\nexport const HelpwaveBadge = ({\n                                size = 'small',\n                                title = 'helpwave',\n                                className = ''\n                              }: HelpwaveBadgeProps) => {\n  const iconSize: number = size === 'small' ? 24 : 64\n\n  return (\n    <Tile\n      prefix={(<Helpwave size={iconSize}/>)}\n      title={title}\n      titleClassName={size === 'small' ? 'textstyle-title-lg text-base' : 'textstyle-title-xl'}\n      className={clsx(\n        {\n          'px-2 py-1 rounded-md': size === 'small',\n          'px-4 py-1 rounded-md': size === 'large',\n        }, className\n      )}\n    />\n  )\n}\n","import type { ReactNode } from 'react'\nimport clsx from 'clsx'\nimport { Check } from 'lucide-react'\n\nexport type TileProps = {\n  title: ReactNode,\n  titleClassName?: string,\n  description?: ReactNode,\n  descriptionClassName?: string,\n  onClick?: () => void,\n  disabled?: boolean,\n  isSelected?: boolean,\n  isListItem?: boolean,\n  prefix?: ReactNode,\n  suffix?: ReactNode,\n  className?: string,\n  normalClassName?: string,\n  selectedClassName?: string,\n  disabledClassName?: string,\n}\n\n/**\n * A component for creating a tile similar to the flutter ListTile\n */\nexport const Tile = ({\n                       title,\n                       titleClassName,\n                       description,\n                       descriptionClassName,\n                       onClick,\n                       isSelected = false,\n                       disabled = false,\n                       prefix,\n                       suffix,\n                       normalClassName = 'hover:bg-primary/40 cursor-pointer',\n                       selectedClassName = 'bg-primary/20',\n                       disabledClassName = 'text-disabled-text bg-disabled-background cursor-not-allowed',\n                       className\n                     }: TileProps) => {\n  return (\n    <div\n      className={clsx(\n        'flex-row-2 w-full items-center',\n        {\n          [normalClassName]: onClick && !disabled,\n          [selectedClassName]: isSelected && !disabled,\n          [disabledClassName]: disabled,\n        },\n        className\n      )}\n      onClick={disabled ? undefined : onClick}\n    >\n      {prefix}\n      <div className=\"flex-col-0 w-full\">\n        <span className={clsx(titleClassName ?? ('textstyle-title-normal'))}>{title}</span>\n        {!!description &&\n          <span className={clsx(descriptionClassName ?? 'textstyle-description')}>{description}</span>}\n      </div>\n      {suffix ?? (isSelected ? (<Check size={24}/>) : undefined)}\n    </div>\n  )\n}\n\nexport type ListTileProps = TileProps\n\nexport const ListTile = ({\n  ...props\n}: ListTileProps) => {\n  return (\n    <Tile\n      {...props}\n      titleClassName={props.titleClassName ?? 'font-semibold'}\n      className={clsx('px-2 py-1 rounded-md', props.className)}\n      disabledClassName={props.disabledClassName ?? 'text-disabled-text cursor-not-allowed'}\n    />\n  )\n}\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","clsx"]}
+{"version":3,"sources":["../../../src/components/icons-and-geometry/HelpwaveLogo.tsx","../../../src/components/branding/HelpwaveBadge.tsx"],"sourcesContent":["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?: 'sm' | 'md' | 'lg',\n}\n\n/**\n * The helpwave loading spinner based on the svg logo.\n */\nexport const HelpwaveLogo = ({\n                               color = 'currentColor',\n                               size,\n                               animate = 'none',\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  return (\n    <svg\n      {...props}\n      viewBox=\"0 0 1024 1024\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeWidth={65}\n      className={clsx({\n        'max-w-16 max-h-16': size === 'lg',\n        'max-w-12 max-h-12': size === 'md',\n        'max-w-8 max-h-8': size === 'sm',\n      }, props.className)}\n    >\n      <g className={clsx(svgAnimationKey)}>\n        <path className={clsx({ 'animate-wave-big-left-up': isLoadingAnimation })}\n              d=\"M146 644.214C146 498.088 253.381 379.629 385.843 379.629\" stroke={color} strokeDasharray=\"1000\"/>\n        <path className={clsx({ 'animate-wave-big-right-down': isLoadingAnimation })}\n              d=\"M625.686 645.272C493.224 645.272 385.843 526.813 385.843 380.687\" stroke={color}\n              strokeDasharray=\"1000\"/>\n        <path className={clsx({ 'animate-wave-small-left-up': isLoadingAnimation })}\n              d=\"M533.585 613.522C533.585 508.895 610.47 424.079 705.312 424.079\" stroke={color}\n              strokeDasharray=\"1000\"/>\n        <path className={clsx({ 'animate-wave-small-right-down': isLoadingAnimation })}\n              d=\"M878 615.639C782.628 615.639 705.313 530.822 705.313 426.196\" stroke={color}\n              strokeDasharray=\"1000\"/>\n      </g>\n    </svg>\n  )\n}\n","import { HelpwaveLogo } from '../icons-and-geometry/HelpwaveLogo'\nimport type { HTMLAttributes } from 'react'\nimport clsx from 'clsx'\n\ntype Size = 'sm' | 'md' | 'lg'\n\nexport type HelpwaveBadgeProps = HTMLAttributes<HTMLSpanElement> & {\n  size?: Size,\n}\n\n/**\n * A Badge with the helpwave logo and the helpwave name\n */\nexport const HelpwaveBadge = ({\n                                size = 'sm',\n                                ...props\n                              }: HelpwaveBadgeProps) => {\n  return (\n    <span\n      {...props}\n      className={clsx(\n        'flex flex-row items-center font-bold font-space rounded-md',\n        {\n          'px-2 py-1': size === 'sm' || size === 'md',\n          'px-4 py-1': size === 'lg',\n          'gap-x-1': size === 'sm',\n          'gap-x-2 text-lg': size === 'md',\n          'gap-x-2 text-xl': size === 'lg'\n        }, props.className\n      )}\n    >\n      <HelpwaveLogo size={size}/>\n      helpwave\n    </span>\n  )\n}\n"],"mappings":";AACA,SAAS,YAAY;AAuCf,SACE,KADF;AA5BC,IAAM,eAAe,CAAC;AAAA,EACE,QAAQ;AAAA,EACR;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,MAAqB;AAChD,QAAM,qBAAqB,YAAY;AACvC,MAAI,kBAAkB;AAEtB,MAAI,YAAY,SAAS;AACvB,sBAAkB;AAAA,EACpB,WAAW,YAAY,UAAU;AAC/B,sBAAkB;AAAA,EACpB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,eAAc;AAAA,MACd,aAAa;AAAA,MACb,WAAW,KAAK;AAAA,QACd,qBAAqB,SAAS;AAAA,QAC9B,qBAAqB,SAAS;AAAA,QAC9B,mBAAmB,SAAS;AAAA,MAC9B,GAAG,MAAM,SAAS;AAAA,MAElB,+BAAC,OAAE,WAAW,KAAK,eAAe,GAChC;AAAA;AAAA,UAAC;AAAA;AAAA,YAAK,WAAW,KAAK,EAAE,4BAA4B,mBAAmB,CAAC;AAAA,YAClE,GAAE;AAAA,YAA2D,QAAQ;AAAA,YAAO,iBAAgB;AAAA;AAAA,QAAM;AAAA,QACxG;AAAA,UAAC;AAAA;AAAA,YAAK,WAAW,KAAK,EAAE,+BAA+B,mBAAmB,CAAC;AAAA,YACrE,GAAE;AAAA,YAAmE,QAAQ;AAAA,YAC7E,iBAAgB;AAAA;AAAA,QAAM;AAAA,QAC5B;AAAA,UAAC;AAAA;AAAA,YAAK,WAAW,KAAK,EAAE,8BAA8B,mBAAmB,CAAC;AAAA,YACpE,GAAE;AAAA,YAAkE,QAAQ;AAAA,YAC5E,iBAAgB;AAAA;AAAA,QAAM;AAAA,QAC5B;AAAA,UAAC;AAAA;AAAA,YAAK,WAAW,KAAK,EAAE,iCAAiC,mBAAmB,CAAC;AAAA,YACvE,GAAE;AAAA,YAA+D,QAAQ;AAAA,YACzE,iBAAgB;AAAA;AAAA,QAAM;AAAA,SAC9B;AAAA;AAAA,EACF;AAEJ;;;ACrDA,OAAOA,WAAU;AAgBb,SAaE,OAAAC,MAbF,QAAAC,aAAA;AALG,IAAM,gBAAgB,CAAC;AAAA,EACE,OAAO;AAAA,EACP,GAAG;AACL,MAA0B;AACtD,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAWF;AAAA,QACT;AAAA,QACA;AAAA,UACE,aAAa,SAAS,QAAQ,SAAS;AAAA,UACvC,aAAa,SAAS;AAAA,UACtB,WAAW,SAAS;AAAA,UACpB,mBAAmB,SAAS;AAAA,UAC5B,mBAAmB,SAAS;AAAA,QAC9B;AAAA,QAAG,MAAM;AAAA,MACX;AAAA,MAEA;AAAA,wBAAAC,KAAC,gBAAa,MAAW;AAAA,QAAE;AAAA;AAAA;AAAA,EAE7B;AAEJ;","names":["clsx","jsx","jsxs"]}

package/dist/components/date/DatePicker.d.mts

@@ -4,7 +4,7 @@ import { YearMonthPickerProps } from './YearMonthPicker.mjs';
 import { DayPickerProps } from './DayPicker.mjs';
 import { TimeTranslationType } from '../../localization/defaults/time.mjs';
 import '../../localization/util.mjs';
-import '../../util/date.mjs';
+import '../../utils/date.mjs';
 
 type DatePickerTranslationType = TimeTranslationType;
 type DisplayMode = 'yearMonth' | 'day';

package/dist/components/date/DatePicker.d.ts

@@ -4,7 +4,7 @@ import { YearMonthPickerProps } from './YearMonthPicker.js';
 import { DayPickerProps } from './DayPicker.js';
 import { TimeTranslationType } from '../../localization/defaults/time.js';
 import '../../localization/util.js';
-import '../../util/date.js';
+import '../../utils/date.js';
 
 type DatePickerTranslationType = TimeTranslationType;
 type DisplayMode = 'yearMonth' | 'day';