@helpwave/hightide 0.1.7 → 0.1.9

package/dist/components/branding/HelpwaveBadge.js

@@ -36,22 +36,44 @@ 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");
 var import_jsx_runtime = require("react/jsx-runtime");
 var Tile = ({
   title,
   description,
+  onClick,
+  isSelected = false,
+  isDisabled = 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)("row gap-x-4 w-full items-center", className), children: [
-    prefix,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "col gap-y-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 })
-    ] }),
-    suffix
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: (0, import_clsx.default)(
+        "row gap-x-2 w-full items-center",
+        {
+          [normalClassName]: !!onClick && !isDisabled,
+          [selectedClassName]: isSelected && !isDisabled,
+          [disabledClassName]: isDisabled
+        },
+        className
+      ),
+      onClick: isDisabled ? void 0 : onClick,
+      children: [
+        prefix ?? (isSelected ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Check, { size: 24 }) : void 0),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "col gap-y-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 })
+        ] }),
+        suffix
+      ]
+    }
+  );
 };
 
 // src/components/icons-and-geometry/Helpwave.tsx

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'\n\nexport type TileProps = {\n  title: { value: string, className?: string },\n  description?: { value: string, className?: string },\n  prefix?: ReactNode,\n  suffix?: ReactNode,\n  className?: 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                       prefix,\n                       suffix,\n                       className\n                     }: TileProps) => {\n  return (\n    <div className={clsx('row gap-x-4 w-full items-center', className)}>\n      {prefix}\n      <div className=\"col gap-y-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}\n    </div>\n  )\n}\n\ntype ImageLocation = 'prefix' | 'suffix'\ntype ImageSize = {\n  width: number,\n  height: number,\n}\n\nexport type TileWithImageProps = Omit<TileProps, 'suffix' | 'prefix'> & {\n  url: string,\n  imageLocation?: ImageLocation,\n  imageSize?: ImageSize,\n  imageClassName?: string,\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;AAAA;AAAA;AAAA;AAAA;AAAA,IAAAA,eAAiB;;;ACCjB,kBAAiB;AAuBX;AAVC,IAAM,OAAO,CAAC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAiB;AACpC,SACE,6CAAC,SAAI,eAAW,YAAAC,SAAK,mCAAmC,SAAS,GAC9D;AAAA;AAAA,IACD,6CAAC,SAAI,WAAU,sBACb;AAAA,kDAAC,QAAG,eAAW,YAAAA,SAAK,MAAM,aAAa,wBAAwB,GAAI,gBAAM,OAAM;AAAA,MAC9E,CAAC,CAAC,eACD,4CAAC,UAAK,eAAW,YAAAA,SAAK,YAAY,aAAa,uBAAuB,GAAI,sBAAY,OAAM;AAAA,OAChG;AAAA,IACC;AAAA,KACH;AAEJ;;;AC/BA,IAAAC,eAAqB;AAyCf,IAAAC,sBAAA;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;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,wDAAC,OAAE,eAAW,mBAAK,eAAe,GAChC;AAAA;AAAA,UAAC;AAAA;AAAA,YAAK,eAAW,mBAAK,EAAE,4BAA4B,mBAAmB,CAAC;AAAA,YAClE,GAAE;AAAA,YAAkD,QAAQ;AAAA,YAAO,iBAAgB;AAAA;AAAA,QAAM;AAAA,QAC/F;AAAA,UAAC;AAAA;AAAA,YAAK,eAAW,mBAAK,EAAE,+BAA+B,mBAAmB,CAAC;AAAA,YACrE,GAAE;AAAA,YAAgE,QAAQ;AAAA,YAAO,iBAAgB;AAAA;AAAA,QAAM;AAAA,QAC7G;AAAA,UAAC;AAAA;AAAA,YAAK,eAAW,mBAAK,EAAE,8BAA8B,mBAAmB,CAAC;AAAA,YACpE,GAAE;AAAA,YAAmE,QAAQ;AAAA,YAC7E,iBAAgB;AAAA;AAAA,QAAM;AAAA,QAC5B;AAAA,UAAC;AAAA;AAAA,YAAK,eAAW,mBAAK,EAAE,iCAAiC,mBAAmB,CAAC;AAAA,YACvE,GAAE;AAAA,YAAmE,QAAQ;AAAA,YAC7E,iBAAgB;AAAA;AAAA,QAAM;AAAA,SAC9B;AAAA;AAAA,EACF;AAEJ;;;AFhCe,IAAAC,sBAAA;AATR,IAAM,gBAAgB,CAAC;AAAA,EACE,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,YAAY;AACd,MAA0B;AACtD,QAAM,WAAmB,SAAS,UAAU,KAAK;AAEjD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAS,6CAAC,YAAS,MAAM,UAAS;AAAA,MAClC,OAAO,EAAE,OAAO,OAAO,WAAW,SAAS,UAAU,iCAAiC,qBAAqB;AAAA,MAC3G,eAAW,aAAAC;AAAA,QACT;AAAA,UACE,wBAAwB,SAAS;AAAA,UACjC,wBAAwB,SAAS;AAAA,QACnC;AAAA,QAAG;AAAA,MACL;AAAA;AAAA,EACF;AAEJ;","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={{ 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  isDisabled?: 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                       isDisabled = 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        'row gap-x-2 w-full items-center',\n        {\n          [normalClassName]: !!onClick && !isDisabled,\n          [selectedClassName]: isSelected && !isDisabled,\n          [disabledClassName]: isDisabled,\n        },\n        className\n      )}\n      onClick={isDisabled ? undefined : onClick}\n    >\n      {prefix ?? (isSelected ? (<Check size={24}/>) : undefined)}\n      <div className=\"col gap-y-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}\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"]}

