@helpwave/hightide 0.0.13 → 0.0.16

package/dist/components/StepperBar.mjs

@@ -0,0 +1,216 @@
+// src/components/StepperBar.tsx
+import { Check, ChevronLeft, ChevronRight } from "lucide-react";
+
+// src/hooks/useLanguage.tsx
+import { createContext, useContext, useEffect as useEffect2, useState as useState2 } from "react";
+
+// src/hooks/useLocalStorage.tsx
+import { useCallback, useEffect, useState } from "react";
+
+// src/hooks/useLanguage.tsx
+import { jsx } from "react/jsx-runtime";
+var DEFAULT_LANGUAGE = "en";
+var LanguageContext = createContext({ language: DEFAULT_LANGUAGE, setLanguage: (v) => v });
+var useLanguage = () => useContext(LanguageContext);
+
+// src/hooks/useTranslation.ts
+var useTranslation = (defaults, translationOverwrite = {}) => {
+  const { language: languageProp, translation: overwrite } = translationOverwrite;
+  const { language: inferredLanguage } = useLanguage();
+  const usedLanguage = languageProp ?? inferredLanguage;
+  let defaultValues = defaults[usedLanguage];
+  if (overwrite && overwrite[usedLanguage]) {
+    defaultValues = { ...defaultValues, ...overwrite[usedLanguage] };
+  }
+  return defaultValues;
+};
+
+// src/util/array.ts
+var range = (start, end, allowEmptyRange = false) => {
+  if (end < start) {
+    if (!allowEmptyRange) {
+      console.warn(`range: end (${end}) < start (${start}) should be allowed explicitly, set allowEmptyRange to true`);
+    }
+    return [];
+  }
+  return Array.from({ length: end - start + 1 }, (_, index) => index + start);
+};
+
+// src/components/Button.tsx
+import clsx from "clsx";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var ButtonSizePaddings = {
+  small: "btn-sm",
+  medium: "btn-md",
+  large: "btn-lg"
+};
+var SolidButton = ({
+  children,
+  disabled = false,
+  color = "primary",
+  size = "medium",
+  startIcon,
+  endIcon,
+  onClick,
+  className,
+  ...restProps
+}) => {
+  const colorClasses = {
+    primary: "bg-button-solid-primary-background text-button-solid-primary-text",
+    secondary: "bg-button-solid-secondary-background text-button-solid-secondary-text",
+    tertiary: "bg-button-solid-tertiary-background text-button-solid-tertiary-text",
+    positive: "bg-button-solid-positive-background text-button-solid-positive-text",
+    warning: "bg-button-solid-warning-background text-button-solid-warning-text",
+    negative: "bg-button-solid-negative-background text-button-solid-negative-text"
+  }[color];
+  const iconColorClasses = {
+    primary: "text-button-solid-primary-icon",
+    secondary: "text-button-solid-secondary-icon",
+    tertiary: "text-button-solid-tertiary-icon",
+    positive: "text-button-solid-positive-icon",
+    warning: "text-button-solid-warning-icon",
+    negative: "text-button-solid-negative-icon"
+  }[color];
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick: disabled ? void 0 : onClick,
+      disabled: disabled || onClick === void 0,
+      className: clsx(
+        className,
+        {
+          "text-disabled-text bg-disabled-background": disabled,
+          [clsx(colorClasses, "hover:brightness-90")]: !disabled
+        },
+        ButtonSizePaddings[size]
+      ),
+      ...restProps,
+      children: [
+        startIcon && /* @__PURE__ */ jsx2(
+          "span",
+          {
+            className: clsx({
+              [iconColorClasses]: !disabled,
+              [`text-disabled-icon`]: disabled
+            }),
+            children: startIcon
+          }
+        ),
+        children,
+        endIcon && /* @__PURE__ */ jsx2(
+          "span",
+          {
+            className: clsx({
+              [iconColorClasses]: !disabled,
+              [`text-disabled-icon`]: disabled
+            }),
+            children: endIcon
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/StepperBar.tsx
+import clsx2 from "clsx";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var defaultStepperBarTranslation = {
+  en: {
+    back: "Back",
+    next: "Next Step",
+    confirm: "Create"
+  },
+  de: {
+    back: "Zur\xFCck",
+    next: "N\xE4chster Schritt",
+    confirm: "Erstellen"
+  }
+};
+var StepperBar = ({
+  overwriteTranslation,
+  stepper,
+  onChange,
+  onFinish,
+  showDots = true,
+  className = ""
+}) => {
+  const translation = useTranslation(defaultStepperBarTranslation, overwriteTranslation);
+  const dots = range(0, stepper.lastStep);
+  const { step, seenSteps, lastStep } = stepper;
+  const update = (newStep) => {
+    seenSteps.add(newStep);
+    onChange({ step: newStep, seenSteps, lastStep });
+  };
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: clsx2("sticky row p-2 border-2 justify-between rounded-lg shadow-lg", className),
+      children: [
+        /* @__PURE__ */ jsx3("div", { className: "flex-[2] justify-start", children: /* @__PURE__ */ jsxs2(
+          SolidButton,
+          {
+            disabled: step === 0,
+            onClick: () => {
+              update(step - 1);
+            },
+            className: "row gap-x-1 items-center justify-center",
+            children: [
+              /* @__PURE__ */ jsx3(ChevronLeft, { size: 14 }),
+              translation.back
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx3("div", { className: "row flex-[5] gap-x-2 justify-center items-center", children: showDots && dots.map((value, index) => {
+          const seen = seenSteps.has(index);
+          return /* @__PURE__ */ jsx3(
+            "div",
+            {
+              onClick: () => seen && update(index),
+              className: clsx2(
+                "rounded-full w-4 h-4",
+                {
+                  "bg-primary hover:brightness-75": index === step && seen,
+                  "bg-primary/40 hover:bg-primary": index !== step && seen,
+                  "bg-gray-200 outline-transparent": !seen
+                },
+                {
+                  "cursor-pointer": seen,
+                  "cursor-not-allowed": !seen
+                }
+              )
+            },
+            index
+          );
+        }) }),
+        step !== lastStep && /* @__PURE__ */ jsx3("div", { className: "flex-[2] justify-end", children: /* @__PURE__ */ jsxs2(
+          SolidButton,
+          {
+            onClick: () => update(step + 1),
+            className: "row gap-x-1 items-center justify-center",
+            children: [
+              translation.next,
+              /* @__PURE__ */ jsx3(ChevronRight, { size: 14 })
+            ]
+          }
+        ) }),
+        step === lastStep && /* @__PURE__ */ jsx3("div", { className: "flex-[2] justify-end", children: /* @__PURE__ */ jsxs2(
+          SolidButton,
+          {
+            disabled: false,
+            onClick: onFinish,
+            className: "row gap-x-1 items-center justify-center",
+            children: [
+              /* @__PURE__ */ jsx3(Check, { size: 14 }),
+              translation.confirm
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+};
+export {
+  StepperBar
+};
+//# sourceMappingURL=StepperBar.mjs.map

package/dist/components/StepperBar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/StepperBar.tsx","../../src/hooks/useLanguage.tsx","../../src/hooks/useLocalStorage.tsx","../../src/hooks/useTranslation.ts","../../src/util/array.ts","../../src/components/Button.tsx"],"sourcesContent":["import { Check, ChevronLeft, ChevronRight } from 'lucide-react'\nimport type { Languages } from '../hooks/useLanguage'\nimport type { PropsForTranslation } from '../hooks/useTranslation'\nimport { useTranslation } from '../hooks/useTranslation'\nimport { range } from '../util/array'\nimport { SolidButton } from './Button'\nimport clsx from 'clsx'\n\ntype StepperBarTranslation = {\n  back: string,\n  next: string,\n  confirm: string,\n}\n\nconst defaultStepperBarTranslation: Record<Languages, StepperBarTranslation> = {\n  en: {\n    back: 'Back',\n    next: 'Next Step',\n    confirm: 'Create'\n  },\n  de: {\n    back: 'Zurück',\n    next: 'Nächster Schritt',\n    confirm: 'Erstellen'\n  }\n}\n\nexport type StepperInformation = {\n  step: number,\n  lastStep: number,\n  seenSteps: Set<number>,\n}\n\nexport type StepperBarProps = {\n  stepper: StepperInformation,\n  onChange: (step: StepperInformation) => void,\n  onFinish: () => void,\n  showDots?: boolean,\n  className?: string,\n}\n\n/**\n * A Component for stepping\n */\nexport const StepperBar = ({\n  overwriteTranslation,\n  stepper,\n  onChange,\n  onFinish,\n  showDots = true,\n  className = '',\n}: PropsForTranslation<StepperBarTranslation, StepperBarProps>) => {\n  const translation = useTranslation(defaultStepperBarTranslation, overwriteTranslation)\n  const dots = range(0, stepper.lastStep)\n  const { step, seenSteps, lastStep } = stepper\n\n  const update = (newStep: number) => {\n    seenSteps.add(newStep)\n    onChange({ step: newStep, seenSteps, lastStep })\n  }\n\n  return (\n    <div\n      className={clsx('sticky row p-2 border-2 justify-between rounded-lg shadow-lg', className)}\n    >\n      <div className=\"flex-[2] justify-start\">\n        <SolidButton\n          disabled={step === 0}\n          onClick={() => {\n            update(step - 1)\n          }}\n          className=\"row gap-x-1 items-center justify-center\"\n        >\n          <ChevronLeft size={14}/>\n          {translation.back}\n        </SolidButton>\n      </div>\n      <div className=\"row flex-[5] gap-x-2 justify-center items-center\">\n        {showDots && dots.map((value, index) => {\n          const seen = seenSteps.has(index)\n          return (\n            <div\n              key={index}\n              onClick={() => seen && update(index)}\n              className={clsx('rounded-full w-4 h-4', {\n                'bg-primary hover:brightness-75': index === step && seen,\n                'bg-primary/40 hover:bg-primary': index !== step && seen,\n                'bg-gray-200 outline-transparent': !seen,\n              },\n              {\n                'cursor-pointer': seen,\n                'cursor-not-allowed': !seen,\n              })}\n            />\n          )\n        })}\n      </div>\n      {step !== lastStep && (\n        <div className=\"flex-[2] justify-end\">\n          <SolidButton\n            onClick={() => update(step + 1)}\n            className=\"row gap-x-1 items-center justify-center\"\n          >\n            {translation.next}\n            <ChevronRight size={14}/>\n          </SolidButton>\n        </div>\n      )}\n      {step === lastStep && (\n        <div className=\"flex-[2] justify-end\">\n          <SolidButton\n            // TODO check form validity\n            disabled={false}\n            onClick={onFinish}\n            className=\"row gap-x-1 items-center justify-center\"\n          >\n            <Check size={14}/>\n            {translation.confirm}\n          </SolidButton>\n        </div>\n      )}\n    </div>\n  )\n}\n","import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport useLocalStorage from './useLocalStorage'\n\nexport const languages = ['en', 'de'] as const\nexport type Languages = typeof languages[number]\nexport const languagesLocalNames: Record<Languages, string> = {\n  en: 'English',\n  de: 'Deutsch',\n}\n\nexport const DEFAULT_LANGUAGE = 'en'\n\nexport type LanguageContextValue = {\n  language: Languages,\n  setLanguage: Dispatch<SetStateAction<Languages>>,\n}\n\nexport const LanguageContext = createContext<LanguageContextValue>({ language: DEFAULT_LANGUAGE, setLanguage: (v) => v })\n\nexport const useLanguage = () => useContext(LanguageContext)\n\nexport const useLocale = (overWriteLanguage?: Languages) => {\n  const { language } = useLanguage()\n  const mapping: Record<Languages, string> = {\n    en: 'en-US',\n    de: 'de-DE'\n  }\n  return mapping[overWriteLanguage ?? language]\n}\n\ntype ProvideLanguageProps = {\n  initialLanguage?: Languages,\n}\n\nexport const ProvideLanguage = ({ initialLanguage, children }: PropsWithChildren<ProvideLanguageProps>) => {\n  const [language, setLanguage] = useState<Languages>(initialLanguage ?? DEFAULT_LANGUAGE)\n  const [storedLanguage, setStoredLanguage] = useLocalStorage<Languages>('language', initialLanguage ?? DEFAULT_LANGUAGE)\n\n  useEffect(() => {\n    if(language !== initialLanguage && initialLanguage){\n      console.warn('LanguageProvider initial state changed: Prefer using useLanguages\\'s setLanguage instead')\n      setLanguage(initialLanguage)\n    }\n  }, [initialLanguage]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  useEffect(() => {\n    // TODO set locale of html tag here as well\n    setStoredLanguage(language)\n  }, [language, setStoredLanguage])\n\n  useEffect(() => {\n    if (storedLanguage !== null) {\n      setLanguage(storedLanguage)\n      return\n    }\n\n    const languagesToTestAgainst = Object.values(languages)\n\n    const matchingBrowserLanguages = window.navigator.languages\n      .map(language => languagesToTestAgainst.find((test) => language === test || language.split('-')[0] === test))\n      .filter(entry => entry !== undefined)\n\n    if (matchingBrowserLanguages.length === 0) return\n\n    const firstMatch = matchingBrowserLanguages[0] as Languages\n    setLanguage(firstMatch)\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return (\n    <LanguageContext.Provider value={{\n      language,\n      setLanguage\n    }}>\n      {children}\n    </LanguageContext.Provider>\n  )\n}\n","import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nconst useLocalStorage = <T, >(key: string, initValue: T): [T, SetValue<T>] => {\n  const get = useCallback((): T => {\n    if (typeof window === 'undefined') {\n      return initValue\n    }\n    const storageService = new LocalStorageService()\n    const value = storageService.get<T>(key)\n    return value || initValue\n  }, [initValue, key])\n\n  const [storedValue, setStoredValue] = useState<T>(get)\n\n  const setValue: SetValue<T> = useCallback(value => {\n    const newValue = value instanceof Function ? value(storedValue) : value\n    const storageService = new LocalStorageService()\n    storageService.set(key, value)\n\n    setStoredValue(newValue)\n  }, [storedValue, setStoredValue, key])\n\n  useEffect(() => {\n    setStoredValue(get())\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return [storedValue, setValue]\n}\n\nexport default useLocalStorage\n","import type { Languages } from './useLanguage'\nimport { useLanguage } from './useLanguage'\n\nexport type Translation<T> = Record<Languages, T>\n\ntype OverwriteTranslationType<Translation extends Record<string, unknown>> = {\n  language?: Languages,\n  translation?: Partial<Record<Languages, Partial<Translation>>>,\n}\n\n/**\n * Adds the `language` prop to the component props.\n *\n * @param Translation the type of the translation object\n *\n * @param Props the type of the component props, defaults to `Record<string, never>`,\n *              if you don't expect any other props other than `language` and get an\n *              error when using your component (because it uses `forwardRef` etc.)\n *              you can try out `Record<string, unknown>`, this might resolve your\n *              problem as `SomeType & never` is still `never` but `SomeType & unknown`\n *              is `SomeType` which means that adding back props (like `ref` etc.)\n *              works properly\n */\nexport type PropsForTranslation<\n  Translation extends Record<string, unknown>,\n  Props = Record<string, never>\n> = Props & {\n  overwriteTranslation?: OverwriteTranslationType<Translation>,\n};\n\nexport const useTranslation = <Translation extends Record<string, unknown>>(\n  defaults: Record<Languages, Translation>,\n  translationOverwrite: OverwriteTranslationType<Translation> = {}\n) : Translation => {\n  const { language: languageProp, translation: overwrite } = translationOverwrite\n  const { language: inferredLanguage } = useLanguage()\n  const usedLanguage = languageProp ?? inferredLanguage\n  let defaultValues: Translation = defaults[usedLanguage]\n  if (overwrite && overwrite[usedLanguage]) {\n    defaultValues = { ...defaultValues, ...overwrite[usedLanguage] }\n  }\n  return defaultValues\n}\n","export const equalSizeGroups = <T >(array: T[], groupSize: number): T[][] => {\n  if (groupSize <= 0) {\n    console.warn(`group size should be greater than 0: groupSize = ${groupSize}`)\n    return [[...array]]\n  }\n\n  const groups = []\n  for (let i = 0; i < array.length; i += groupSize) {\n    groups.push(array.slice(i, Math.min(i + groupSize, array.length)))\n  }\n  return groups\n}\n\n/**\n * @param start\n * @param end inclusive\n * @param allowEmptyRange Whether the range can be defined empty via end < start\n */\nexport const range = (start: number, end: number, allowEmptyRange: boolean = false): number[] => {\n  if (end < start) {\n    if (!allowEmptyRange) {\n      console.warn(`range: end (${end}) < start (${start}) should be allowed explicitly, set allowEmptyRange to true`)\n    }\n    return []\n  }\n  return Array.from({ length: end - start + 1 }, (_, index) => index + start)\n}\n\n/** Finds the closest match\n * @param list The list of all possible matches\n * @param firstCloser Return whether item1 is closer than item2\n */\nexport const closestMatch = <T >(list: T[], firstCloser: (item1: T, item2: T) => boolean) => {\n  return list.reduce((item1, item2) => {\n    return firstCloser(item1, item2) ? item1 : item2\n  })\n}\n\n/**\n * returns the item in middle of a list and its neighbours before and after\n * e.g. [1,2,3,4,5,6] for item = 1 would return [5,6,1,2,3]\n */\nexport const getNeighbours = <T >(list: T[], item: T, neighbourDistance: number = 2) => {\n  const index = list.indexOf(item)\n  const totalItems = neighbourDistance * 2 + 1\n  if (list.length < totalItems) {\n    console.warn('List is to short')\n    return list\n  }\n\n  if (index === -1) {\n    console.error('item not found in list')\n    return list.splice(0, totalItems)\n  }\n\n  let start = index - neighbourDistance\n  if (start < 0) {\n    start += list.length\n  }\n  const end = (index + neighbourDistance + 1) % list.length\n\n  const result: T[] = []\n  let ignoreOnce = list.length === totalItems\n  for (let i = start; i !== end || ignoreOnce; i = (i + 1) % list.length) {\n    result.push(list[i]!)\n    if (end === i && ignoreOnce) {\n      ignoreOnce = false\n    }\n  }\n  return result\n}\n\nexport const createLoopingListWithIndex = <T >(list: T[], startIndex: number = 0, length: number = 0, forwards: boolean = true) => {\n  if (length < 0) {\n    console.warn(`createLoopingList: length must be >= 0, given ${length}`)\n  } else if (length === 0) {\n    length = list.length\n  }\n\n  const returnList: [number, T][] = []\n\n  if (forwards) {\n    for (let i = startIndex; returnList.length < length; i = (i + 1) % list.length) {\n      returnList.push([i, list[i]!])\n    }\n  } else {\n    for (let i = startIndex; returnList.length < length; i = i === 0 ? i = list.length - 1 : i - 1) {\n      returnList.push([i, list[i]!])\n    }\n  }\n\n  return returnList\n}\n\nexport const createLoopingList = <T >(list: T[], startIndex: number = 0, length: number = 0, forwards: boolean = true) => {\n  return createLoopingListWithIndex(list, startIndex, length, forwards).map(([_, item]) => item)\n}\n\nexport const ArrayUtil = {\n  unique: <T>(list: T[]): T[] => {\n    const seen = new Set<T>()\n    return list.filter((item) => {\n      if (seen.has(item)) {\n        return false\n      }\n      seen.add(item)\n      return true\n    })\n  },\n\n  difference: <T>(list: T[], removeList: T[]): T[] => {\n    const remove = new Set<T>(removeList)\n    return list.filter((item) => !remove.has(item))\n  }\n}\n","import type { PropsWithChildren, ButtonHTMLAttributes, ReactNode } from 'react'\nimport clsx from 'clsx'\n\nexport type SolidButtonColor = 'primary' | 'secondary' | 'tertiary' | 'positive' | 'warning'| 'negative'\nexport type OutlineButtonColor = 'primary'\nexport type TextButtonColor = 'negative' | 'neutral'\n\ntype ButtonSizes = 'small' | 'medium' | 'large'\n\n/**\n * The shard properties between all button types\n */\nexport type ButtonProps = PropsWithChildren<{\n  /**\n   * @default 'medium'\n   */\n  size?: ButtonSizes,\n}> & ButtonHTMLAttributes<Element>\n\nexport const ButtonSizePaddings: Record<ButtonSizes, string> = {\n  small: 'btn-sm',\n  medium: 'btn-md',\n  large: 'btn-lg'\n}\n\ntype ButtonWithIconsProps = ButtonProps & {\n  startIcon?: ReactNode,\n  endIcon?: ReactNode,\n}\n\nexport type SolidButtonProps = ButtonWithIconsProps & {\n  color?: SolidButtonColor,\n}\n\nexport type OutlineButtonProps = ButtonWithIconsProps & {\n  color?: OutlineButtonColor,\n}\n\nexport type TextButtonProps = ButtonWithIconsProps & {\n  color?: TextButtonColor,\n}\n\n/**\n * A button with a solid background and different sizes\n */\nconst SolidButton = ({\n                       children,\n                       disabled = false,\n                       color = 'primary',\n                       size = 'medium',\n                       startIcon,\n                       endIcon,\n                       onClick,\n                       className,\n                       ...restProps\n                     }: SolidButtonProps) => {\n  const colorClasses = {\n    primary: 'bg-button-solid-primary-background text-button-solid-primary-text',\n    secondary: 'bg-button-solid-secondary-background text-button-solid-secondary-text',\n    tertiary: 'bg-button-solid-tertiary-background text-button-solid-tertiary-text',\n    positive: 'bg-button-solid-positive-background text-button-solid-positive-text',\n    warning: 'bg-button-solid-warning-background text-button-solid-warning-text',\n    negative: 'bg-button-solid-negative-background text-button-solid-negative-text',\n  }[color]\n\n  const iconColorClasses = {\n    primary: 'text-button-solid-primary-icon',\n    secondary: 'text-button-solid-secondary-icon',\n    tertiary: 'text-button-solid-tertiary-icon',\n    positive: 'text-button-solid-positive-icon',\n    warning: 'text-button-solid-warning-icon',\n    negative: 'text-button-solid-negative-icon',\n  }[color]\n\n  return (\n    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled || onClick === undefined}\n      className={clsx(\n        className,\n        {\n          'text-disabled-text bg-disabled-background': disabled,\n          [clsx(colorClasses, 'hover:brightness-90')]: !disabled\n        },\n        ButtonSizePaddings[size]\n      )}\n      {...restProps}\n    >\n      {startIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {startIcon}\n      </span>\n      )}\n      {children}\n      {endIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {endIcon}\n      </span>\n      )}\n    </button>\n  )\n}\n\n/**\n * A button with an outline border and different sizes\n */\nconst OutlineButton = ({\n                         children,\n                         disabled = false,\n                         color = 'primary',\n                         size = 'medium',\n                         startIcon,\n                         endIcon,\n                         onClick,\n                         className,\n                         ...restProps\n                       }: OutlineButtonProps) => {\n  const colorClasses = {\n    primary: 'bg-transparent border-2 border-button-outline-primary-text text-button-outline-primary-text',\n  }[color]\n\n  const iconColorClasses = {\n    primary: 'text-button-outline-primary-icon',\n  }[color]\n  return (\n    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled || onClick === undefined}\n      className={clsx(\n        className, {\n          'text-disabled-text border-disabled-outline)': disabled,\n          [clsx(colorClasses, 'hover:brightness-80')]: !disabled,\n        },\n        ButtonSizePaddings[size]\n      )}\n      {...restProps}\n    >\n      {startIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {startIcon}\n      </span>\n      )}\n      {children}\n      {endIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {endIcon}\n      </span>\n      )}\n    </button>\n  )\n}\n\n/**\n * A text that is a button that can have different sizes\n */\nconst TextButton = ({\n                      children,\n                      disabled = false,\n                      color = 'neutral',\n                      size = 'medium',\n                      startIcon,\n                      endIcon,\n                      onClick,\n                      className,\n                      ...restProps\n                    }: TextButtonProps) => {\n  const colorClasses = {\n    negative: 'bg-transparent text-button-text-negative-text',\n    neutral: 'bg-transparent text-button-text-neutral-text',\n  }[color]\n\n  const iconColorClasses = {\n    negative: 'text-button-text-negative-icon',\n    neutral: 'text-button-text-neutral-icon',\n  }[color]\n  return (\n    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled || onClick === undefined}\n      className={clsx(\n        className, {\n          'text-disabled-text': disabled,\n          [clsx(colorClasses, 'hover:bg-button-text-hover-background rounded-full')]: !disabled,\n        },\n        ButtonSizePaddings[size]\n      )}\n      {...restProps}\n    >\n      {startIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {startIcon}\n      </span>\n      )}\n      {children}\n      {endIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {endIcon}\n      </span>\n      )}\n    </button>\n  )\n}\n\n// TODO Icon button\n\nexport { SolidButton, OutlineButton, TextButton }\n"],"mappings":"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","names":["useEffect","useState","jsx","clsx","jsx","jsxs"]}

package/dist/components/Table.d.mts

@@ -0,0 +1,90 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactElement } from 'react';
+
+type TableStatePagination = {
+    currentPage: number;
+    entriesPerPage: number;
+};
+declare const defaultTableStatePagination: {
+    currentPage: number;
+    entriesPerPage: number;
+};
+type TableStateSelection<T> = {
+    currentSelection: T[];
+    hasSelectedAll: boolean;
+    hasSelectedSome: boolean;
+    hasSelectedNone: boolean;
+};
+declare const defaultTableStateSelection: {
+    currentSelection: never[];
+    hasSelectedAll: boolean;
+    hasSelectedSome: boolean;
+    hasSelectedNone: boolean;
+};
+type TableState = {
+    pagination?: TableStatePagination;
+    selection?: {
+        /**
+         * The mapped ids of the dataType
+         */
+        currentSelection: string[];
+        hasSelectedAll: boolean;
+        hasSelectedSome: boolean;
+        hasSelectedNone: boolean;
+    };
+};
+type IdentifierMapping<T> = (dataObject: T) => string;
+declare const isDataObjectSelected: <T>(tableState: TableState, dataObject: T, identifierMapping: IdentifierMapping<T>) => boolean;
+declare const pageForItem: <T>(data: T[], item: T, entriesPerPage: number, identifierMapping: IdentifierMapping<T>) => number;
+declare const updatePagination: (pagination: TableStatePagination, dataLength: number) => TableStatePagination;
+declare const addElementToTable: <T>(tableState: TableState, data: T[], dataObject: T, identifierMapping: IdentifierMapping<T>) => {
+    pagination: {
+        currentPage: number;
+        entriesPerPage: number;
+    } | undefined;
+    selection: {
+        hasSelectedAll: boolean;
+        hasSelectedSome: boolean;
+        /**
+         * The mapped ids of the dataType
+         */
+        currentSelection: string[];
+        hasSelectedNone: boolean;
+    } | undefined;
+};
+/**
+ * data length before delete
+ */
+declare const removeFromTableSelection: <T>(tableState: TableState, deletedObjects: T[], dataLength: number, identifierMapping: IdentifierMapping<T>) => TableState;
+declare const changeTableSelectionSingle: <T>(tableState: TableState, dataObject: T, dataLength: number, identifierMapping: IdentifierMapping<T>) => TableState;
+type TableSortingType = 'ascending' | 'descending';
+type TableSortingFunctionType<T> = (t1: T, t2: T) => number;
+type TableProps<T> = {
+    data: T[];
+    /**
+     * When using selection or pagination
+     */
+    stateManagement?: [TableState, (tableState: TableState) => void];
+    identifierMapping: IdentifierMapping<T>;
+    /**
+     * Only the cell itself no boilerplate <tr> or <th> required
+     */
+    header?: ReactElement[];
+    /**
+     * Only the cells of the row no boilerplate <tr> or <td> required
+     */
+    rowMappingToCells: (dataObject: T) => ReactElement[];
+    sorting?: [TableSortingFunctionType<T>, TableSortingType];
+    /**
+     * Always go to the page of this element
+     */
+    focusElement?: T;
+    className?: string;
+};
+/**
+ * A Basic stateless reusable table
+ * The state must be handled and saved with the updateTableState method
+ */
+declare const Table: <T>({ data, stateManagement, identifierMapping, header, rowMappingToCells, sorting, focusElement, className }: TableProps<T>) => react_jsx_runtime.JSX.Element;
+
+export { Table, type TableProps, type TableSortingFunctionType, type TableSortingType, type TableState, type TableStatePagination, type TableStateSelection, addElementToTable, changeTableSelectionSingle, defaultTableStatePagination, defaultTableStateSelection, isDataObjectSelected, pageForItem, removeFromTableSelection, updatePagination };

package/dist/components/Table.d.ts

@@ -1,25 +1,27 @@
-import type { ReactElement } from 'react';
-export type TableStatePagination = {
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactElement } from 'react';
+
+type TableStatePagination = {
     currentPage: number;
     entriesPerPage: number;
 };
-export declare const defaultTableStatePagination: {
+declare const defaultTableStatePagination: {
     currentPage: number;
     entriesPerPage: number;
 };
-export type TableStateSelection<T> = {
+type TableStateSelection<T> = {
     currentSelection: T[];
     hasSelectedAll: boolean;
     hasSelectedSome: boolean;
     hasSelectedNone: boolean;
 };
-export declare const defaultTableStateSelection: {
+declare const defaultTableStateSelection: {
     currentSelection: never[];
     hasSelectedAll: boolean;
     hasSelectedSome: boolean;
     hasSelectedNone: boolean;
 };
-export type TableState = {
+type TableState = {
     pagination?: TableStatePagination;
     selection?: {
         /**
@@ -32,10 +34,10 @@ export type TableState = {
     };
 };
 type IdentifierMapping<T> = (dataObject: T) => string;
-export declare const isDataObjectSelected: <T>(tableState: TableState, dataObject: T, identifierMapping: IdentifierMapping<T>) => boolean;
-export declare const pageForItem: <T>(data: T[], item: T, entriesPerPage: number, identifierMapping: IdentifierMapping<T>) => number;
-export declare const updatePagination: (pagination: TableStatePagination, dataLength: number) => TableStatePagination;
-export declare const addElementToTable: <T>(tableState: TableState, data: T[], dataObject: T, identifierMapping: IdentifierMapping<T>) => {
+declare const isDataObjectSelected: <T>(tableState: TableState, dataObject: T, identifierMapping: IdentifierMapping<T>) => boolean;
+declare const pageForItem: <T>(data: T[], item: T, entriesPerPage: number, identifierMapping: IdentifierMapping<T>) => number;
+declare const updatePagination: (pagination: TableStatePagination, dataLength: number) => TableStatePagination;
+declare const addElementToTable: <T>(tableState: TableState, data: T[], dataObject: T, identifierMapping: IdentifierMapping<T>) => {
     pagination: {
         currentPage: number;
         entriesPerPage: number;
@@ -53,11 +55,11 @@ export declare const addElementToTable: <T>(tableState: TableState, data: T[], d
 /**
  * data length before delete
  */
-export declare const removeFromTableSelection: <T>(tableState: TableState, deletedObjects: T[], dataLength: number, identifierMapping: IdentifierMapping<T>) => TableState;
-export declare const changeTableSelectionSingle: <T>(tableState: TableState, dataObject: T, dataLength: number, identifierMapping: IdentifierMapping<T>) => TableState;
-export type TableSortingType = 'ascending' | 'descending';
-export type TableSortingFunctionType<T> = (t1: T, t2: T) => number;
-export type TableProps<T> = {
+declare const removeFromTableSelection: <T>(tableState: TableState, deletedObjects: T[], dataLength: number, identifierMapping: IdentifierMapping<T>) => TableState;
+declare const changeTableSelectionSingle: <T>(tableState: TableState, dataObject: T, dataLength: number, identifierMapping: IdentifierMapping<T>) => TableState;
+type TableSortingType = 'ascending' | 'descending';
+type TableSortingFunctionType<T> = (t1: T, t2: T) => number;
+type TableProps<T> = {
     data: T[];
     /**
      * When using selection or pagination
@@ -83,5 +85,6 @@ export type TableProps<T> = {
  * A Basic stateless reusable table
  * The state must be handled and saved with the updateTableState method
  */
-export declare const Table: <T>({ data, stateManagement, identifierMapping, header, rowMappingToCells, sorting, focusElement, className }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
-export {};
+declare const Table: <T>({ data, stateManagement, identifierMapping, header, rowMappingToCells, sorting, focusElement, className }: TableProps<T>) => react_jsx_runtime.JSX.Element;
+
+export { Table, type TableProps, type TableSortingFunctionType, type TableSortingType, type TableState, type TableStatePagination, type TableStateSelection, addElementToTable, changeTableSelectionSingle, defaultTableStatePagination, defaultTableStateSelection, isDataObjectSelected, pageForItem, removeFromTableSelection, updatePagination };