@helpwave/hightide 0.1.22 → 0.1.23

package/README.md

@@ -24,4 +24,9 @@ npm run generate-barrels
 ```
 
 - Increase the version number in the [package.json](package.json)
+
+```bash
+npm run build
+```
+
 - Update the [CHANGELOG.md](CHANGELOG.md)

package/dist/components/branding/HelpwaveBadge.js

@@ -40,14 +40,16 @@ var import_lucide_react = require("lucide-react");
 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",
+  selectedClassName = "bg-primary/20",
   disabledClassName = "text-disabled-text bg-disabled-background cursor-not-allowed",
   className
 }) => {
@@ -57,7 +59,7 @@ var Tile = ({
       className: (0, import_clsx.default)(
         "flex-row-2 w-full items-center",
         {
-          [normalClassName]: !!onClick && !disabled,
+          [normalClassName]: onClick && !disabled,
           [selectedClassName]: isSelected && !disabled,
           [disabledClassName]: disabled
         },
@@ -67,8 +69,8 @@ var Tile = ({
       children: [
         prefix,
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex-col-0 w-full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { className: (0, import_clsx.default)(title.className ?? "textstyle-title-normal"), children: title.value }),
-          !!description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_clsx.default)(description.className ?? "textstyle-description"), children: description.value })
+          /* @__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)
       ]
@@ -160,7 +162,8 @@ var HelpwaveBadge = ({
     Tile,
     {
       prefix: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Helpwave, { size: iconSize }),
-      title: { value: title, className: size === "small" ? "textstyle-title-lg text-base" : "textstyle-title-xl" },
+      title,
+      titleClassName: size === "small" ? "textstyle-title-lg text-base" : "textstyle-title-xl",
       className: (0, import_clsx3.default)(
         {
           "px-2 py-1 rounded-md": size === "small",

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={{ value: title, className: 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: { value: ReactNode, className?: string },\n  description?: { value: ReactNode, className?: string },\n  onClick?: () => void,\n  disabled?: boolean,\n  isSelected?: 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                       description,\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        <h4 className={clsx(title.className ?? 'textstyle-title-normal')}>{title.value}</h4>\n        {!!description &&\n          <span className={clsx(description.className ?? 'textstyle-description')}>{description.value}</span>}\n      </div>\n      {suffix ?? (isSelected ? (<Check size={24}/>) : undefined)}\n    </div>\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/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"]}

package/dist/components/branding/HelpwaveBadge.mjs

@@ -7,14 +7,16 @@ import { Check } from "lucide-react";
 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",
+  selectedClassName = "bg-primary/20",
   disabledClassName = "text-disabled-text bg-disabled-background cursor-not-allowed",
   className
 }) => {
@@ -24,7 +26,7 @@ var Tile = ({
       className: clsx(
         "flex-row-2 w-full items-center",
         {
-          [normalClassName]: !!onClick && !disabled,
+          [normalClassName]: onClick && !disabled,
           [selectedClassName]: isSelected && !disabled,
           [disabledClassName]: disabled
         },
@@ -34,8 +36,8 @@ var Tile = ({
       children: [
         prefix,
         /* @__PURE__ */ jsxs("div", { className: "flex-col-0 w-full", children: [
-          /* @__PURE__ */ jsx("h4", { className: clsx(title.className ?? "textstyle-title-normal"), children: title.value }),
-          !!description && /* @__PURE__ */ jsx("span", { className: clsx(description.className ?? "textstyle-description"), children: description.value })
+          /* @__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)
       ]
@@ -127,7 +129,8 @@ var HelpwaveBadge = ({
     Tile,
     {
       prefix: /* @__PURE__ */ jsx3(Helpwave, { size: iconSize }),
-      title: { value: title, className: size === "small" ? "textstyle-title-lg text-base" : "textstyle-title-xl" },
+      title,
+      titleClassName: size === "small" ? "textstyle-title-lg text-base" : "textstyle-title-xl",
       className: clsx3(
         {
           "px-2 py-1 rounded-md": size === "small",

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={{ value: title, className: 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: { value: ReactNode, className?: string },\n  description?: { value: ReactNode, className?: string },\n  onClick?: () => void,\n  disabled?: boolean,\n  isSelected?: 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                       description,\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        <h4 className={clsx(title.className ?? 'textstyle-title-normal')}>{title.value}</h4>\n        {!!description &&\n          <span className={clsx(description.className ?? 'textstyle-description')}>{description.value}</span>}\n      </div>\n      {suffix ?? (isSelected ? (<Check size={24}/>) : undefined)}\n    </div>\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":";AAAA,OAAOA,WAAU;;;ACCjB,OAAO,UAAU;AACjB,SAAS,aAAa;AA8ChB,SACE,KADF;AA3BC,IAAM,OAAO,CAAC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB;AACF,MAAiB;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,UACE,CAAC,eAAe,GAAG,CAAC,CAAC,WAAW,CAAC;AAAA,UACjC,CAAC,iBAAiB,GAAG,cAAc,CAAC;AAAA,UACpC,CAAC,iBAAiB,GAAG;AAAA,QACvB;AAAA,QACA;AAAA,MACF;AAAA,MACA,SAAS,WAAW,SAAY;AAAA,MAE/B;AAAA;AAAA,QACD,qBAAC,SAAI,WAAU,qBACb;AAAA,8BAAC,QAAG,WAAW,KAAK,MAAM,aAAa,wBAAwB,GAAI,gBAAM,OAAM;AAAA,UAC9E,CAAC,CAAC,eACD,oBAAC,UAAK,WAAW,KAAK,YAAY,aAAa,uBAAuB,GAAI,sBAAY,OAAM;AAAA,WAChG;AAAA,QACC,WAAW,aAAc,oBAAC,SAAM,MAAM,IAAG,IAAM;AAAA;AAAA;AAAA,EAClD;AAEJ;;;ACvDA,SAAS,QAAAC,aAAY;AAyCf,SACE,OAAAC,MADF,QAAAC,aAAA;AA9BC,IAAM,WAAW,CAAC;AAAA,EACE,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,OAAO;AAAA,EACP,GAAG;AACL,MAAqB;AAC5C,QAAM,qBAAqB,YAAY;AACvC,MAAI,kBAAkB;AAEtB,MAAI,YAAY,SAAS;AACvB,sBAAkB;AAAA,EACpB,WAAW,YAAY,UAAU;AAC/B,sBAAkB;AAAA,EACpB;AAEA,MAAI,OAAO,GAAG;AACZ,YAAQ,MAAM,4BAA4B;AAC1C,WAAO;AAAA,EACT;AAEA,SACE,gBAAAD;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,eAAc;AAAA,MACd,aAAa;AAAA,MACZ,GAAG;AAAA,MAEJ,0BAAAC,MAAC,OAAE,WAAWF,MAAK,eAAe,GAChC;AAAA,wBAAAC;AAAA,UAAC;AAAA;AAAA,YAAK,WAAWD,MAAK,EAAE,4BAA4B,mBAAmB,CAAC;AAAA,YAClE,GAAE;AAAA,YAAkD,QAAQ;AAAA,YAAO,iBAAgB;AAAA;AAAA,QAAM;AAAA,QAC/F,gBAAAC;AAAA,UAAC;AAAA;AAAA,YAAK,WAAWD,MAAK,EAAE,+BAA+B,mBAAmB,CAAC;AAAA,YACrE,GAAE;AAAA,YAAgE,QAAQ;AAAA,YAAO,iBAAgB;AAAA;AAAA,QAAM;AAAA,QAC7G,gBAAAC;AAAA,UAAC;AAAA;AAAA,YAAK,WAAWD,MAAK,EAAE,8BAA8B,mBAAmB,CAAC;AAAA,YACpE,GAAE;AAAA,YAAmE,QAAQ;AAAA,YAC7E,iBAAgB;AAAA;AAAA,QAAM;AAAA,QAC5B,gBAAAC;AAAA,UAAC;AAAA;AAAA,YAAK,WAAWD,MAAK,EAAE,iCAAiC,mBAAmB,CAAC;AAAA,YACvE,GAAE;AAAA,YAAmE,QAAQ;AAAA,YAC7E,iBAAgB;AAAA;AAAA,QAAM;AAAA,SAC9B;AAAA;AAAA,EACF;AAEJ;;;AFhCe,gBAAAG,YAAA;AATR,IAAM,gBAAgB,CAAC;AAAA,EACE,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,YAAY;AACd,MAA0B;AACtD,QAAM,WAAmB,SAAS,UAAU,KAAK;AAEjD,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,QAAS,gBAAAA,KAAC,YAAS,MAAM,UAAS;AAAA,MAClC,OAAO,EAAE,OAAO,OAAO,WAAW,SAAS,UAAU,iCAAiC,qBAAqB;AAAA,MAC3G,WAAWC;AAAA,QACT;AAAA,UACE,wBAAwB,SAAS;AAAA,UACjC,wBAAwB,SAAS;AAAA,QACnC;AAAA,QAAG;AAAA,MACL;AAAA;AAAA,EACF;AAEJ;","names":["clsx","clsx","jsx","jsxs","jsx","clsx"]}
+{"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"]}