package/dist/components/branding/HelpwaveBadge.mjs

@@ -3,22 +3,44 @@ import clsx3 from "clsx";
 
 // src/components/layout-and-navigation/Tile.tsx
 import clsx from "clsx";
+import { Check } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var Tile = ({
   title,
   description,
+  onClick,
+  isSelected = false,
+  isDisabled = 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("row gap-x-4 w-full items-center", className), children: [
-    prefix,
-    /* @__PURE__ */ jsxs("div", { className: "col gap-y-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 })
-    ] }),
-    suffix
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        "row gap-x-2 w-full items-center",
+        {
+          [normalClassName]: !!onClick && !isDisabled,
+          [selectedClassName]: isSelected && !isDisabled,
+          [disabledClassName]: isDisabled
+        },
+        className
+      ),
+      onClick: isDisabled ? void 0 : onClick,
+      children: [
+        prefix ?? (isSelected ? /* @__PURE__ */ jsx(Check, { size: 24 }) : void 0),
+        /* @__PURE__ */ jsxs("div", { className: "col gap-y-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 })
+        ] }),
+        suffix
+      ]
+    }
+  );
 };
 
 // src/components/icons-and-geometry/Helpwave.tsx

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'\n\nexport type TileProps = {\n  title: { value: string, className?: string },\n  description?: { value: string, className?: string },\n  prefix?: ReactNode,\n  suffix?: ReactNode,\n  className?: 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                       prefix,\n                       suffix,\n                       className\n                     }: TileProps) => {\n  return (\n    <div className={clsx('row gap-x-4 w-full items-center', className)}>\n      {prefix}\n      <div className=\"col gap-y-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}\n    </div>\n  )\n}\n\ntype ImageLocation = 'prefix' | 'suffix'\ntype ImageSize = {\n  width: number,\n  height: number,\n}\n\nexport type TileWithImageProps = Omit<TileProps, 'suffix' | 'prefix'> & {\n  url: string,\n  imageLocation?: ImageLocation,\n  imageSize?: ImageSize,\n  imageClassName?: string,\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;AAuBX,SACE,KADF;AAVC,IAAM,OAAO,CAAC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAiB;AACpC,SACE,qBAAC,SAAI,WAAW,KAAK,mCAAmC,SAAS,GAC9D;AAAA;AAAA,IACD,qBAAC,SAAI,WAAU,sBACb;AAAA,0BAAC,QAAG,WAAW,KAAK,MAAM,aAAa,wBAAwB,GAAI,gBAAM,OAAM;AAAA,MAC9E,CAAC,CAAC,eACD,oBAAC,UAAK,WAAW,KAAK,YAAY,aAAa,uBAAuB,GAAI,sBAAY,OAAM;AAAA,OAChG;AAAA,IACC;AAAA,KACH;AAEJ;;;AC/BA,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={{ 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  isDisabled?: 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                       isDisabled = 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        'row gap-x-2 w-full items-center',\n        {\n          [normalClassName]: !!onClick && !isDisabled,\n          [selectedClassName]: isSelected && !isDisabled,\n          [disabledClassName]: isDisabled,\n        },\n        className\n      )}\n      onClick={isDisabled ? undefined : onClick}\n    >\n      {prefix ?? (isSelected ? (<Check size={24}/>) : undefined)}\n      <div className=\"col gap-y-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}\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":["clsx","clsx","jsx","jsxs","jsx","clsx"]}

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

