npm - @helpwave/hightide - Versions diffs - 0.1.22 → 0.1.23 - Mend

@helpwave/hightide 0.1.22 → 0.1.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (102) hide show

package/dist/components/layout-and-navigation/Chip.js CHANGED Viewed

@@ -71,7 +71,7 @@ var Chip = ({
     {
       ...restProps,
       className: (0, import_clsx.default)(
-        `row w-fit px-2 py-1`,
+        `row w-fit px-2 py-1 font-semibold`,
         colorMapping,
         {
           "rounded-md": variant === "normal",
@@ -94,7 +94,7 @@ var ChipList = ({
     Chip,
     {
       ...value,
-      color: value.color ?? "dark",
+      color: value.color ?? "default",
       variant: value.variant ?? "normal",
       children: value.children
     },

package/dist/components/layout-and-navigation/Chip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/layout-and-navigation/Chip.tsx"],"sourcesContent":["import type { HTMLProps, PropsWithChildren, ReactNode } from 'react'\nimport clsx from 'clsx'\n\nconst chipColors = ['default', 'dark', 'red', 'yellow', 'green', 'blue', 'pink'] as const\nexport type ChipColor = typeof chipColors[number]\n\ntype ChipVariant = 'normal' \| 'fullyRounded'\n\nexport const ChipUtil = {\n colors: chipColors,\n}\n\nexport type ChipProps = HTMLProps<HTMLDivElement> & PropsWithChildren<{\n color?: ChipColor,\n variant?: ChipVariant,\n trailingIcon?: ReactNode,\n}>\n\n/*\n A component for displaying a single chip\n /\nexport const Chip = ({\n children,\n trailingIcon,\n color = 'default',\n variant = 'normal',\n className = '',\n ...restProps\n }: ChipProps) => {\n const colorMapping: string = {\n default: 'text-tag-default-text bg-tag-default-background',\n dark: 'text-tag-dark-text bg-tag-dark-background',\n red: 'text-tag-red-text bg-tag-red-background',\n yellow: 'text-tag-yellow-text bg-tag-yellow-background',\n green: 'text-tag-green-text bg-tag-green-background',\n blue: 'text-tag-blue-text bg-tag-blue-background',\n pink: 'text-tag-pink-text bg-tag-pink-background',\n }[color]\n\n const colorMappingIcon: string = {\n default: 'text-tag-default-icon',\n dark: 'text-tag-dark-icon',\n red: 'text-tag-red-icon',\n yellow: 'text-tag-yellow-icon',\n green: 'text-tag-green-icon',\n blue: 'text-tag-blue-icon',\n pink: 'text-tag-pink-icon',\n }[color]\n\n return (\n <div\n {...restProps}\n className={clsx(\n `row w-fit px-2 py-1`,\n colorMapping,\n {\n 'rounded-md': variant === 'normal',\n 'rounded-full': variant === 'fullyRounded',\n },\n className\n )}\n >\n {children}\n {trailingIcon && (<span className={colorMappingIcon}>{trailingIcon}</span>)}\n </div>\n )\n}\n\nexport type ChipListProps = {\n list: ChipProps[],\n className?: string,\n}\n\n/\n A component for displaying a list of chips\n */\nexport const ChipList = ({\n list,\n className = ''\n }: ChipListProps) => {\n return (\n <div className={clsx('flex flex-wrap gap-x-2 gap-y-2', className)}>\n {list.map((value, index) => (\n <Chip\n key={index}\n {...value}\n color={value.color ?? '~~dark~~'}\n variant={value.variant ?? 'normal'}\n >\n {value.children}\n </Chip>\n ))}\n </div>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,kBAAiB;AAiDb;AA/CJ,IAAM,aAAa,CAAC,WAAW,QAAQ,OAAO,UAAU,SAAS,QAAQ,MAAM;AAKxE,IAAM,WAAW;AAAA,EACtB,QAAQ;AACV;AAWO,IAAM,OAAO,CAAC;AAAA,EACE;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,GAAG;AACL,MAAiB;AACpC,QAAM,eAAuB;AAAA,IAC3B,SAAS;AAAA,IACT,MAAM;AAAA,IACN,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,EACR,EAAE,KAAK;AAEP,QAAM,mBAA2B;AAAA,IAC/B,SAAS;AAAA,IACT,MAAM;AAAA,IACN,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,EACR,EAAE,KAAK;AAEP,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,YAAAA;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,UACE,cAAc,YAAY;AAAA,UAC1B,gBAAgB,YAAY;AAAA,QAC9B;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,QACA,gBAAiB,4CAAC,UAAK,WAAW,kBAAmB,wBAAa;AAAA;AAAA;AAAA,EACrE;AAEJ;AAUO,IAAM,WAAW,CAAC;AAAA,EACE;AAAA,EACA,YAAY;AACd,MAAqB;AAC5C,SACE,4CAAC,SAAI,eAAW,YAAAA,SAAK,kCAAkC,SAAS,GAC7D,eAAK,IAAI,CAAC,OAAO,UAChB;AAAA,IAAC;AAAA;AAAA,MAEE,GAAG;AAAA,MACJ,OAAO,MAAM,SAAS;AAAA,MACtB,SAAS,MAAM,WAAW;AAAA,MAEzB,gBAAM;AAAA;AAAA,IALF;AAAA,EAMP,CACD,GACH;AAEJ;","names":["clsx"]}
1	+ {"version":3,"sources":["../../../src/components/layout-and-navigation/Chip.tsx"],"sourcesContent":["import type { HTMLProps, PropsWithChildren, ReactNode } from 'react'\nimport clsx from 'clsx'\n\nconst chipColors = ['default', 'dark', 'red', 'yellow', 'green', 'blue', 'pink'] as const\nexport type ChipColor = typeof chipColors[number]\n\ntype ChipVariant = 'normal' \| 'fullyRounded'\n\nexport const ChipUtil = {\n colors: chipColors,\n}\n\nexport type ChipProps = HTMLProps<HTMLDivElement> & PropsWithChildren<{\n color?: ChipColor,\n variant?: ChipVariant,\n trailingIcon?: ReactNode,\n}>\n\n/*\n A component for displaying a single chip\n /\nexport const Chip = ({\n children,\n trailingIcon,\n color = 'default',\n variant = 'normal',\n className = '',\n ...restProps\n }: ChipProps) => {\n const colorMapping: string = {\n default: 'text-tag-default-text bg-tag-default-background',\n dark: 'text-tag-dark-text bg-tag-dark-background',\n red: 'text-tag-red-text bg-tag-red-background',\n yellow: 'text-tag-yellow-text bg-tag-yellow-background',\n green: 'text-tag-green-text bg-tag-green-background',\n blue: 'text-tag-blue-text bg-tag-blue-background',\n pink: 'text-tag-pink-text bg-tag-pink-background',\n }[color]\n\n const colorMappingIcon: string = {\n default: 'text-tag-default-icon',\n dark: 'text-tag-dark-icon',\n red: 'text-tag-red-icon',\n yellow: 'text-tag-yellow-icon',\n green: 'text-tag-green-icon',\n blue: 'text-tag-blue-icon',\n pink: 'text-tag-pink-icon',\n }[color]\n\n return (\n <div\n {...restProps}\n className={clsx(\n `row w-fit px-2 py-1 font-semibold`,\n colorMapping,\n {\n 'rounded-md': variant === 'normal',\n 'rounded-full': variant === 'fullyRounded',\n },\n className\n )}\n >\n {children}\n {trailingIcon && (<span className={colorMappingIcon}>{trailingIcon}</span>)}\n </div>\n )\n}\n\nexport type ChipListProps = {\n list: ChipProps[],\n className?: string,\n}\n\n/\n A component for displaying a list of chips\n */\nexport const ChipList = ({\n list,\n className = ''\n }: ChipListProps) => {\n return (\n <div className={clsx('flex flex-wrap gap-x-2 gap-y-2', className)}>\n {list.map((value, index) => (\n <Chip\n key={index}\n {...value}\n color={value.color ?? 'default'}\n variant={value.variant ?? 'normal'}\n >\n {value.children}\n </Chip>\n ))}\n </div>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,kBAAiB;AAiDb;AA/CJ,IAAM,aAAa,CAAC,WAAW,QAAQ,OAAO,UAAU,SAAS,QAAQ,MAAM;AAKxE,IAAM,WAAW;AAAA,EACtB,QAAQ;AACV;AAWO,IAAM,OAAO,CAAC;AAAA,EACE;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,GAAG;AACL,MAAiB;AACpC,QAAM,eAAuB;AAAA,IAC3B,SAAS;AAAA,IACT,MAAM;AAAA,IACN,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,EACR,EAAE,KAAK;AAEP,QAAM,mBAA2B;AAAA,IAC/B,SAAS;AAAA,IACT,MAAM;AAAA,IACN,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,EACR,EAAE,KAAK;AAEP,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,YAAAA;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,UACE,cAAc,YAAY;AAAA,UAC1B,gBAAgB,YAAY;AAAA,QAC9B;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,QACA,gBAAiB,4CAAC,UAAK,WAAW,kBAAmB,wBAAa;AAAA;AAAA;AAAA,EACrE;AAEJ;AAUO,IAAM,WAAW,CAAC;AAAA,EACE;AAAA,EACA,YAAY;AACd,MAAqB;AAC5C,SACE,4CAAC,SAAI,eAAW,YAAAA,SAAK,kCAAkC,SAAS,GAC7D,eAAK,IAAI,CAAC,OAAO,UAChB;AAAA,IAAC;AAAA;AAAA,MAEE,GAAG;AAAA,MACJ,OAAO,MAAM,SAAS;AAAA,MACtB,SAAS,MAAM,WAAW;AAAA,MAEzB,gBAAM;AAAA;AAAA,IALF;AAAA,EAMP,CACD,GACH;AAEJ;","names":["clsx"]}

package/dist/components/layout-and-navigation/Chip.mjs CHANGED Viewed

@@ -36,7 +36,7 @@ var Chip = ({
     {
       ...restProps,
       className: clsx(
-        `row w-fit px-2 py-1`,
+        `row w-fit px-2 py-1 font-semibold`,
         colorMapping,
         {
           "rounded-md": variant === "normal",
@@ -59,7 +59,7 @@ var ChipList = ({
     Chip,
     {
       ...value,
-      color: value.color ?? "dark",
+      color: value.color ?? "default",
       variant: value.variant ?? "normal",
       children: value.children
     },

package/dist/components/layout-and-navigation/Chip.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/layout-and-navigation/Chip.tsx"],"sourcesContent":["import type { HTMLProps, PropsWithChildren, ReactNode } from 'react'\nimport clsx from 'clsx'\n\nconst chipColors = ['default', 'dark', 'red', 'yellow', 'green', 'blue', 'pink'] as const\nexport type ChipColor = typeof chipColors[number]\n\ntype ChipVariant = 'normal' \| 'fullyRounded'\n\nexport const ChipUtil = {\n colors: chipColors,\n}\n\nexport type ChipProps = HTMLProps<HTMLDivElement> & PropsWithChildren<{\n color?: ChipColor,\n variant?: ChipVariant,\n trailingIcon?: ReactNode,\n}>\n\n/*\n A component for displaying a single chip\n /\nexport const Chip = ({\n children,\n trailingIcon,\n color = 'default',\n variant = 'normal',\n className = '',\n ...restProps\n }: ChipProps) => {\n const colorMapping: string = {\n default: 'text-tag-default-text bg-tag-default-background',\n dark: 'text-tag-dark-text bg-tag-dark-background',\n red: 'text-tag-red-text bg-tag-red-background',\n yellow: 'text-tag-yellow-text bg-tag-yellow-background',\n green: 'text-tag-green-text bg-tag-green-background',\n blue: 'text-tag-blue-text bg-tag-blue-background',\n pink: 'text-tag-pink-text bg-tag-pink-background',\n }[color]\n\n const colorMappingIcon: string = {\n default: 'text-tag-default-icon',\n dark: 'text-tag-dark-icon',\n red: 'text-tag-red-icon',\n yellow: 'text-tag-yellow-icon',\n green: 'text-tag-green-icon',\n blue: 'text-tag-blue-icon',\n pink: 'text-tag-pink-icon',\n }[color]\n\n return (\n <div\n {...restProps}\n className={clsx(\n `row w-fit px-2 py-1`,\n colorMapping,\n {\n 'rounded-md': variant === 'normal',\n 'rounded-full': variant === 'fullyRounded',\n },\n className\n )}\n >\n {children}\n {trailingIcon && (<span className={colorMappingIcon}>{trailingIcon}</span>)}\n </div>\n )\n}\n\nexport type ChipListProps = {\n list: ChipProps[],\n className?: string,\n}\n\n/\n A component for displaying a list of chips\n */\nexport const ChipList = ({\n list,\n className = ''\n }: ChipListProps) => {\n return (\n <div className={clsx('flex flex-wrap gap-x-2 gap-y-2', className)}>\n {list.map((value, index) => (\n <Chip\n key={index}\n {...value}\n color={value.color ?? '~~dark~~'}\n variant={value.variant ?? 'normal'}\n >\n {value.children}\n </Chip>\n ))}\n </div>\n )\n}\n"],"mappings":";AACA,OAAO,UAAU;AAiDb,SAaoB,KAbpB;AA/CJ,IAAM,aAAa,CAAC,WAAW,QAAQ,OAAO,UAAU,SAAS,QAAQ,MAAM;AAKxE,IAAM,WAAW;AAAA,EACtB,QAAQ;AACV;AAWO,IAAM,OAAO,CAAC;AAAA,EACE;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,GAAG;AACL,MAAiB;AACpC,QAAM,eAAuB;AAAA,IAC3B,SAAS;AAAA,IACT,MAAM;AAAA,IACN,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,EACR,EAAE,KAAK;AAEP,QAAM,mBAA2B;AAAA,IAC/B,SAAS;AAAA,IACT,MAAM;AAAA,IACN,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,EACR,EAAE,KAAK;AAEP,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,UACE,cAAc,YAAY;AAAA,UAC1B,gBAAgB,YAAY;AAAA,QAC9B;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,QACA,gBAAiB,oBAAC,UAAK,WAAW,kBAAmB,wBAAa;AAAA;AAAA;AAAA,EACrE;AAEJ;AAUO,IAAM,WAAW,CAAC;AAAA,EACE;AAAA,EACA,YAAY;AACd,MAAqB;AAC5C,SACE,oBAAC,SAAI,WAAW,KAAK,kCAAkC,SAAS,GAC7D,eAAK,IAAI,CAAC,OAAO,UAChB;AAAA,IAAC;AAAA;AAAA,MAEE,GAAG;AAAA,MACJ,OAAO,MAAM,SAAS;AAAA,MACtB,SAAS,MAAM,WAAW;AAAA,MAEzB,gBAAM;AAAA;AAAA,IALF;AAAA,EAMP,CACD,GACH;AAEJ;","names":[]}
1	+ {"version":3,"sources":["../../../src/components/layout-and-navigation/Chip.tsx"],"sourcesContent":["import type { HTMLProps, PropsWithChildren, ReactNode } from 'react'\nimport clsx from 'clsx'\n\nconst chipColors = ['default', 'dark', 'red', 'yellow', 'green', 'blue', 'pink'] as const\nexport type ChipColor = typeof chipColors[number]\n\ntype ChipVariant = 'normal' \| 'fullyRounded'\n\nexport const ChipUtil = {\n colors: chipColors,\n}\n\nexport type ChipProps = HTMLProps<HTMLDivElement> & PropsWithChildren<{\n color?: ChipColor,\n variant?: ChipVariant,\n trailingIcon?: ReactNode,\n}>\n\n/*\n A component for displaying a single chip\n /\nexport const Chip = ({\n children,\n trailingIcon,\n color = 'default',\n variant = 'normal',\n className = '',\n ...restProps\n }: ChipProps) => {\n const colorMapping: string = {\n default: 'text-tag-default-text bg-tag-default-background',\n dark: 'text-tag-dark-text bg-tag-dark-background',\n red: 'text-tag-red-text bg-tag-red-background',\n yellow: 'text-tag-yellow-text bg-tag-yellow-background',\n green: 'text-tag-green-text bg-tag-green-background',\n blue: 'text-tag-blue-text bg-tag-blue-background',\n pink: 'text-tag-pink-text bg-tag-pink-background',\n }[color]\n\n const colorMappingIcon: string = {\n default: 'text-tag-default-icon',\n dark: 'text-tag-dark-icon',\n red: 'text-tag-red-icon',\n yellow: 'text-tag-yellow-icon',\n green: 'text-tag-green-icon',\n blue: 'text-tag-blue-icon',\n pink: 'text-tag-pink-icon',\n }[color]\n\n return (\n <div\n {...restProps}\n className={clsx(\n `row w-fit px-2 py-1 font-semibold`,\n colorMapping,\n {\n 'rounded-md': variant === 'normal',\n 'rounded-full': variant === 'fullyRounded',\n },\n className\n )}\n >\n {children}\n {trailingIcon && (<span className={colorMappingIcon}>{trailingIcon}</span>)}\n </div>\n )\n}\n\nexport type ChipListProps = {\n list: ChipProps[],\n className?: string,\n}\n\n/\n A component for displaying a list of chips\n */\nexport const ChipList = ({\n list,\n className = ''\n }: ChipListProps) => {\n return (\n <div className={clsx('flex flex-wrap gap-x-2 gap-y-2', className)}>\n {list.map((value, index) => (\n <Chip\n key={index}\n {...value}\n color={value.color ?? 'default'}\n variant={value.variant ?? 'normal'}\n >\n {value.children}\n </Chip>\n ))}\n </div>\n )\n}\n"],"mappings":";AACA,OAAO,UAAU;AAiDb,SAaoB,KAbpB;AA/CJ,IAAM,aAAa,CAAC,WAAW,QAAQ,OAAO,UAAU,SAAS,QAAQ,MAAM;AAKxE,IAAM,WAAW;AAAA,EACtB,QAAQ;AACV;AAWO,IAAM,OAAO,CAAC;AAAA,EACE;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,GAAG;AACL,MAAiB;AACpC,QAAM,eAAuB;AAAA,IAC3B,SAAS;AAAA,IACT,MAAM;AAAA,IACN,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,EACR,EAAE,KAAK;AAEP,QAAM,mBAA2B;AAAA,IAC/B,SAAS;AAAA,IACT,MAAM;AAAA,IACN,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,EACR,EAAE,KAAK;AAEP,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,UACE,cAAc,YAAY;AAAA,UAC1B,gBAAgB,YAAY;AAAA,QAC9B;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,QACA,gBAAiB,oBAAC,UAAK,WAAW,kBAAmB,wBAAa;AAAA;AAAA;AAAA,EACrE;AAEJ;AAUO,IAAM,WAAW,CAAC;AAAA,EACE;AAAA,EACA,YAAY;AACd,MAAqB;AAC5C,SACE,oBAAC,SAAI,WAAW,KAAK,kCAAkC,SAAS,GAC7D,eAAK,IAAI,CAAC,OAAO,UAChB;AAAA,IAAC;AAAA;AAAA,MAEE,GAAG;AAAA,MACJ,OAAO,MAAM,SAAS;AAAA,MACtB,SAAS,MAAM,WAAW;AAAA,MAEzB,gBAAM;AAAA;AAAA,IALF;AAAA,EAMP,CACD,GACH;AAEJ;","names":[]}

package/dist/components/layout-and-navigation/Tile.d.mts CHANGED Viewed

@@ -2,17 +2,14 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 type TileProps = {
-    title: {
-        value: ReactNode;
-        className?: string;
-    };
-    description?: {
-        value: ReactNode;
-        className?: string;
-    };
+    title: ReactNode;
+    titleClassName?: string;
+    description?: ReactNode;
+    descriptionClassName?: string;
     onClick?: () => void;
     disabled?: boolean;
     isSelected?: boolean;
+    isListItem?: boolean;
     prefix?: ReactNode;
     suffix?: ReactNode;
     className?: string;
@@ -23,6 +20,8 @@ type TileProps = {
 /**
  * A component for creating a tile similar to the flutter ListTile
  */
-declare const Tile: ({ title, description, onClick, isSelected, disabled, prefix, suffix, normalClassName, selectedClassName, disabledClassName, className }: TileProps) => react_jsx_runtime.JSX.Element;
+declare const Tile: ({ title, titleClassName, description, descriptionClassName, onClick, isSelected, disabled, prefix, suffix, normalClassName, selectedClassName, disabledClassName, className }: TileProps) => react_jsx_runtime.JSX.Element;
+type ListTileProps = TileProps;
+declare const ListTile: ({ ...props }: ListTileProps) => react_jsx_runtime.JSX.Element;
-export { Tile, type TileProps };
+export { ListTile, type ListTileProps, Tile, type TileProps };

package/dist/components/layout-and-navigation/Tile.d.ts CHANGED Viewed

@@ -2,17 +2,14 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 type TileProps = {
-    title: {
-        value: ReactNode;
-        className?: string;
-    };
-    description?: {
-        value: ReactNode;
-        className?: string;
-    };
+    title: ReactNode;
+    titleClassName?: string;
+    description?: ReactNode;
+    descriptionClassName?: string;
     onClick?: () => void;
     disabled?: boolean;
     isSelected?: boolean;
+    isListItem?: boolean;
     prefix?: ReactNode;
     suffix?: ReactNode;
     className?: string;
@@ -23,6 +20,8 @@ type TileProps = {
 /**
  * A component for creating a tile similar to the flutter ListTile
  */
-declare const Tile: ({ title, description, onClick, isSelected, disabled, prefix, suffix, normalClassName, selectedClassName, disabledClassName, className }: TileProps) => react_jsx_runtime.JSX.Element;
+declare const Tile: ({ title, titleClassName, description, descriptionClassName, onClick, isSelected, disabled, prefix, suffix, normalClassName, selectedClassName, disabledClassName, className }: TileProps) => react_jsx_runtime.JSX.Element;
+type ListTileProps = TileProps;
+declare const ListTile: ({ ...props }: ListTileProps) => react_jsx_runtime.JSX.Element;
-export { Tile, type TileProps };
+export { ListTile, type ListTileProps, Tile, type TileProps };

package/dist/components/layout-and-navigation/Tile.js CHANGED Viewed

@@ -29,6 +29,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/layout-and-navigation/Tile.tsx
 var Tile_exports = {};
 __export(Tile_exports, {
+  ListTile: () => ListTile,
   Tile: () => Tile
 });
 module.exports = __toCommonJS(Tile_exports);
@@ -37,14 +38,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
 }) => {
@@ -54,7 +57,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
         },
@@ -64,16 +67,30 @@ 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)
       ]
     }
   );
 };
+var ListTile = ({
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Tile,
+    {
+      ...props,
+      titleClassName: props.titleClassName ?? "font-semibold",
+      className: (0, import_clsx.default)("px-2 py-1 rounded-md", props.className),
+      disabledClassName: props.disabledClassName ?? "text-disabled-text cursor-not-allowed"
+    }
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ListTile,
   Tile
 });
 //# sourceMappingURL=Tile.js.map

package/dist/components/layout-and-navigation/Tile.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/layout-and-navigation/Tile.tsx"],"sourcesContent":["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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,kBAAiB;AACjB,0BAAsB;~~AA8ChB~~;~~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,eAAW,YAAAA;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,6CAAC,SAAI,WAAU,qBACb;AAAA,sDAAC,~~QAAG~~,eAAW,YAAAA,SAAK,~~MAAM~~,~~aAAa~~,~~wBAAwB,~~GAAI,~~gBAAM,OAAM~~;AAAA,~~UAC9E~~,CAAC,CAAC,eACD,4CAAC,UAAK,eAAW,YAAAA,SAAK,~~YAAY~~,~~aAAa,~~uBAAuB,GAAI,~~sBAAY,OAAM~~;AAAA,~~WAChG~~;AAAA,QACC,WAAW,aAAc,4CAAC,6BAAM,MAAM,IAAG,IAAM;AAAA;AAAA;AAAA,EAClD;AAEJ;","names":["clsx"]}
1	+ {"version":3,"sources":["../../../src/components/layout-and-navigation/Tile.tsx"],"sourcesContent":["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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,kBAAiB;AACjB,0BAAsB;AAmDhB;AA7BC,IAAM,OAAO,CAAC;AAAA,EACE;AAAA,EACA;AAAA,EACA;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,eAAW,YAAAA;AAAA,QACT;AAAA,QACA;AAAA,UACE,CAAC,eAAe,GAAG,WAAW,CAAC;AAAA,UAC/B,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,6CAAC,SAAI,WAAU,qBACb;AAAA,sDAAC,UAAK,eAAW,YAAAA,SAAK,kBAAmB,wBAAyB,GAAI,iBAAM;AAAA,UAC3E,CAAC,CAAC,eACD,4CAAC,UAAK,eAAW,YAAAA,SAAK,wBAAwB,uBAAuB,GAAI,uBAAY;AAAA,WACzF;AAAA,QACC,WAAW,aAAc,4CAAC,6BAAM,MAAM,IAAG,IAAM;AAAA;AAAA;AAAA,EAClD;AAEJ;AAIO,IAAM,WAAW,CAAC;AAAA,EACvB,GAAG;AACL,MAAqB;AACnB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,gBAAgB,MAAM,kBAAkB;AAAA,MACxC,eAAW,YAAAA,SAAK,wBAAwB,MAAM,SAAS;AAAA,MACvD,mBAAmB,MAAM,qBAAqB;AAAA;AAAA,EAChD;AAEJ;","names":["clsx"]}

package/dist/components/layout-and-navigation/Tile.mjs CHANGED Viewed

@@ -4,14 +4,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
 }) => {
@@ -21,7 +23,7 @@ var Tile = ({
       className: clsx(
         "flex-row-2 w-full items-center",
         {
-          [normalClassName]: !!onClick && !disabled,
+          [normalClassName]: onClick && !disabled,
           [selectedClassName]: isSelected && !disabled,
           [disabledClassName]: disabled
         },
@@ -31,15 +33,29 @@ 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)
       ]
     }
   );
 };
+var ListTile = ({
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    Tile,
+    {
+      ...props,
+      titleClassName: props.titleClassName ?? "font-semibold",
+      className: clsx("px-2 py-1 rounded-md", props.className),
+      disabledClassName: props.disabledClassName ?? "text-disabled-text cursor-not-allowed"
+    }
+  );
+};
 export {
+  ListTile,
   Tile
 };
 //# sourceMappingURL=Tile.mjs.map

package/dist/components/layout-and-navigation/Tile.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/layout-and-navigation/Tile.tsx"],"sourcesContent":["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"],"mappings":";AACA,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;","names":[]}
1	+ {"version":3,"sources":["../../../src/components/layout-and-navigation/Tile.tsx"],"sourcesContent":["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"],"mappings":";AACA,OAAO,UAAU;AACjB,SAAS,aAAa;AAmDhB,SACE,KADF;AA7BC,IAAM,OAAO,CAAC;AAAA,EACE;AAAA,EACA;AAAA,EACA;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,WAAW,CAAC;AAAA,UAC/B,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,UAAK,WAAW,KAAK,kBAAmB,wBAAyB,GAAI,iBAAM;AAAA,UAC3E,CAAC,CAAC,eACD,oBAAC,UAAK,WAAW,KAAK,wBAAwB,uBAAuB,GAAI,uBAAY;AAAA,WACzF;AAAA,QACC,WAAW,aAAc,oBAAC,SAAM,MAAM,IAAG,IAAM;AAAA;AAAA;AAAA,EAClD;AAEJ;AAIO,IAAM,WAAW,CAAC;AAAA,EACvB,GAAG;AACL,MAAqB;AACnB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,gBAAgB,MAAM,kBAAkB;AAAA,MACxC,WAAW,KAAK,wBAAwB,MAAM,SAAS;AAAA,MACvD,mBAAmB,MAAM,qBAAqB;AAAA;AAAA,EAChD;AAEJ;","names":[]}

package/dist/components/loading-states/LoadingAndErrorComponent.js CHANGED Viewed

@@ -40,7 +40,7 @@ var LoadingAndErrorComponent = ({
   hasError = false,
   loadingComponent,
   errorComponent,
-  minimumLoadingDuration,
+  minimumLoadingDuration = 200,
   className
 }) => {
   const [isInMinimumLoading, setIsInMinimumLoading] = (0, import_react.useState)(false);

package/dist/components/loading-states/LoadingAndErrorComponent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/loading-states/LoadingAndErrorComponent.tsx","../../../src/components/loading-states/LoadingContainer.tsx"],"sourcesContent":["import type { PropsWithChildren, ReactNode } from 'react'\nimport { useState } from 'react'\nimport { LoadingContainer } from './LoadingContainer'\nimport { clsx } from 'clsx'\n\nexport type LoadingAndErrorComponentProps = PropsWithChildren<{\n isLoading?: boolean,\n hasError?: boolean,\n loadingComponent?: ReactNode,\n errorComponent?: ReactNode,\n /*\n in milliseconds\n /\n minimumLoadingDuration?: number,\n className?: string,\n}>\n\n/\n A Component that shows the Error and Loading animation, when appropriate and the children otherwise\n */\nexport const LoadingAndErrorComponent = ({\n children,\n isLoading = false,\n hasError = false,\n loadingComponent,\n errorComponent,\n minimumLoadingDuration,\n className\n }: LoadingAndErrorComponentProps) => {\n const [isInMinimumLoading, setIsInMinimumLoading] = useState(false)\n const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = useState(false)\n if (minimumLoadingDuration && !isInMinimumLoading && !hasUsedMinimumLoading) {\n setIsInMinimumLoading(true)\n setTimeout(() => {\n setIsInMinimumLoading(false)\n setHasUsedMinimumLoading(true)\n }, minimumLoadingDuration)\n }\n\n if (isLoading \|\| (minimumLoadingDuration && isInMinimumLoading)) {\n return (loadingComponent ?? <LoadingContainer className={clsx(className)}/>)\n }\n if (hasError) {\n return (errorComponent ?? <LoadingContainer className={clsx('bg-negative', className)}/>)\n }\n return children\n}\n","import { clsx } from 'clsx'\n\nexport type LoadingComponentProps = {\n className?: string,\n}\n\nexport const LoadingContainer = ({ className }: LoadingComponentProps) => {\n return (\n <div className={clsx('relative overflow-hidden shimmer bg-disabled-background rounded-md', className)}/>\n )\n}"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAyB;;;ACDzB,kBAAqB;AAQjB;AAFG,IAAM,mBAAmB,CAAC,EAAE,UAAU,MAA6B;AACxE,SACE,4CAAC,SAAI,eAAW,kBAAK,sEAAsE,SAAS,GAAE;AAE1G;;;ADPA,IAAAA,eAAqB;AAqCW,IAAAC,sBAAA;AApBzB,IAAM,2BAA2B,CAAC;AAAA,EACE;AAAA,EACA,YAAY;AAAA,EACZ,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,~~EACA~~;AACF,MAAqC;AAC5E,QAAM,CAAC,oBAAoB,qBAAqB,QAAI,uBAAS,KAAK;AAClE,QAAM,CAAC,uBAAuB,wBAAwB,QAAI,uBAAS,KAAK;AACxE,MAAI,0BAA0B,CAAC,sBAAsB,CAAC,uBAAuB;AAC3E,0BAAsB,IAAI;AAC1B,eAAW,MAAM;AACf,4BAAsB,KAAK;AAC3B,+BAAyB,IAAI;AAAA,IAC/B,GAAG,sBAAsB;AAAA,EAC3B;AAEA,MAAI,aAAc,0BAA0B,oBAAqB;AAC/D,WAAQ,oBAAoB,6CAAC,oBAAiB,eAAW,mBAAK,SAAS,GAAE;AAAA,EAC3E;AACA,MAAI,UAAU;AACZ,WAAQ,kBAAkB,6CAAC,oBAAiB,eAAW,mBAAK,eAAe,SAAS,GAAE;AAAA,EACxF;AACA,SAAO;AACT;","names":["import_clsx","import_jsx_runtime"]}
1	+ {"version":3,"sources":["../../../src/components/loading-states/LoadingAndErrorComponent.tsx","../../../src/components/loading-states/LoadingContainer.tsx"],"sourcesContent":["import type { PropsWithChildren, ReactNode } from 'react'\nimport { useState } from 'react'\nimport { LoadingContainer } from './LoadingContainer'\nimport { clsx } from 'clsx'\n\nexport type LoadingAndErrorComponentProps = PropsWithChildren<{\n isLoading?: boolean,\n hasError?: boolean,\n loadingComponent?: ReactNode,\n errorComponent?: ReactNode,\n /*\n in milliseconds\n /\n minimumLoadingDuration?: number,\n className?: string,\n}>\n\n/\n A Component that shows the Error and Loading animation, when appropriate and the children otherwise\n */\nexport const LoadingAndErrorComponent = ({\n children,\n isLoading = false,\n hasError = false,\n loadingComponent,\n errorComponent,\n minimumLoadingDuration = 200,\n className\n }: LoadingAndErrorComponentProps) => {\n const [isInMinimumLoading, setIsInMinimumLoading] = useState(false)\n const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = useState(false)\n if (minimumLoadingDuration && !isInMinimumLoading && !hasUsedMinimumLoading) {\n setIsInMinimumLoading(true)\n setTimeout(() => {\n setIsInMinimumLoading(false)\n setHasUsedMinimumLoading(true)\n }, minimumLoadingDuration)\n }\n\n if (isLoading \|\| (minimumLoadingDuration && isInMinimumLoading)) {\n return (loadingComponent ?? <LoadingContainer className={clsx(className)}/>)\n }\n if (hasError) {\n return (errorComponent ?? <LoadingContainer className={clsx('bg-negative', className)}/>)\n }\n return children\n}\n","import { clsx } from 'clsx'\n\nexport type LoadingComponentProps = {\n className?: string,\n}\n\nexport const LoadingContainer = ({ className }: LoadingComponentProps) => {\n return (\n <div className={clsx('relative overflow-hidden shimmer bg-disabled-background rounded-md', className)}/>\n )\n}"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAyB;;;ACDzB,kBAAqB;AAQjB;AAFG,IAAM,mBAAmB,CAAC,EAAE,UAAU,MAA6B;AACxE,SACE,4CAAC,SAAI,eAAW,kBAAK,sEAAsE,SAAS,GAAE;AAE1G;;;ADPA,IAAAA,eAAqB;AAqCW,IAAAC,sBAAA;AApBzB,IAAM,2BAA2B,CAAC;AAAA,EACE;AAAA,EACA,YAAY;AAAA,EACZ,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,yBAAyB;AAAA,EACzB;AACF,MAAqC;AAC5E,QAAM,CAAC,oBAAoB,qBAAqB,QAAI,uBAAS,KAAK;AAClE,QAAM,CAAC,uBAAuB,wBAAwB,QAAI,uBAAS,KAAK;AACxE,MAAI,0BAA0B,CAAC,sBAAsB,CAAC,uBAAuB;AAC3E,0BAAsB,IAAI;AAC1B,eAAW,MAAM;AACf,4BAAsB,KAAK;AAC3B,+BAAyB,IAAI;AAAA,IAC/B,GAAG,sBAAsB;AAAA,EAC3B;AAEA,MAAI,aAAc,0BAA0B,oBAAqB;AAC/D,WAAQ,oBAAoB,6CAAC,oBAAiB,eAAW,mBAAK,SAAS,GAAE;AAAA,EAC3E;AACA,MAAI,UAAU;AACZ,WAAQ,kBAAkB,6CAAC,oBAAiB,eAAW,mBAAK,eAAe,SAAS,GAAE;AAAA,EACxF;AACA,SAAO;AACT;","names":["import_clsx","import_jsx_runtime"]}

package/dist/components/loading-states/LoadingAndErrorComponent.mjs CHANGED Viewed

@@ -17,7 +17,7 @@ var LoadingAndErrorComponent = ({
   hasError = false,
   loadingComponent,
   errorComponent,
-  minimumLoadingDuration,
+  minimumLoadingDuration = 200,
   className
 }) => {
   const [isInMinimumLoading, setIsInMinimumLoading] = useState(false);

package/dist/components/loading-states/LoadingAndErrorComponent.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/loading-states/LoadingAndErrorComponent.tsx","../../../src/components/loading-states/LoadingContainer.tsx"],"sourcesContent":["import type { PropsWithChildren, ReactNode } from 'react'\nimport { useState } from 'react'\nimport { LoadingContainer } from './LoadingContainer'\nimport { clsx } from 'clsx'\n\nexport type LoadingAndErrorComponentProps = PropsWithChildren<{\n isLoading?: boolean,\n hasError?: boolean,\n loadingComponent?: ReactNode,\n errorComponent?: ReactNode,\n /*\n in milliseconds\n /\n minimumLoadingDuration?: number,\n className?: string,\n}>\n\n/\n A Component that shows the Error and Loading animation, when appropriate and the children otherwise\n */\nexport const LoadingAndErrorComponent = ({\n children,\n isLoading = false,\n hasError = false,\n loadingComponent,\n errorComponent,\n minimumLoadingDuration,\n className\n }: LoadingAndErrorComponentProps) => {\n const [isInMinimumLoading, setIsInMinimumLoading] = useState(false)\n const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = useState(false)\n if (minimumLoadingDuration && !isInMinimumLoading && !hasUsedMinimumLoading) {\n setIsInMinimumLoading(true)\n setTimeout(() => {\n setIsInMinimumLoading(false)\n setHasUsedMinimumLoading(true)\n }, minimumLoadingDuration)\n }\n\n if (isLoading \|\| (minimumLoadingDuration && isInMinimumLoading)) {\n return (loadingComponent ?? <LoadingContainer className={clsx(className)}/>)\n }\n if (hasError) {\n return (errorComponent ?? <LoadingContainer className={clsx('bg-negative', className)}/>)\n }\n return children\n}\n","import { clsx } from 'clsx'\n\nexport type LoadingComponentProps = {\n className?: string,\n}\n\nexport const LoadingContainer = ({ className }: LoadingComponentProps) => {\n return (\n <div className={clsx('relative overflow-hidden shimmer bg-disabled-background rounded-md', className)}/>\n )\n}"],"mappings":";AACA,SAAS,gBAAgB;;;ACDzB,SAAS,YAAY;AAQjB;AAFG,IAAM,mBAAmB,CAAC,EAAE,UAAU,MAA6B;AACxE,SACE,oBAAC,SAAI,WAAW,KAAK,sEAAsE,SAAS,GAAE;AAE1G;;;ADPA,SAAS,QAAAA,aAAY;AAqCW,gBAAAC,YAAA;AApBzB,IAAM,2BAA2B,CAAC;AAAA,EACE;AAAA,EACA,YAAY;AAAA,EACZ,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,~~EACA~~;AACF,MAAqC;AAC5E,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAS,KAAK;AAClE,QAAM,CAAC,uBAAuB,wBAAwB,IAAI,SAAS,KAAK;AACxE,MAAI,0BAA0B,CAAC,sBAAsB,CAAC,uBAAuB;AAC3E,0BAAsB,IAAI;AAC1B,eAAW,MAAM;AACf,4BAAsB,KAAK;AAC3B,+BAAyB,IAAI;AAAA,IAC/B,GAAG,sBAAsB;AAAA,EAC3B;AAEA,MAAI,aAAc,0BAA0B,oBAAqB;AAC/D,WAAQ,oBAAoB,gBAAAA,KAAC,oBAAiB,WAAWD,MAAK,SAAS,GAAE;AAAA,EAC3E;AACA,MAAI,UAAU;AACZ,WAAQ,kBAAkB,gBAAAC,KAAC,oBAAiB,WAAWD,MAAK,eAAe,SAAS,GAAE;AAAA,EACxF;AACA,SAAO;AACT;","names":["clsx","jsx"]}
1	+ {"version":3,"sources":["../../../src/components/loading-states/LoadingAndErrorComponent.tsx","../../../src/components/loading-states/LoadingContainer.tsx"],"sourcesContent":["import type { PropsWithChildren, ReactNode } from 'react'\nimport { useState } from 'react'\nimport { LoadingContainer } from './LoadingContainer'\nimport { clsx } from 'clsx'\n\nexport type LoadingAndErrorComponentProps = PropsWithChildren<{\n isLoading?: boolean,\n hasError?: boolean,\n loadingComponent?: ReactNode,\n errorComponent?: ReactNode,\n /*\n in milliseconds\n /\n minimumLoadingDuration?: number,\n className?: string,\n}>\n\n/\n A Component that shows the Error and Loading animation, when appropriate and the children otherwise\n */\nexport const LoadingAndErrorComponent = ({\n children,\n isLoading = false,\n hasError = false,\n loadingComponent,\n errorComponent,\n minimumLoadingDuration = 200,\n className\n }: LoadingAndErrorComponentProps) => {\n const [isInMinimumLoading, setIsInMinimumLoading] = useState(false)\n const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = useState(false)\n if (minimumLoadingDuration && !isInMinimumLoading && !hasUsedMinimumLoading) {\n setIsInMinimumLoading(true)\n setTimeout(() => {\n setIsInMinimumLoading(false)\n setHasUsedMinimumLoading(true)\n }, minimumLoadingDuration)\n }\n\n if (isLoading \|\| (minimumLoadingDuration && isInMinimumLoading)) {\n return (loadingComponent ?? <LoadingContainer className={clsx(className)}/>)\n }\n if (hasError) {\n return (errorComponent ?? <LoadingContainer className={clsx('bg-negative', className)}/>)\n }\n return children\n}\n","import { clsx } from 'clsx'\n\nexport type LoadingComponentProps = {\n className?: string,\n}\n\nexport const LoadingContainer = ({ className }: LoadingComponentProps) => {\n return (\n <div className={clsx('relative overflow-hidden shimmer bg-disabled-background rounded-md', className)}/>\n )\n}"],"mappings":";AACA,SAAS,gBAAgB;;;ACDzB,SAAS,YAAY;AAQjB;AAFG,IAAM,mBAAmB,CAAC,EAAE,UAAU,MAA6B;AACxE,SACE,oBAAC,SAAI,WAAW,KAAK,sEAAsE,SAAS,GAAE;AAE1G;;;ADPA,SAAS,QAAAA,aAAY;AAqCW,gBAAAC,YAAA;AApBzB,IAAM,2BAA2B,CAAC;AAAA,EACE;AAAA,EACA,YAAY;AAAA,EACZ,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,yBAAyB;AAAA,EACzB;AACF,MAAqC;AAC5E,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAS,KAAK;AAClE,QAAM,CAAC,uBAAuB,wBAAwB,IAAI,SAAS,KAAK;AACxE,MAAI,0BAA0B,CAAC,sBAAsB,CAAC,uBAAuB;AAC3E,0BAAsB,IAAI;AAC1B,eAAW,MAAM;AACf,4BAAsB,KAAK;AAC3B,+BAAyB,IAAI;AAAA,IAC/B,GAAG,sBAAsB;AAAA,EAC3B;AAEA,MAAI,aAAc,0BAA0B,oBAAqB;AAC/D,WAAQ,oBAAoB,gBAAAA,KAAC,oBAAiB,WAAWD,MAAK,SAAS,GAAE;AAAA,EAC3E;AACA,MAAI,UAAU;AACZ,WAAQ,kBAAkB,gBAAAC,KAAC,oBAAiB,WAAWD,MAAK,eAAe,SAAS,GAAE;AAAA,EACxF;AACA,SAAO;AACT;","names":["clsx","jsx"]}

package/dist/components/modals/LanguageModal.js CHANGED Viewed

@@ -149,14 +149,16 @@ var import_lucide_react = require("lucide-react");
 var import_jsx_runtime3 = 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
 }) => {
@@ -166,7 +168,7 @@ var Tile = ({
       className: (0, import_clsx2.default)(
         "flex-row-2 w-full items-center",
         {
-          [normalClassName]: !!onClick && !disabled,
+          [normalClassName]: onClick && !disabled,
           [selectedClassName]: isSelected && !disabled,
           [disabledClassName]: disabled
         },
@@ -176,14 +178,27 @@ var Tile = ({
       children: [
         prefix,
         /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex-col-0 w-full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h4", { className: (0, import_clsx2.default)(title.className ?? "textstyle-title-normal"), children: title.value }),
-          !!description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: (0, import_clsx2.default)(description.className ?? "textstyle-description"), children: description.value })
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: (0, import_clsx2.default)(titleClassName ?? "textstyle-title-normal"), children: title }),
+          !!description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: (0, import_clsx2.default)(descriptionClassName ?? "textstyle-description"), children: description })
         ] }),
         suffix ?? (isSelected ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Check, { size: 24 }) : void 0)
       ]
     }
   );
 };
+var ListTile = ({
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    Tile,
+    {
+      ...props,
+      titleClassName: props.titleClassName ?? "font-semibold",
+      className: (0, import_clsx2.default)("px-2 py-1 rounded-md", props.className),
+      disabledClassName: props.disabledClassName ?? "text-disabled-text cursor-not-allowed"
+    }
+  );
+};
 // src/components/layout-and-navigation/Expandable.tsx
 var import_react3 = require("react");
@@ -1107,22 +1122,6 @@ var useSearch = ({
 // src/components/user-action/Select.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var SelectTile = ({
-  className,
-  disabledClassName,
-  title,
-  ...restProps
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    Tile,
-    {
-      ...restProps,
-      className: (0, import_clsx8.default)("px-2 py-1 rounded-md", className),
-      disabledClassName: disabledClassName ?? "text-disabled-text cursor-not-allowed",
-      title: { ...title, className: title.className ?? "font-semibold" }
-    }
-  );
-};
 var Select = ({
   value,
   label,
@@ -1189,10 +1188,10 @@ var Select = ({
             ),
             /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex-col-2 overflow-y-auto", children: [
               result.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                SelectTile,
+                ListTile,
                 {
                   isSelected: option === selectedOption,
-                  title: { value: option.label },
+                  title: option.label,
                   onClick: () => {
                     onChange(option.value);
                     close();