@helpwave/hightide 0.0.15 → 0.0.17

package/dist/components/examples/TableExample.mjs

@@ -1,823 +0,0 @@
-// 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