@helpwave/hightide 0.0.13 → 0.0.15

package/dist/components/examples/TableExample.mjs

@@ -0,0 +1,823 @@
+// src/components/examples/TableExample.tsx
+import { useEffect as useEffect6, useState as useState7 } from "react";
+
+// src/components/Table.tsx
+import { Scrollbars } from "react-custom-scrollbars-2";
+import { useEffect as useEffect3, useRef, useState as useState4 } from "react";
+
+// src/util/noop.ts
+var noop = () => void 0;
+
+// src/components/user-input/Checkbox.tsx
+import { useState } from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check, Minus } from "lucide-react";
+import clsx from "clsx";
+
+// src/components/user-input/Label.tsx
+import { jsx } from "react/jsx-runtime";
+var styleMapping = {
+  labelSmall: "textstyle-label-sm",
+  labelMedium: "textstyle-label-md",
+  labelBig: "textstyle-label-lg"
+};
+var Label = ({
+  children,
+  name,
+  labelType = "labelSmall",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx("label", { ...props, children: children ? children : /* @__PURE__ */ jsx("span", { className: styleMapping[labelType], children: name }) });
+};
+
+// src/components/user-input/Checkbox.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var checkboxSizeMapping = {
+  small: "size-4",
+  medium: "size-6",
+  large: "size-8"
+};
+var checkboxIconSizeMapping = {
+  small: "size-3",
+  medium: "size-5",
+  large: "size-7"
+};
+var ControlledCheckbox = ({
+  id,
+  label,
+  checked,
+  disabled,
+  onChange,
+  onChangeTristate,
+  size = "medium",
+  className = "",
+  containerClassName
+}) => {
+  const usedSizeClass = checkboxSizeMapping[size];
+  const innerIconSize = checkboxIconSizeMapping[size];
+  const propagateChange = (checked2) => {
+    if (onChangeTristate) {
+      onChangeTristate(checked2);
+    }
+    if (onChange) {
+      onChange(checked2 === "indeterminate" ? false : checked2);
+    }
+  };
+  const changeValue = () => {
+    const newValue = checked === "indeterminate" ? false : !checked;
+    propagateChange(newValue);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: clsx("row justify-center items-center", containerClassName), children: [
+    /* @__PURE__ */ jsx2(
+      CheckboxPrimitive.Root,
+      {
+        onCheckedChange: propagateChange,
+        checked,
+        disabled,
+        id,
+        className: clsx(usedSizeClass, `items-center border-2 rounded outline-none focus:border-primary`, {
+          "text-disabled-text border-disabled-text": disabled,
+          "border-on-background": !disabled,
+          "bg-primary/30 border-primary text-primary": checked === true || checked === "indeterminate",
+          "hover:border-gray-400 focus:hover:border-primary": !checked
+        }, className),
+        children: /* @__PURE__ */ jsxs(CheckboxPrimitive.Indicator, { children: [
+          checked === true && /* @__PURE__ */ jsx2(Check, { className: innerIconSize }),
+          checked === "indeterminate" && /* @__PURE__ */ jsx2(Minus, { className: innerIconSize })
+        ] })
+      }
+    ),
+    label && /* @__PURE__ */ jsx2(Label, { ...label, className: clsx("cursor-pointer", label.className), htmlFor: id, onClick: changeValue })
+  ] });
+};
+
+// src/components/Pagination.tsx
+import { ChevronLast, ChevronLeft, ChevronFirst, ChevronRight } from "lucide-react";
+import clsx2 from "clsx";
+
+// src/hooks/useLanguage.tsx
+import { createContext, useContext, useEffect as useEffect2, useState as useState3 } from "react";
+
+// src/hooks/useLocalStorage.tsx
+import { useCallback, useEffect, useState as useState2 } from "react";
+
+// src/hooks/useLanguage.tsx
+import { jsx as jsx3 } 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/components/Pagination.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var defaultPaginationTranslations = {
+  en: {
+    of: "of"
+  },
+  de: {
+    of: "von"
+  }
+};
+var Pagination = ({
+  overwriteTranslation,
+  page,
+  numberOfPages,
+  onPageChanged
+}) => {
+  const translation = useTranslation(defaultPaginationTranslations, overwriteTranslation);
+  const changePage = (page2) => {
+    onPageChanged(page2);
+  };
+  const noPages = numberOfPages === 0;
+  const onFirstPage = page === 0 && !noPages;
+  const onLastPage = page === numberOfPages - 1;
+  return /* @__PURE__ */ jsxs2("div", { className: clsx2("row", { "opacity-30": noPages }), children: [
+    /* @__PURE__ */ jsx4("button", { onClick: () => changePage(0), disabled: onFirstPage, children: /* @__PURE__ */ jsx4(ChevronFirst, { className: clsx2({ "opacity-30": onFirstPage }) }) }),
+    /* @__PURE__ */ jsx4("button", { onClick: () => changePage(page - 1), disabled: onFirstPage, children: /* @__PURE__ */ jsx4(ChevronLeft, { className: clsx2({ "opacity-30": onFirstPage }) }) }),
+    /* @__PURE__ */ jsxs2("div", { className: "min-w-[80px] justify-center mx-2", children: [
+      /* @__PURE__ */ jsx4("span", { className: "select-none text-right flex-1", children: noPages ? 0 : page + 1 }),
+      /* @__PURE__ */ jsx4("span", { className: "select-none mx-2", children: translation.of }),
+      /* @__PURE__ */ jsx4("span", { className: "select-none text-left flex-1", children: numberOfPages })
+    ] }),
+    /* @__PURE__ */ jsx4("button", { onClick: () => changePage(page + 1), disabled: onLastPage || noPages, children: /* @__PURE__ */ jsx4(ChevronRight, { className: clsx2({ "opacity-30": onLastPage }) }) }),
+    /* @__PURE__ */ jsx4("button", { onClick: () => changePage(numberOfPages - 1), disabled: onLastPage || noPages, children: /* @__PURE__ */ jsx4(ChevronLast, { className: clsx2({ "opacity-30": onLastPage }) }) })
+  ] });
+};
+
+// src/components/Table.tsx
+import clsx3 from "clsx";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var defaultTableStatePagination = {
+  currentPage: 0,
+  entriesPerPage: 5
+};
+var defaultTableStateSelection = {
+  currentSelection: [],
+  hasSelectedAll: false,
+  hasSelectedSome: false,
+  hasSelectedNone: true
+};
+var isDataObjectSelected = (tableState, dataObject, identifierMapping) => {
+  if (!tableState.selection) {
+    return false;
+  }
+  return !!tableState.selection.currentSelection.find((value) => value.localeCompare(identifierMapping(dataObject)) === 0);
+};
+var pageForItem = (data, item, entriesPerPage, identifierMapping) => {
+  const index = data.findIndex((value) => identifierMapping(value) === identifierMapping(item));
+  if (index !== -1) {
+    return Math.floor(index / entriesPerPage);
+  }
+  console.warn("item doesn't exist on data", item, data);
+  return 0;
+};
+var updatePagination = (pagination, dataLength) => ({
+  ...pagination,
+  currentPage: Math.min(Math.max(Math.ceil(dataLength / pagination.entriesPerPage) - 1, 0), pagination.currentPage)
+});
+var addElementToTable = (tableState, data, dataObject, identifierMapping) => {
+  return {
+    ...tableState,
+    pagination: tableState.pagination ? {
+      ...tableState.pagination,
+      currentPage: pageForItem(data, dataObject, tableState.pagination.entriesPerPage, identifierMapping)
+    } : void 0,
+    selection: tableState.selection ? {
+      ...tableState.selection,
+      hasSelectedAll: false,
+      hasSelectedSome: tableState.selection.hasSelectedAll || tableState.selection.hasSelectedSome
+    } : void 0
+  };
+};
+var removeFromTableSelection = (tableState, deletedObjects, dataLength, identifierMapping) => {
+  if (!tableState.selection) {
+    return tableState;
+  }
+  const deletedObjectIds = deletedObjects.map(identifierMapping);
+  const elementsBefore = tableState.selection.currentSelection.length;
+  const currentSelection = tableState.selection.currentSelection.filter((value) => !deletedObjectIds.includes(value));
+  dataLength -= elementsBefore - currentSelection.length;
+  return {
+    ...tableState,
+    selection: {
+      currentSelection,
+      hasSelectedAll: currentSelection.length === dataLength && dataLength !== 0,
+      hasSelectedSome: currentSelection.length > 0 && currentSelection.length !== dataLength,
+      hasSelectedNone: currentSelection.length === 0
+    },
+    pagination: tableState.pagination ? updatePagination(tableState.pagination, dataLength) : void 0
+  };
+};
+var changeTableSelectionSingle = (tableState, dataObject, dataLength, identifierMapping) => {
+  if (!tableState.selection) {
+    return tableState;
+  }
+  const hasSelectedObject = isDataObjectSelected(tableState, dataObject, identifierMapping);
+  let currentSelection = [...tableState.selection.currentSelection, identifierMapping(dataObject)];
+  if (hasSelectedObject) {
+    currentSelection = tableState.selection.currentSelection.filter((value) => value.localeCompare(identifierMapping(dataObject)) !== 0);
+  }
+  return {
+    ...tableState,
+    selection: {
+      currentSelection,
+      hasSelectedAll: currentSelection.length === dataLength,
+      hasSelectedSome: currentSelection.length > 0 && currentSelection.length !== dataLength,
+      hasSelectedNone: currentSelection.length === 0
+    }
+  };
+};
+var changeTableSelectionAll = (tableState, data, identifierMapping) => {
+  if (!tableState.selection) {
+    return tableState;
+  }
+  if (data.length === 0) {
+    return {
+      ...tableState,
+      selection: {
+        currentSelection: [],
+        hasSelectedAll: false,
+        hasSelectedSome: false,
+        hasSelectedNone: true
+      }
+    };
+  }
+  const hasSelectedAll = !(tableState.selection.hasSelectedSome || tableState.selection.hasSelectedAll);
+  return {
+    ...tableState,
+    selection: {
+      currentSelection: hasSelectedAll ? data.map(identifierMapping) : [],
+      hasSelectedAll,
+      hasSelectedSome: false,
+      hasSelectedNone: !hasSelectedAll
+    }
+  };
+};
+var Table = ({
+  data,
+  stateManagement = [{}, noop],
+  identifierMapping,
+  header,
+  rowMappingToCells,
+  sorting,
+  focusElement,
+  className
+}) => {
+  const sortedData = [...data];
+  if (sorting) {
+    const [sortingFunction, sortingType] = sorting;
+    sortedData.sort((a, b) => sortingFunction(a, b) * (sortingType === "ascending" ? 1 : -1));
+  }
+  let currentPage = 0;
+  let pageCount = 1;
+  let entriesPerPage = 5;
+  const [tableState, updateTableState] = stateManagement;
+  let shownElements = sortedData;
+  if (tableState?.pagination) {
+    if (tableState.pagination.entriesPerPage < 1) {
+      console.error("tableState.pagination.entriesPerPage must be >= 1", tableState.pagination.entriesPerPage);
+    }
+    entriesPerPage = Math.max(1, tableState.pagination.entriesPerPage);
+    pageCount = Math.ceil(sortedData.length / entriesPerPage);
+    if (tableState.pagination.currentPage < 0 || tableState.pagination.currentPage >= pageCount && pageCount !== 0) {
+      console.error(
+        "tableState.pagination.currentPage < 0 || (tableState.pagination.currentPage >= pageCount && pageCount !== 0) must be fullfilled",
+        [`pageCount: ${pageCount}`, `tableState.pagination.currentPage: ${tableState.pagination.currentPage}`]
+      );
+    } else {
+      currentPage = tableState.pagination.currentPage;
+    }
+    if (focusElement) {
+      currentPage = pageForItem(sortedData, focusElement, entriesPerPage, identifierMapping);
+    }
+    shownElements = sortedData.slice(currentPage * entriesPerPage, Math.min(sortedData.length, (currentPage + 1) * entriesPerPage));
+  } else {
+    currentPage = 0;
+  }
+  const headerRow = "border-b-2 border-gray-300";
+  const headerPaddingHead = "pb-2";
+  const headerPaddingBody = "pt-2";
+  const cellPadding = "py-1 px-2";
+  const [scrollbarsAutoHeightMin, setScrollbarsAutoHeightMin] = useState4(0);
+  const tableRef = useRef(null);
+  const calculateHeight = () => {
+    if (tableRef.current) {
+      const tableHeight = tableRef.current.offsetHeight;
+      const offset = 25;
+      setScrollbarsAutoHeightMin(tableHeight + offset);
+    }
+  };
+  useEffect3(() => {
+    calculateHeight();
+    const handleResize = () => {
+      calculateHeight();
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [data, currentPage]);
+  return /* @__PURE__ */ jsxs3("div", { className: clsx3("col gap-y-4 overflow-hidden", className), children: [
+    /* @__PURE__ */ jsx5("div", { children: /* @__PURE__ */ jsx5(Scrollbars, { autoHeight: true, autoHeightMin: scrollbarsAutoHeightMin, children: /* @__PURE__ */ jsxs3("table", { ref: tableRef, className: "w-full mb-[12px]", children: [
+      /* @__PURE__ */ jsx5("thead", { children: /* @__PURE__ */ jsxs3("tr", { className: headerRow, children: [
+        header && tableState.selection && /* @__PURE__ */ jsx5("th", { className: headerPaddingHead, children: /* @__PURE__ */ jsx5(
+          ControlledCheckbox,
+          {
+            checked: tableState.selection.hasSelectedSome ? "indeterminate" : tableState.selection.hasSelectedAll,
+            onChange: () => updateTableState(changeTableSelectionAll(tableState, data, identifierMapping))
+          }
+        ) }),
+        header && header.map((value, index) => /* @__PURE__ */ jsx5("th", { className: headerPaddingHead, children: /* @__PURE__ */ jsx5("div", { className: "row justify-start px-2", children: value }) }, `tableHeader${index}`))
+      ] }) }),
+      /* @__PURE__ */ jsx5("tbody", { children: shownElements.map((value, rowIndex) => /* @__PURE__ */ jsxs3("tr", { children: [
+        tableState.selection && /* @__PURE__ */ jsx5("td", { className: clsx3(cellPadding, { [headerPaddingBody]: rowIndex === 0 }), children: /* @__PURE__ */ jsx5(
+          ControlledCheckbox,
+          {
+            checked: isDataObjectSelected(tableState, value, identifierMapping),
+            onChange: () => {
+              updateTableState(changeTableSelectionSingle(tableState, value, data.length, identifierMapping));
+            }
+          }
+        ) }),
+        rowMappingToCells(value).map((value1, index) => /* @__PURE__ */ jsx5("td", { className: clsx3(cellPadding, { [headerPaddingBody]: rowIndex === 0 }), children: value1 }, index))
+      ] }, identifierMapping(value))) })
+    ] }) }) }),
+    /* @__PURE__ */ jsx5("div", { className: "row justify-center", children: tableState.pagination && /* @__PURE__ */ jsx5(Pagination, { page: currentPage, numberOfPages: pageCount, onPageChanged: (page) => updateTableState({
+      ...tableState,
+      pagination: { entriesPerPage, currentPage: page }
+    }) }) })
+  ] });
+};
+
+// src/components/user-input/Input.tsx
+import {
+  useEffect as useEffect5,
+  useRef as useRef2,
+  useState as useState6,
+  forwardRef
+} from "react";
+import clsx4 from "clsx";
+
+// src/hooks/useSaveDelay.ts
+import { useEffect as useEffect4, useState as useState5 } from "react";
+function useSaveDelay(setNotificationStatus, delay) {
+  const [updateTimer, setUpdateTimer] = useState5(void 0);
+  const [notificationTimer, setNotificationTimer] = useState5(void 0);
+  const restartTimer = (onSave) => {
+    clearTimeout(updateTimer);
+    setUpdateTimer(setTimeout(() => {
+      onSave();
+      setNotificationStatus(true);
+      clearTimeout(notificationTimer);
+      setNotificationTimer(setTimeout(() => {
+        setNotificationStatus(false);
+        clearTimeout(notificationTimer);
+      }, delay));
+      clearTimeout(updateTimer);
+    }, delay));
+  };
+  const clearUpdateTimer = (hasSaved = true) => {
+    clearTimeout(updateTimer);
+    if (hasSaved) {
+      setNotificationStatus(true);
+      clearTimeout(notificationTimer);
+      setNotificationTimer(setTimeout(() => {
+        setNotificationStatus(false);
+        clearTimeout(notificationTimer);
+      }, delay));
+    } else {
+      setNotificationStatus(false);
+    }
+  };
+  useEffect4(() => {
+    return () => {
+      clearTimeout(updateTimer);
+      clearTimeout(notificationTimer);
+    };
+  }, []);
+  return { restartTimer, clearUpdateTimer };
+}
+var useSaveDelay_default = useSaveDelay;
+
+// src/components/user-input/Input.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var ControlledInput = ({
+  id,
+  type = "text",
+  value,
+  label,
+  onChange = noop,
+  onChangeEvent = noop,
+  className = "",
+  onEditCompleted,
+  expanded = true,
+  onBlur,
+  containerClassName,
+  ...restProps
+}) => {
+  const {
+    restartTimer,
+    clearUpdateTimer
+  } = useSaveDelay_default(() => void 0, 3e3);
+  const ref = useRef2(null);
+  useEffect5(() => {
+    if (restProps.autoFocus) {
+      ref.current?.focus();
+    }
+  }, [restProps.autoFocus]);
+  return /* @__PURE__ */ jsxs4("div", { className: clsx4({ "w-full": expanded }, containerClassName), children: [
+    label && /* @__PURE__ */ jsx6(Label, { ...label, htmlFor: id, className: clsx4("mb-1", label.className) }),
+    /* @__PURE__ */ jsx6(
+      "input",
+      {
+        ref,
+        value,
+        id,
+        type,
+        className: clsx4("block bg-surface text-on-surface px-3 py-2 rounded-md w-full border-2 border-gray-200 hover:border-primary focus:outline-none focus:border-primary focus:ring-primary", className),
+        onBlur: (event) => {
+          if (onBlur) {
+            onBlur(event);
+          }
+          if (onEditCompleted) {
+            onEditCompleted(event.target.value, event);
+            clearUpdateTimer();
+          }
+        },
+        onChange: (e) => {
+          const value2 = e.target.value;
+          if (onEditCompleted) {
+            restartTimer(() => {
+              onEditCompleted(value2, e);
+              clearUpdateTimer();
+            });
+          }
+          onChange(value2, e);
+          onChangeEvent(e);
+        },
+        ...restProps
+      }
+    )
+  ] });
+};
+var FormInput = forwardRef(function FormInput2({
+  id,
+  labelText,
+  errorText,
+  className,
+  labelClassName,
+  errorClassName,
+  containerClassName,
+  required,
+  ...restProps
+}, ref) {
+  const input = /* @__PURE__ */ jsx6(
+    "input",
+    {
+      ref,
+      id,
+      ...restProps,
+      className: clsx4(
+        "block bg-surface text-on-surface px-3 py-2 rounded-md w-full border-2 border-gray-200 hover:border-primary focus:outline-none focus:border-primary focus:ring-primary",
+        {
+          "focus:border-primary focus:ring-primary": !errorText,
+          "focus:border-negative focus:ring-negative text-negative": !!errorText
+        },
+        className
+      )
+    }
+  );
+  return /* @__PURE__ */ jsxs4("div", { className: clsx4("flex flex-col gap-y-1", containerClassName), children: [
+    labelText && /* @__PURE__ */ jsxs4("label", { htmlFor: id, className: clsx4("textstyle-label-md", labelClassName), children: [
+      labelText,
+      required && /* @__PURE__ */ jsx6("span", { className: "text-primary font-bold", children: "*" })
+    ] }),
+    input,
+    errorText && /* @__PURE__ */ jsx6("label", { htmlFor: id, className: clsx4("text-negative", errorClassName), children: errorText })
+  ] });
+});
+
+// src/components/Button.tsx
+import clsx5 from "clsx";
+import { jsx as jsx7, jsxs as jsxs5 } 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__ */ jsxs5(
+    "button",
+    {
+      onClick: disabled ? void 0 : onClick,
+      disabled: disabled || onClick === void 0,
+      className: clsx5(
+        className,
+        {
+          "text-disabled-text bg-disabled-background": disabled,
+          [clsx5(colorClasses, "hover:brightness-90")]: !disabled
+        },
+        ButtonSizePaddings[size]
+      ),
+      ...restProps,
+      children: [
+        startIcon && /* @__PURE__ */ jsx7(
+          "span",
+          {
+            className: clsx5({
+              [iconColorClasses]: !disabled,
+              [`text-disabled-icon`]: disabled
+            }),
+            children: startIcon
+          }
+        ),
+        children,
+        endIcon && /* @__PURE__ */ jsx7(
+          "span",
+          {
+            className: clsx5({
+              [iconColorClasses]: !disabled,
+              [`text-disabled-icon`]: disabled
+            }),
+            children: endIcon
+          }
+        )
+      ]
+    }
+  );
+};
+var TextButton = ({
+  children,
+  disabled = false,
+  color = "neutral",
+  size = "medium",
+  startIcon,
+  endIcon,
+  onClick,
+  className,
+  ...restProps
+}) => {
+  const colorClasses = {
+    negative: "bg-transparent text-button-text-negative-text",
+    neutral: "bg-transparent text-button-text-neutral-text"
+  }[color];
+  const iconColorClasses = {
+    negative: "text-button-text-negative-icon",
+    neutral: "text-button-text-neutral-icon"
+  }[color];
+  return /* @__PURE__ */ jsxs5(
+    "button",
+    {
+      onClick: disabled ? void 0 : onClick,
+      disabled: disabled || onClick === void 0,
+      className: clsx5(
+        className,
+        {
+          "text-disabled-text": disabled,
+          [clsx5(colorClasses, "hover:bg-button-text-hover-background rounded-full")]: !disabled
+        },
+        ButtonSizePaddings[size]
+      ),
+      ...restProps,
+      children: [
+        startIcon && /* @__PURE__ */ jsx7(
+          "span",
+          {
+            className: clsx5({
+              [iconColorClasses]: !disabled,
+              [`text-disabled-icon`]: disabled
+            }),
+            children: startIcon
+          }
+        ),
+        children,
+        endIcon && /* @__PURE__ */ jsx7(
+          "span",
+          {
+            className: clsx5({
+              [iconColorClasses]: !disabled,
+              [`text-disabled-icon`]: disabled
+            }),
+            children: endIcon
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/SortButton.tsx
+import { ChevronDown, ChevronsUpDown, ChevronUp } from "lucide-react";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var SortButton = ({
+  children,
+  ascending,
+  color,
+  onClick,
+  ...buttonProps
+}) => {
+  return /* @__PURE__ */ jsx8(
+    TextButton,
+    {
+      color,
+      onClick: () => onClick(ascending === "descending" ? "ascending" : "descending"),
+      ...buttonProps,
+      children: /* @__PURE__ */ jsxs6("div", { className: "row gap-x-2", children: [
+        children,
+        ascending === "ascending" ? /* @__PURE__ */ jsx8(ChevronUp, {}) : !ascending ? /* @__PURE__ */ jsx8(ChevronsUpDown, {}) : /* @__PURE__ */ jsx8(ChevronDown, {})
+      ] })
+    }
+  );
+};
+
+// src/components/examples/TableExample.tsx
+import { Fragment, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var exampleData = [
+  { id: "data1", name: "Name 1", age: 23 },
+  { id: "data2", name: "Name 2", age: 21 },
+  { id: "data3", name: "Name 3", age: 32 },
+  { id: "data4", name: "Name 4", age: 42 },
+  { id: "data5", name: "Name 5", age: 17 },
+  { id: "data6", name: "Name 6", age: 26 },
+  { id: "data7", name: "Name 7", age: 19 },
+  { id: "data8", name: "Name 8", age: 31 }
+];
+var TableExample = ({ data: initialData }) => {
+  const [data, setData] = useState7(initialData);
+  const [tableState, setTableState] = useState7({
+    pagination: defaultTableStatePagination,
+    selection: defaultTableStateSelection
+  });
+  useEffect6(() => {
+    setData(initialData);
+  }, [initialData]);
+  const [sorting, setSorting] = useState7();
+  const [sortingKey, ascending] = sorting ?? ["", "ascending"];
+  const idMapping = (data2) => data2.id;
+  const sortingFunctions = {
+    id: {
+      ascending: (t1, t2) => t1.id.localeCompare(t2.id),
+      descending: (t1, t2) => t1.id.localeCompare(t2.id) * -1
+    },
+    name: {
+      ascending: (t1, t2) => t1.name.localeCompare(t2.name),
+      descending: (t1, t2) => t1.name.localeCompare(t2.name) * -1
+    },
+    age: {
+      ascending: (t1, t2) => t1.age - t2.age,
+      descending: (t1, t2) => (t1.age - t2.age) * -1
+    }
+  };
+  return /* @__PURE__ */ jsxs7("div", { className: "col gap-y-12 items-center", children: [
+    /* @__PURE__ */ jsx9(
+      Table,
+      {
+        stateManagement: [tableState, (newTableState) => {
+          setTableState(newTableState);
+          setData(data);
+        }],
+        data,
+        identifierMapping: idMapping,
+        rowMappingToCells: (dataObject) => [
+          /* @__PURE__ */ jsx9("span", { className: "textstyle-title-md w-[100px] text-ellipsis overflow-hidden block", children: dataObject.id }, "id"),
+          /* @__PURE__ */ jsx9(ControlledInput, { value: dataObject.name, onChange: (text) => {
+            setData(data.map((value) => value.id === dataObject.id ? { ...dataObject, name: text } : value));
+            setSorting(void 0);
+          } }, "name"),
+          /* @__PURE__ */ jsx9(ControlledInput, { type: "number", value: dataObject.age.toString(), onChange: (text) => {
+            setData(data.map((value) => value.id === dataObject.id ? { ...dataObject, age: parseInt(text) } : value));
+            setSorting(void 0);
+          } }, "age"),
+          /* @__PURE__ */ jsx9(
+            TextButton,
+            {
+              color: "negative",
+              onClick: () => {
+                const newData = data.filter((value) => value.id !== dataObject.id);
+                setData(newData);
+                setTableState(removeFromTableSelection(tableState, [dataObject], data.length, idMapping));
+              },
+              children: "Delete"
+            },
+            "delete"
+          )
+        ],
+        header: [
+          /* @__PURE__ */ jsx9(
+            SortButton,
+            {
+              ascending: sortingKey === "id" ? ascending : void 0,
+              onClick: (newTableSorting) => {
+                setSorting(["id", newTableSorting]);
+                setData(data.sort(sortingFunctions.id[newTableSorting]));
+              },
+              children: /* @__PURE__ */ jsx9("span", { className: "textstyle-table-header", children: "Id" })
+            },
+            "headerId"
+          ),
+          /* @__PURE__ */ jsx9(
+            SortButton,
+            {
+              ascending: sortingKey === "name" ? ascending : void 0,
+              onClick: (newTableSorting) => {
+                setSorting(["name", newTableSorting]);
+                setData(data.sort(sortingFunctions.name[newTableSorting]));
+              },
+              children: /* @__PURE__ */ jsx9("span", { className: "textstyle-table-header", children: "Name" })
+            },
+            "name"
+          ),
+          /* @__PURE__ */ jsx9(
+            SortButton,
+            {
+              ascending: sortingKey === "age" ? ascending : void 0,
+              onClick: (newTableSorting) => {
+                setSorting(["age", newTableSorting]);
+                setData(data.sort(sortingFunctions.age[newTableSorting]));
+              },
+              children: /* @__PURE__ */ jsx9("span", { className: "textstyle-table-header", children: "age" }, "age")
+            },
+            "name"
+          ),
+          /* @__PURE__ */ jsx9(Fragment, {})
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs7("div", { className: "row gap-x-2", children: [
+      /* @__PURE__ */ jsx9(
+        SolidButton,
+        {
+          className: "w-auto",
+          onClick: () => {
+            const newData = {
+              id: Math.random().toString(),
+              name: "Name " + data.length,
+              age: Math.ceil(Math.random() * 100)
+            };
+            const withNewData = [...data, newData];
+            const sorted = sortingKey ? withNewData.sort(sortingFunctions[sortingKey][ascending]) : withNewData;
+            setData(sorted);
+            setTableState(addElementToTable(tableState, sorted, newData, idMapping));
+          },
+          children: "Add Data"
+        }
+      ),
+      /* @__PURE__ */ jsx9(
+        TextButton,
+        {
+          className: "w-auto",
+          onClick: () => {
+            const selectedData = data.filter((d) => tableState.selection?.currentSelection.includes(idMapping(d)));
+            const unselectedData = data.filter((d) => !tableState.selection?.currentSelection.includes(idMapping(d)));
+            setData(unselectedData);
+            setTableState(removeFromTableSelection(tableState, selectedData, data.length, idMapping));
+          },
+          children: "Remove all selected"
+        }
+      )
+    ] })
+  ] });
+};
+var TableExample_default = TableExample;
+export {
+  TableExample_default as default,
+  exampleData
+};
+//# sourceMappingURL=TableExample.mjs.map