@helpwave/hightide 0.0.12 → 0.0.15

package/dist/components/examples/TableExample.js

@@ -1,92 +1,853 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { addElementToTable, defaultTableStatePagination, defaultTableStateSelection, removeFromTableSelection, Table } from '../Table';
-import { Input } from '../user-input/Input';
-import { SolidButton, TextButton } from '../Button';
-import { SortButton } from '../SortButton';
-export const 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 }
-];
-const TableExample = ({ data: initialData }) => {
-    const [data, setData] = useState(initialData);
-    const [tableState, setTableState] = useState({
-        pagination: defaultTableStatePagination,
-        selection: defaultTableStateSelection
-    });
-    useEffect(() => {
-        setData(initialData);
-    }, [initialData]);
-    const [sorting, setSorting] = useState();
-    const [sortingKey, ascending] = sorting !== null && sorting !== void 0 ? sorting : ['', 'ascending'];
-    const idMapping = (data) => data.id;
-    const sortingFunctions = {
-        id: {
-            ascending: (t1, t2) => t1.id.localeCompare(t2.id),
-            descending: (t1, t2) => t1.id.localeCompare(t2.id) * -1,
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/examples/TableExample.tsx
+var TableExample_exports = {};
+__export(TableExample_exports, {
+  default: () => TableExample_default,
+  exampleData: () => exampleData
+});
+module.exports = __toCommonJS(TableExample_exports);
+var import_react7 = require("react");
+
+// src/components/Table.tsx
+var import_react_custom_scrollbars_2 = require("react-custom-scrollbars-2");
+var import_react4 = require("react");
+
+// src/util/noop.ts
+var noop = () => void 0;
+
+// src/components/user-input/Checkbox.tsx
+var import_react = require("react");
+var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"));
+var import_lucide_react = require("lucide-react");
+var import_clsx = __toESM(require("clsx"));
+
+// src/components/user-input/Label.tsx
+var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.jsx)("label", { ...props, children: children ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styleMapping[labelType], children: name }) });
+};
+
+// src/components/user-input/Checkbox.tsx
+var import_jsx_runtime2 = require("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__ */ (0, import_jsx_runtime2.jsxs)("div", { className: (0, import_clsx.default)("row justify-center items-center", containerClassName), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      CheckboxPrimitive.Root,
+      {
+        onCheckedChange: propagateChange,
+        checked,
+        disabled,
+        id,
+        className: (0, import_clsx.default)(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__ */ (0, import_jsx_runtime2.jsxs)(CheckboxPrimitive.Indicator, { children: [
+          checked === true && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Check, { className: innerIconSize }),
+          checked === "indeterminate" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Minus, { className: innerIconSize })
+        ] })
+      }
+    ),
+    label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Label, { ...label, className: (0, import_clsx.default)("cursor-pointer", label.className), htmlFor: id, onClick: changeValue })
+  ] });
+};
+
+// src/components/Pagination.tsx
+var import_lucide_react2 = require("lucide-react");
+var import_clsx2 = __toESM(require("clsx"));
+
+// src/hooks/useLanguage.tsx
+var import_react3 = require("react");
+
+// src/hooks/useLocalStorage.tsx
+var import_react2 = require("react");
+
+// src/hooks/useLanguage.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var DEFAULT_LANGUAGE = "en";
+var LanguageContext = (0, import_react3.createContext)({ language: DEFAULT_LANGUAGE, setLanguage: (v) => v });
+var useLanguage = () => (0, import_react3.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
+var import_jsx_runtime4 = require("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__ */ (0, import_jsx_runtime4.jsxs)("div", { className: (0, import_clsx2.default)("row", { "opacity-30": noPages }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { onClick: () => changePage(0), disabled: onFirstPage, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.ChevronFirst, { className: (0, import_clsx2.default)({ "opacity-30": onFirstPage }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { onClick: () => changePage(page - 1), disabled: onFirstPage, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.ChevronLeft, { className: (0, import_clsx2.default)({ "opacity-30": onFirstPage }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "min-w-[80px] justify-center mx-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "select-none text-right flex-1", children: noPages ? 0 : page + 1 }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "select-none mx-2", children: translation.of }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "select-none text-left flex-1", children: numberOfPages })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { onClick: () => changePage(page + 1), disabled: onLastPage || noPages, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.ChevronRight, { className: (0, import_clsx2.default)({ "opacity-30": onLastPage }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { onClick: () => changePage(numberOfPages - 1), disabled: onLastPage || noPages, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.ChevronLast, { className: (0, import_clsx2.default)({ "opacity-30": onLastPage }) }) })
+  ] });
+};
+
+// src/components/Table.tsx
+var import_clsx3 = __toESM(require("clsx"));
+var import_jsx_runtime5 = require("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] = (0, import_react4.useState)(0);
+  const tableRef = (0, import_react4.useRef)(null);
+  const calculateHeight = () => {
+    if (tableRef.current) {
+      const tableHeight = tableRef.current.offsetHeight;
+      const offset = 25;
+      setScrollbarsAutoHeightMin(tableHeight + offset);
+    }
+  };
+  (0, import_react4.useEffect)(() => {
+    calculateHeight();
+    const handleResize = () => {
+      calculateHeight();
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [data, currentPage]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_clsx3.default)("col gap-y-4 overflow-hidden", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_custom_scrollbars_2.Scrollbars, { autoHeight: true, autoHeightMin: scrollbarsAutoHeightMin, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("table", { ref: tableRef, className: "w-full mb-[12px]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tr", { className: headerRow, children: [
+        header && tableState.selection && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("th", { className: headerPaddingHead, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          ControlledCheckbox,
+          {
+            checked: tableState.selection.hasSelectedSome ? "indeterminate" : tableState.selection.hasSelectedAll,
+            onChange: () => updateTableState(changeTableSelectionAll(tableState, data, identifierMapping))
+          }
+        ) }),
+        header && header.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("th", { className: headerPaddingHead, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "row justify-start px-2", children: value }) }, `tableHeader${index}`))
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tbody", { children: shownElements.map((value, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tr", { children: [
+        tableState.selection && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { className: (0, import_clsx3.default)(cellPadding, { [headerPaddingBody]: rowIndex === 0 }), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          ControlledCheckbox,
+          {
+            checked: isDataObjectSelected(tableState, value, identifierMapping),
+            onChange: () => {
+              updateTableState(changeTableSelectionSingle(tableState, value, data.length, identifierMapping));
+            }
+          }
+        ) }),
+        rowMappingToCells(value).map((value1, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { className: (0, import_clsx3.default)(cellPadding, { [headerPaddingBody]: rowIndex === 0 }), children: value1 }, index))
+      ] }, identifierMapping(value))) })
+    ] }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "row justify-center", children: tableState.pagination && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Pagination, { page: currentPage, numberOfPages: pageCount, onPageChanged: (page) => updateTableState({
+      ...tableState,
+      pagination: { entriesPerPage, currentPage: page }
+    }) }) })
+  ] });
+};
+
+// src/components/user-input/Input.tsx
+var import_react6 = require("react");
+var import_clsx4 = __toESM(require("clsx"));
+
+// src/hooks/useSaveDelay.ts
+var import_react5 = require("react");
+function useSaveDelay(setNotificationStatus, delay) {
+  const [updateTimer, setUpdateTimer] = (0, import_react5.useState)(void 0);
+  const [notificationTimer, setNotificationTimer] = (0, import_react5.useState)(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);
+    }
+  };
+  (0, import_react5.useEffect)(() => {
+    return () => {
+      clearTimeout(updateTimer);
+      clearTimeout(notificationTimer);
+    };
+  }, []);
+  return { restartTimer, clearUpdateTimer };
+}
+var useSaveDelay_default = useSaveDelay;
+
+// src/components/user-input/Input.tsx
+var import_jsx_runtime6 = require("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 = (0, import_react6.useRef)(null);
+  (0, import_react6.useEffect)(() => {
+    if (restProps.autoFocus) {
+      ref.current?.focus();
+    }
+  }, [restProps.autoFocus]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: (0, import_clsx4.default)({ "w-full": expanded }, containerClassName), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Label, { ...label, htmlFor: id, className: (0, import_clsx4.default)("mb-1", label.className) }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "input",
+      {
+        ref,
+        value,
+        id,
+        type,
+        className: (0, import_clsx4.default)("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 = (0, import_react6.forwardRef)(function FormInput2({
+  id,
+  labelText,
+  errorText,
+  className,
+  labelClassName,
+  errorClassName,
+  containerClassName,
+  required,
+  ...restProps
+}, ref) {
+  const input = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "input",
+    {
+      ref,
+      id,
+      ...restProps,
+      className: (0, import_clsx4.default)(
+        "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
         },
-        name: {
-            ascending: (t1, t2) => t1.name.localeCompare(t2.name),
-            descending: (t1, t2) => t1.name.localeCompare(t2.name) * -1,
+        className
+      )
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: (0, import_clsx4.default)("flex flex-col gap-y-1", containerClassName), children: [
+    labelText && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { htmlFor: id, className: (0, import_clsx4.default)("textstyle-label-md", labelClassName), children: [
+      labelText,
+      required && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-primary font-bold", children: "*" })
+    ] }),
+    input,
+    errorText && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("label", { htmlFor: id, className: (0, import_clsx4.default)("text-negative", errorClassName), children: errorText })
+  ] });
+});
+
+// src/components/Button.tsx
+var import_clsx5 = __toESM(require("clsx"));
+var import_jsx_runtime7 = require("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__ */ (0, import_jsx_runtime7.jsxs)(
+    "button",
+    {
+      onClick: disabled ? void 0 : onClick,
+      disabled: disabled || onClick === void 0,
+      className: (0, import_clsx5.default)(
+        className,
+        {
+          "text-disabled-text bg-disabled-background": disabled,
+          [(0, import_clsx5.default)(colorClasses, "hover:brightness-90")]: !disabled
+        },
+        ButtonSizePaddings[size]
+      ),
+      ...restProps,
+      children: [
+        startIcon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "span",
+          {
+            className: (0, import_clsx5.default)({
+              [iconColorClasses]: !disabled,
+              [`text-disabled-icon`]: disabled
+            }),
+            children: startIcon
+          }
+        ),
+        children,
+        endIcon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "span",
+          {
+            className: (0, import_clsx5.default)({
+              [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__ */ (0, import_jsx_runtime7.jsxs)(
+    "button",
+    {
+      onClick: disabled ? void 0 : onClick,
+      disabled: disabled || onClick === void 0,
+      className: (0, import_clsx5.default)(
+        className,
+        {
+          "text-disabled-text": disabled,
+          [(0, import_clsx5.default)(colorClasses, "hover:bg-button-text-hover-background rounded-full")]: !disabled
         },
-        age: {
-            ascending: (t1, t2) => t1.age - t2.age,
-            descending: (t1, t2) => (t1.age - t2.age) * -1,
+        ButtonSizePaddings[size]
+      ),
+      ...restProps,
+      children: [
+        startIcon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "span",
+          {
+            className: (0, import_clsx5.default)({
+              [iconColorClasses]: !disabled,
+              [`text-disabled-icon`]: disabled
+            }),
+            children: startIcon
+          }
+        ),
+        children,
+        endIcon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "span",
+          {
+            className: (0, import_clsx5.default)({
+              [iconColorClasses]: !disabled,
+              [`text-disabled-icon`]: disabled
+            }),
+            children: endIcon
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/SortButton.tsx
+var import_lucide_react3 = require("lucide-react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var SortButton = ({
+  children,
+  ascending,
+  color,
+  onClick,
+  ...buttonProps
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    TextButton,
+    {
+      color,
+      onClick: () => onClick(ascending === "descending" ? "ascending" : "descending"),
+      ...buttonProps,
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "row gap-x-2", children: [
+        children,
+        ascending === "ascending" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.ChevronUp, {}) : !ascending ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.ChevronsUpDown, {}) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.ChevronDown, {})
+      ] })
+    }
+  );
+};
+
+// src/components/examples/TableExample.tsx
+var import_jsx_runtime9 = require("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] = (0, import_react7.useState)(initialData);
+  const [tableState, setTableState] = (0, import_react7.useState)({
+    pagination: defaultTableStatePagination,
+    selection: defaultTableStateSelection
+  });
+  (0, import_react7.useEffect)(() => {
+    setData(initialData);
+  }, [initialData]);
+  const [sorting, setSorting] = (0, import_react7.useState)();
+  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__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "col gap-y-12 items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      Table,
+      {
+        stateManagement: [tableState, (newTableState) => {
+          setTableState(newTableState);
+          setData(data);
+        }],
+        data,
+        identifierMapping: idMapping,
+        rowMappingToCells: (dataObject) => [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "textstyle-title-md w-[100px] text-ellipsis overflow-hidden block", children: dataObject.id }, "id"),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ControlledInput, { value: dataObject.name, onChange: (text) => {
+            setData(data.map((value) => value.id === dataObject.id ? { ...dataObject, name: text } : value));
+            setSorting(void 0);
+          } }, "name"),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(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__ */ (0, import_jsx_runtime9.jsx)(
+            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__ */ (0, import_jsx_runtime9.jsx)(
+            SortButton,
+            {
+              ascending: sortingKey === "id" ? ascending : void 0,
+              onClick: (newTableSorting) => {
+                setSorting(["id", newTableSorting]);
+                setData(data.sort(sortingFunctions.id[newTableSorting]));
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "textstyle-table-header", children: "Id" })
+            },
+            "headerId"
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            SortButton,
+            {
+              ascending: sortingKey === "name" ? ascending : void 0,
+              onClick: (newTableSorting) => {
+                setSorting(["name", newTableSorting]);
+                setData(data.sort(sortingFunctions.name[newTableSorting]));
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "textstyle-table-header", children: "Name" })
+            },
+            "name"
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            SortButton,
+            {
+              ascending: sortingKey === "age" ? ascending : void 0,
+              onClick: (newTableSorting) => {
+                setSorting(["age", newTableSorting]);
+                setData(data.sort(sortingFunctions.age[newTableSorting]));
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "textstyle-table-header", children: "age" }, "age")
+            },
+            "name"
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, {})
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "row gap-x-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        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"
         }
-    };
-    return (_jsxs("div", { className: "col gap-y-12 items-center", children: [_jsx(Table, { stateManagement: [tableState, (newTableState) => {
-                        setTableState(newTableState);
-                        setData(data);
-                    }], data: data, identifierMapping: idMapping, rowMappingToCells: dataObject => [
-                    _jsx("span", { className: "textstyle-title-md w-[100px] text-ellipsis overflow-hidden block", children: dataObject.id }, "id"),
-                    _jsx(Input, { value: dataObject.name, onChange: text => {
-                            setData(data.map(value => value.id === dataObject.id ? { ...dataObject, name: text } : value));
-                            setSorting(undefined);
-                        } }, "name"),
-                    _jsx(Input, { type: "number", value: dataObject.age.toString(), onChange: text => {
-                            setData(data.map(value => value.id === dataObject.id ? { ...dataObject, age: parseInt(text) } : value));
-                            setSorting(undefined);
-                        } }, "age"),
-                    _jsx(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: [
-                    _jsx(SortButton, { ascending: sortingKey === 'id' ? ascending : undefined, onClick: newTableSorting => {
-                            setSorting(['id', newTableSorting]);
-                            setData(data.sort(sortingFunctions.id[newTableSorting]));
-                        }, children: _jsx("span", { className: "textstyle-table-header", children: "Id" }) }, "headerId"),
-                    _jsx(SortButton, { ascending: sortingKey === 'name' ? ascending : undefined, onClick: newTableSorting => {
-                            setSorting(['name', newTableSorting]);
-                            setData(data.sort(sortingFunctions.name[newTableSorting]));
-                        }, children: _jsx("span", { className: "textstyle-table-header", children: "Name" }) }, "name"),
-                    _jsx(SortButton, { ascending: sortingKey === 'age' ? ascending : undefined, onClick: newTableSorting => {
-                            setSorting(['age', newTableSorting]);
-                            setData(data.sort(sortingFunctions.age[newTableSorting]));
-                        }, children: _jsx("span", { className: "textstyle-table-header", children: "age" }, "age") }, "name"),
-                    _jsx(_Fragment, {})
-                ] }), _jsxs("div", { className: "row gap-x-2", children: [_jsx(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' }), _jsx(TextButton, { className: "w-auto", onClick: () => {
-                            const selectedData = data.filter((d) => { var _a; return (_a = tableState.selection) === null || _a === void 0 ? void 0 : _a.currentSelection.includes(idMapping(d)); });
-                            const unselectedData = data.filter((d) => { var _a; return !((_a = tableState.selection) === null || _a === void 0 ? void 0 : _a.currentSelection.includes(idMapping(d))); });
-                            setData(unselectedData);
-                            setTableState(removeFromTableSelection(tableState, selectedData, data.length, idMapping));
-                        }, children: 'Remove all selected' })] })] }));
-};
-export default TableExample;
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        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;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  exampleData
+});
+//# sourceMappingURL=TableExample.js.map