@@ -2,12 +2,11 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { PropsForTranslation } from '../../localization/useTranslation.mjs';
 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';
 
-type DatePickerTranslation = {
-    today: string;
-};
+type DatePickerTranslationType = TimeTranslationType;
 type DisplayMode = 'yearMonth' | 'day';
 type DatePickerProps = {
     value?: Date;
@@ -22,7 +21,7 @@ type DatePickerProps = {
 /**
  * A Component for picking a date
  */
-declare const DatePicker: ({ overwriteTranslation, value, start, end, initialDisplay, onChange, yearMonthPickerProps, dayPickerProps, className }: PropsForTranslation<DatePickerTranslation, DatePickerProps>) => react_jsx_runtime.JSX.Element;
+declare const DatePicker: ({ overwriteTranslation, value, start, end, initialDisplay, onChange, yearMonthPickerProps, dayPickerProps, className }: PropsForTranslation<DatePickerTranslationType, DatePickerProps>) => react_jsx_runtime.JSX.Element;
 /**
  * Example for the Date Picker
  */

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

@@ -2,12 +2,11 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { PropsForTranslation } from '../../localization/useTranslation.js';
 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';
 
-type DatePickerTranslation = {
-    today: string;
-};
+type DatePickerTranslationType = TimeTranslationType;
 type DisplayMode = 'yearMonth' | 'day';
 type DatePickerProps = {
     value?: Date;
@@ -22,7 +21,7 @@ type DatePickerProps = {
 /**
  * A Component for picking a date
  */
-declare const DatePicker: ({ overwriteTranslation, value, start, end, initialDisplay, onChange, yearMonthPickerProps, dayPickerProps, className }: PropsForTranslation<DatePickerTranslation, DatePickerProps>) => react_jsx_runtime.JSX.Element;
+declare const DatePicker: ({ overwriteTranslation, value, start, end, initialDisplay, onChange, yearMonthPickerProps, dayPickerProps, className }: PropsForTranslation<DatePickerTranslationType, DatePickerProps>) => react_jsx_runtime.JSX.Element;
 /**
  * Example for the Date Picker
  */

package/dist/components/date/DatePicker.js

@@ -72,15 +72,55 @@ var useLocale = (overWriteLanguage) => {
 };
 
 // src/localization/useTranslation.ts
-var useTranslation = (defaults, translationOverwrite = {}) => {
-  const { language: languageProp, translation: overwrite } = translationOverwrite;
+var useTranslation = (translations, overwriteTranslation = {}) => {
+  const { language: languageProp, translation: overwrite } = overwriteTranslation;
   const { language: inferredLanguage } = useLanguage();
   const usedLanguage = languageProp ?? inferredLanguage;
-  let defaultValues = defaults[usedLanguage];
-  if (overwrite && overwrite[usedLanguage]) {
-    defaultValues = { ...defaultValues, ...overwrite[usedLanguage] };
+  const usedTranslations = [...translations];
+  if (overwrite) {
+    usedTranslations.push(overwrite);
   }
-  return defaultValues;
+  return (key, options) => {
+    const { count, replacements } = { ...{ count: 0, replacements: {} }, ...options };
+    try {
+      for (let i = translations.length - 1; i >= 0; i--) {
+        const translation = translations[i];
+        const localizedTranslation = translation[usedLanguage];
+        if (!localizedTranslation) {
+          continue;
+        }
+        const value = localizedTranslation[key];
+        if (!value) {
+          continue;
+        }
+        let forProcessing;
+        if (typeof value !== "string") {
+          if (count <= 0 && value?.zero) {
+            forProcessing = value.zero;
+          } else if (count === 1 && value?.one) {
+            forProcessing = value.one;
+          } else if (count === 2 && value?.two) {
+            forProcessing = value.two;
+          } else if (count <= 10 && value?.few) {
+            forProcessing = value.few;
+          } else if (count > 10 && value?.many) {
+            forProcessing = value.many;
+          } else {
+            forProcessing = value.other;
+          }
+        } else {
+          forProcessing = value;
+        }
+        forProcessing = forProcessing.replace(/\{\{(\w+)}}/g, (_, placeholder) => {
+          return replacements[placeholder] ?? `{{${placeholder}}}`;
+        });
+        return forProcessing;
+      }
+    } catch (e) {
+      console.error(e);
+    }
+    return `{{${usedLanguage}:${key}}}`;
+  };
 };
 
 // src/util/noop.ts
@@ -369,8 +409,9 @@ var Expandable = (0, import_react3.forwardRef)(function Expandable2({
   onChange = noop,
   clickOnlyOnHeader = true,
   disabled = false,
-  className = "",
-  headerClassName = ""
+  className,
+  headerClassName,
+  contentClassName
 }, ref) {
   icon ??= DefaultIcon;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
@@ -399,7 +440,7 @@ var Expandable = (0, import_react3.forwardRef)(function Expandable2({
             ]
           }
         ),
-        isExpanded && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "col px-4 pb-2", children })
+        isExpanded && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: (0, import_clsx2.default)("col px-4 pb-2", contentClassName), children })
       ]
     }
   );
@@ -464,7 +505,8 @@ var YearMonthPicker = ({
         ref: (displayedYearMonth.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear()) === year ? ref : void 0,
         label: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: (0, import_clsx3.default)({ "text-primary font-bold": selectedYear }), children: year }),
         isExpanded: showValueOpen && selectedYear,
-        children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "row", children: monthList.map((month) => {
+        contentClassName: "gap-y-1",
+        children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "row gap-x-1", children: monthList.map((month) => {
           const monthIndex = monthsList.indexOf(month);
           const newDate = new Date(year, monthIndex);
           const selectedMonth = selectedYear && monthIndex === displayedYearMonth.getMonth();
@@ -474,17 +516,12 @@ var YearMonthPicker = ({
           const isBeforeEnd = end === void 0 || firstOfMonth <= end;
           const isValid = isAfterStart && isBeforeEnd;
           return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            "button",
+            SolidButton,
             {
               disabled: !isValid,
-              className: (0, import_clsx3.default)(
-                "chip hover:brightness-95 flex-1",
-                {
-                  "bg-gray-50 text-black": !selectedMonth && isValid,
-                  "bg-primary text-on-primary": selectedMonth && isValid,
-                  "bg-disabled-background text-disabled-text": !isValid
-                }
-              ),
+              color: selectedMonth && isValid ? "primary" : "neutral",
+              className: "flex-1",
+              size: "small",
               onClick: () => {
                 onChange(newDate);
               },
@@ -528,14 +565,15 @@ var DayPicker = ({
         {
           disabled: !isDayValid,
           className: (0, import_clsx4.default)(
-            "flex-1 rounded-full border-2 border-transparent shadow-sm",
+            "flex-1 rounded-full border-2",
             {
-              "text-gray-700 bg-gray-100": !isSameMonth && isDayValid,
-              "text-black bg-white": !isSelected && isSameMonth && isDayValid,
-              "text-on-primary bg-primary": isSelected,
-              "border-black": isToday && markToday,
-              "hover:brightness-90 hover:bg-primary hover:text-on-primary": isDayValid,
-              "text-disabled-text bg-disabled-background": !isDayValid
+              "text-description": !isSameMonth && !isSelected && isDayValid,
+              "text-button-solid-neutral-text bg-button-solid-neutral-background": !isSelected && isSameMonth && isDayValid,
+              "text-button-solid-primary-text bg-button-solid-primary-background": isSelected && isDayValid,
+              "hover:brightness-90 hover:bg-button-solid-primary-background hover:text-button-solid-primary-text": isDayValid,
+              "text-disabled-text bg-disabled-background cursor-not-allowed": !isDayValid,
+              "border-secondary": isToday && markToday,
+              "border-transparent": !isToday || !markToday
             }
           ),
           onClick: () => onChange(date),
@@ -547,16 +585,80 @@ var DayPicker = ({
   ] });
 };
 
-// src/components/date/DatePicker.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var defaultDatePickerTranslation = {
+// src/localization/defaults/time.ts
+var monthTranslation = {
+  en: {
+    january: "January",
+    february: "Febuary",
+    march: "March",
+    april: "April",
+    may: "May",
+    june: "June",
+    july: "July",
+    august: "August",
+    september: "September",
+    october: "October",
+    november: "November",
+    december: "December"
+  },
+  de: {
+    january: "Januar",
+    february: "Febuar",
+    march: "M\xE4rz",
+    april: "April",
+    may: "Mai",
+    june: "Juni",
+    july: "Juli",
+    august: "August",
+    september: "September",
+    october: "October",
+    november: "November",
+    december: "December"
+  }
+};
+var timeTranslation = {
   en: {
-    today: "Today"
+    ...monthTranslation.en,
+    century: { one: "Century", other: "Centuries" },
+    decade: { one: "Decade", other: "Decades" },
+    year: { one: "Year", other: "Years" },
+    month: { one: "Month", other: "Months" },
+    day: { one: "Day", other: "Days" },
+    hour: { one: "Hour", other: "Hours" },
+    minute: { one: "Minute", other: "Minutes" },
+    second: { one: "Second", other: "Seconds" },
+    millisecond: { one: "Millisecond", other: "Milliseconds" },
+    microsecond: { one: "Microsecond", other: "Microseconds" },
+    nanosecond: { one: "Nanosecond", other: "Nanoseconds" },
+    yesterday: "Yesterday",
+    today: "Today",
+    tomorrow: "Tomorrow",
+    in: "in",
+    ago: "ago"
   },
   de: {
-    today: "Heute"
+    ...monthTranslation.de,
+    century: { one: "Jahrhundert", other: "Jahrhunderte" },
+    decade: { one: "Jahrzehnt", other: "Jahrzehnte" },
+    year: { one: "Jahr", other: "Jahre" },
+    month: { one: "Monat", other: "Monate" },
+    day: { one: "Tag", other: "Tage" },
+    hour: { one: "Stunde", other: "Stunden" },
+    minute: { one: "Minute", other: "Minuten" },
+    second: { one: "Sekunde", other: "Sekunden" },
+    millisecond: { one: "Millisekunde", other: "Millisekunden" },
+    microsecond: { one: "Mikrosekunde", other: "Mikrosekunden" },
+    nanosecond: { one: "Nanosekunde", other: "Nanosekunden" },
+    yesterday: "Gestern",
+    today: "Heute",
+    tomorrow: "Morgen",
+    in: "in",
+    ago: "vor"
   }
 };
+
+// src/components/date/DatePicker.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var DatePicker = ({
   overwriteTranslation,
   value = /* @__PURE__ */ new Date(),
@@ -569,7 +671,7 @@ var DatePicker = ({
   className = ""
 }) => {
   const locale = useLocale();
-  const translation = useTranslation(defaultDatePickerTranslation, overwriteTranslation);
+  const translation = useTranslation([timeTranslation], overwriteTranslation);
   const [displayedMonth, setDisplayedMonth] = (0, import_react6.useState)(value);
   const [displayMode, setDisplayMode] = (0, import_react6.useState)(initialDisplay);
   (0, import_react6.useEffect)(() => {
@@ -652,7 +754,7 @@ var DatePicker = ({
             newDate.setHours(value.getHours(), value.getMinutes());
             onChange(newDate);
           },
-          children: translation.today
+          children: translation("today")
         }
       ) })
     ] })