@helpwave/hightide 0.0.13 → 0.0.16

package/dist/components/TimeDisplay.mjs

@@ -0,0 +1,109 @@
+// src/hooks/useLanguage.tsx
+import { createContext, useContext, useEffect as useEffect2, useState as useState2 } from "react";
+
+// src/hooks/useLocalStorage.tsx
+import { useCallback, useEffect, useState } from "react";
+
+// src/hooks/useLanguage.tsx
+import { jsx } from "react/jsx-runtime";
+var DEFAULT_LANGUAGE = "en";
+var LanguageContext = createContext({ language: DEFAULT_LANGUAGE, setLanguage: (v) => v });
+var useLanguage = () => useContext(LanguageContext);
+
+// src/hooks/useTranslation.ts
+var useTranslation = (defaults, translationOverwrite = {}) => {
+  const { language: languageProp, translation: overwrite } = translationOverwrite;
+  const { language: inferredLanguage } = useLanguage();
+  const usedLanguage = languageProp ?? inferredLanguage;
+  let defaultValues = defaults[usedLanguage];
+  if (overwrite && overwrite[usedLanguage]) {
+    defaultValues = { ...defaultValues, ...overwrite[usedLanguage] };
+  }
+  return defaultValues;
+};
+
+// src/components/TimeDisplay.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var defaultTimeDisplayTranslations = {
+  en: {
+    today: "today",
+    yesterday: "yesterday",
+    tomorrow: "tomorrow",
+    inDays: (days) => `in ${days} days`,
+    agoDays: (days) => `${days} days ago`,
+    january: "January",
+    february: "February",
+    march: "March",
+    april: "April",
+    may: "May",
+    june: "June",
+    july: "July",
+    august: "August",
+    september: "September",
+    october: "October",
+    november: "November",
+    december: "December"
+  },
+  de: {
+    today: "heute",
+    yesterday: "gestern",
+    tomorrow: "morgen",
+    inDays: (days) => `in ${days} Tagen`,
+    agoDays: (days) => `vor ${days} Tagen`,
+    january: "Januar",
+    february: "Februar",
+    march: "M\xE4rz",
+    april: "April",
+    may: "Mai",
+    june: "Juni",
+    july: "Juli",
+    august: "August",
+    september: "September",
+    october: "October",
+    november: "November",
+    december: "December"
+  }
+};
+var TimeDisplay = ({
+  overwriteTranslation,
+  date,
+  mode = "daysFromToday"
+}) => {
+  const translation = useTranslation(defaultTimeDisplayTranslations, overwriteTranslation);
+  const difference = (/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0).valueOf() - new Date(date).setHours(0, 0, 0, 0).valueOf();
+  const isBefore = difference > 0;
+  const differenceInDays = Math.floor(Math.abs(difference) / (1e3 * 3600 * 24));
+  let displayString;
+  if (differenceInDays === 0) {
+    displayString = translation.today;
+  } else if (differenceInDays === 1) {
+    displayString = isBefore ? translation.yesterday : translation.tomorrow;
+  } else {
+    displayString = isBefore ? translation.agoDays(differenceInDays) : translation.inDays(differenceInDays);
+  }
+  const monthToTranslation = {
+    0: translation.january,
+    1: translation.february,
+    2: translation.march,
+    3: translation.april,
+    4: translation.may,
+    5: translation.june,
+    6: translation.july,
+    7: translation.august,
+    8: translation.september,
+    9: translation.october,
+    10: translation.november,
+    11: translation.december
+  };
+  let fullString;
+  if (mode === "daysFromToday") {
+    fullString = `${date.getHours().toString().padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")} - ${displayString}`;
+  } else {
+    fullString = `${date.getDate()}. ${monthToTranslation[date.getMonth()]} ${date.getFullYear()}`;
+  }
+  return /* @__PURE__ */ jsx2("span", { children: fullString });
+};
+export {
+  TimeDisplay
+};
+//# sourceMappingURL=TimeDisplay.mjs.map

package/dist/components/TimeDisplay.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useLanguage.tsx","../../src/hooks/useLocalStorage.tsx","../../src/hooks/useTranslation.ts","../../src/components/TimeDisplay.tsx"],"sourcesContent":["import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport useLocalStorage from './useLocalStorage'\n\nexport const languages = ['en', 'de'] as const\nexport type Languages = typeof languages[number]\nexport const languagesLocalNames: Record<Languages, string> = {\n  en: 'English',\n  de: 'Deutsch',\n}\n\nexport const DEFAULT_LANGUAGE = 'en'\n\nexport type LanguageContextValue = {\n  language: Languages,\n  setLanguage: Dispatch<SetStateAction<Languages>>,\n}\n\nexport const LanguageContext = createContext<LanguageContextValue>({ language: DEFAULT_LANGUAGE, setLanguage: (v) => v })\n\nexport const useLanguage = () => useContext(LanguageContext)\n\nexport const useLocale = (overWriteLanguage?: Languages) => {\n  const { language } = useLanguage()\n  const mapping: Record<Languages, string> = {\n    en: 'en-US',\n    de: 'de-DE'\n  }\n  return mapping[overWriteLanguage ?? language]\n}\n\ntype ProvideLanguageProps = {\n  initialLanguage?: Languages,\n}\n\nexport const ProvideLanguage = ({ initialLanguage, children }: PropsWithChildren<ProvideLanguageProps>) => {\n  const [language, setLanguage] = useState<Languages>(initialLanguage ?? DEFAULT_LANGUAGE)\n  const [storedLanguage, setStoredLanguage] = useLocalStorage<Languages>('language', initialLanguage ?? DEFAULT_LANGUAGE)\n\n  useEffect(() => {\n    if(language !== initialLanguage && initialLanguage){\n      console.warn('LanguageProvider initial state changed: Prefer using useLanguages\\'s setLanguage instead')\n      setLanguage(initialLanguage)\n    }\n  }, [initialLanguage]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  useEffect(() => {\n    // TODO set locale of html tag here as well\n    setStoredLanguage(language)\n  }, [language, setStoredLanguage])\n\n  useEffect(() => {\n    if (storedLanguage !== null) {\n      setLanguage(storedLanguage)\n      return\n    }\n\n    const languagesToTestAgainst = Object.values(languages)\n\n    const matchingBrowserLanguages = window.navigator.languages\n      .map(language => languagesToTestAgainst.find((test) => language === test || language.split('-')[0] === test))\n      .filter(entry => entry !== undefined)\n\n    if (matchingBrowserLanguages.length === 0) return\n\n    const firstMatch = matchingBrowserLanguages[0] as Languages\n    setLanguage(firstMatch)\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return (\n    <LanguageContext.Provider value={{\n      language,\n      setLanguage\n    }}>\n      {children}\n    </LanguageContext.Provider>\n  )\n}\n","import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nconst useLocalStorage = <T, >(key: string, initValue: T): [T, SetValue<T>] => {\n  const get = useCallback((): T => {\n    if (typeof window === 'undefined') {\n      return initValue\n    }\n    const storageService = new LocalStorageService()\n    const value = storageService.get<T>(key)\n    return value || initValue\n  }, [initValue, key])\n\n  const [storedValue, setStoredValue] = useState<T>(get)\n\n  const setValue: SetValue<T> = useCallback(value => {\n    const newValue = value instanceof Function ? value(storedValue) : value\n    const storageService = new LocalStorageService()\n    storageService.set(key, value)\n\n    setStoredValue(newValue)\n  }, [storedValue, setStoredValue, key])\n\n  useEffect(() => {\n    setStoredValue(get())\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return [storedValue, setValue]\n}\n\nexport default useLocalStorage\n","import type { Languages } from './useLanguage'\nimport { useLanguage } from './useLanguage'\n\nexport type Translation<T> = Record<Languages, T>\n\ntype OverwriteTranslationType<Translation extends Record<string, unknown>> = {\n  language?: Languages,\n  translation?: Partial<Record<Languages, Partial<Translation>>>,\n}\n\n/**\n * Adds the `language` prop to the component props.\n *\n * @param Translation the type of the translation object\n *\n * @param Props the type of the component props, defaults to `Record<string, never>`,\n *              if you don't expect any other props other than `language` and get an\n *              error when using your component (because it uses `forwardRef` etc.)\n *              you can try out `Record<string, unknown>`, this might resolve your\n *              problem as `SomeType & never` is still `never` but `SomeType & unknown`\n *              is `SomeType` which means that adding back props (like `ref` etc.)\n *              works properly\n */\nexport type PropsForTranslation<\n  Translation extends Record<string, unknown>,\n  Props = Record<string, never>\n> = Props & {\n  overwriteTranslation?: OverwriteTranslationType<Translation>,\n};\n\nexport const useTranslation = <Translation extends Record<string, unknown>>(\n  defaults: Record<Languages, Translation>,\n  translationOverwrite: OverwriteTranslationType<Translation> = {}\n) : Translation => {\n  const { language: languageProp, translation: overwrite } = translationOverwrite\n  const { language: inferredLanguage } = useLanguage()\n  const usedLanguage = languageProp ?? inferredLanguage\n  let defaultValues: Translation = defaults[usedLanguage]\n  if (overwrite && overwrite[usedLanguage]) {\n    defaultValues = { ...defaultValues, ...overwrite[usedLanguage] }\n  }\n  return defaultValues\n}\n","import type { Languages } from '../hooks/useLanguage'\nimport type { PropsForTranslation } from '../hooks/useTranslation'\nimport { useTranslation } from '../hooks/useTranslation'\n\ntype TimeDisplayTranslation = {\n  today: string,\n  yesterday: string,\n  tomorrow: string,\n  inDays: (days: number) => string,\n  agoDays: (days: number) => string,\n  january: string,\n  february: string,\n  march: string,\n  april: string,\n  may: string,\n  june: string,\n  july: string,\n  august: string,\n  september: string,\n  october: string,\n  november: string,\n  december: string,\n}\n\nconst defaultTimeDisplayTranslations: Record<Languages, TimeDisplayTranslation> = {\n  en: {\n    today: 'today',\n    yesterday: 'yesterday',\n    tomorrow: 'tomorrow',\n    inDays: (days: number) => `in ${days} days`,\n    agoDays: (days: number) => `${days} days ago`,\n    january: 'January',\n    february: 'February',\n    march: 'March',\n    april: 'April',\n    may: 'May',\n    june: 'June',\n    july: 'July',\n    august: 'August',\n    september: 'September',\n    october: 'October',\n    november: 'November',\n    december: 'December'\n  },\n  de: {\n    today: 'heute',\n    yesterday: 'gestern',\n    tomorrow: 'morgen',\n    inDays: (days: number) => `in ${days} Tagen`,\n    agoDays: (days: number) => `vor ${days} Tagen`,\n    january: 'Januar',\n    february: 'Februar',\n    march: 'März',\n    april: 'April',\n    may: 'Mai',\n    june: 'Juni',\n    july: 'Juli',\n    august: 'August',\n    september: 'September',\n    october: 'October',\n    november: 'November',\n    december: 'December'\n  }\n}\n\ntype TimeDisplayMode = 'daysFromToday' | 'date'\n\ntype TimeDisplayProps = {\n  date: Date,\n  mode?: TimeDisplayMode,\n}\n\n/**\n * A Component for displaying time and dates in a unified fashion\n */\nexport const TimeDisplay = ({\n  overwriteTranslation,\n  date,\n  mode = 'daysFromToday'\n}: PropsForTranslation<TimeDisplayTranslation, TimeDisplayProps>) => {\n  const translation = useTranslation(defaultTimeDisplayTranslations, overwriteTranslation)\n  const difference = new Date().setHours(0, 0, 0, 0).valueOf() - new Date(date).setHours(0, 0, 0, 0).valueOf()\n  const isBefore = difference > 0\n  const differenceInDays = Math.floor(Math.abs(difference) / (1000 * 3600 * 24))\n\n  let displayString\n  if (differenceInDays === 0) {\n    displayString = translation.today\n  } else if (differenceInDays === 1) {\n    displayString = isBefore ? translation.yesterday : translation.tomorrow\n  } else {\n    displayString = isBefore ? translation.agoDays(differenceInDays) : translation.inDays(differenceInDays)\n  }\n  const monthToTranslation: { [key: number]: string } = {\n    0: translation.january,\n    1: translation.february,\n    2: translation.march,\n    3: translation.april,\n    4: translation.may,\n    5: translation.june,\n    6: translation.july,\n    7: translation.august,\n    8: translation.september,\n    9: translation.october,\n    10: translation.november,\n    11: translation.december\n  } as const\n\n  let fullString\n  if (mode === 'daysFromToday') {\n    fullString = `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')} - ${displayString}`\n  } else {\n    fullString = `${date.getDate()}. ${monthToTranslation[date.getMonth()]} ${date.getFullYear()}`\n  }\n\n  return (\n    <span>\n      {fullString}\n    </span>\n  )\n}\n"],"mappings":"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","names":["useEffect","useState","jsx"]}

package/dist/components/Tooltip.d.mts

@@ -0,0 +1,37 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PropsWithChildren, ReactNode } from 'react';
+
+type Position = 'top' | 'bottom' | 'left' | 'right';
+type TooltipProps = PropsWithChildren<{
+    tooltip: string | ReactNode;
+    /**
+     * Number of milliseconds until the tooltip appears
+     *
+     * defaults to 1000ms
+     */
+    animationDelay?: number;
+    /**
+     * Class names of additional styling properties for the tooltip
+     */
+    tooltipClassName?: string;
+    /**
+     * Class names of additional styling properties for the container from which the tooltip will be created
+     */
+    containerClassName?: string;
+    position?: Position;
+    zIndex?: number;
+}>;
+/**
+ * A Component for showing a tooltip when hovering over Content
+ * @param tooltip The tooltip to show can be a text or any ReactNode
+ * @param children The Content for which the tooltip should be created
+ * @param animationDelay The delay before the tooltip appears
+ * @param tooltipClassName Additional ClassNames for the Container of the tooltip
+ * @param containerClassName Additional ClassNames for the Container holding the content
+ * @param position The direction of the tooltip relative to the Container
+ * @param zIndex The z Index of the tooltip (you may require this when stacking modals)
+ * @constructor
+ */
+declare const Tooltip: ({ tooltip, children, animationDelay, tooltipClassName, containerClassName, position, zIndex, }: TooltipProps) => react_jsx_runtime.JSX.Element;
+
+export { Tooltip, type TooltipProps };

package/dist/components/Tooltip.d.ts

@@ -1,6 +1,8 @@
-import type { PropsWithChildren, ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PropsWithChildren, ReactNode } from 'react';
+
 type Position = 'top' | 'bottom' | 'left' | 'right';
-export type TooltipProps = PropsWithChildren<{
+type TooltipProps = PropsWithChildren<{
     tooltip: string | ReactNode;
     /**
      * Number of milliseconds until the tooltip appears
@@ -30,5 +32,6 @@ export type TooltipProps = PropsWithChildren<{
  * @param zIndex The z Index of the tooltip (you may require this when stacking modals)
  * @constructor
  */
-export declare const Tooltip: ({ tooltip, children, animationDelay, tooltipClassName, containerClassName, position, zIndex, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+declare const Tooltip: ({ tooltip, children, animationDelay, tooltipClassName, containerClassName, position, zIndex, }: TooltipProps) => react_jsx_runtime.JSX.Element;
+
+export { Tooltip, type TooltipProps };

package/dist/components/Tooltip.js

@@ -1,38 +1,136 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useHoverState } from '../hooks/useHoverState';
-import { clsx } from 'clsx';
-/**
- * A Component for showing a tooltip when hovering over Content
- * @param tooltip The tooltip to show can be a text or any ReactNode
- * @param children The Content for which the tooltip should be created
- * @param animationDelay The delay before the tooltip appears
- * @param tooltipClassName Additional ClassNames for the Container of the tooltip
- * @param containerClassName Additional ClassNames for the Container holding the content
- * @param position The direction of the tooltip relative to the Container
- * @param zIndex The z Index of the tooltip (you may require this when stacking modals)
- * @constructor
- */
-export const Tooltip = ({ tooltip, children, animationDelay = 650, tooltipClassName = '', containerClassName = '', position = 'bottom', zIndex = 10, }) => {
-    const { isHovered, handlers } = useHoverState();
-    const positionClasses = {
-        top: `bottom-full left-1/2 -translate-x-1/2 mb-[6px]`,
-        bottom: `top-full left-1/2 -translate-x-1/2 mt-[6px]`,
-        left: `right-full top-1/2 -translate-y-1/2 mr-[6px]`,
-        right: `left-full top-1/2 -translate-y-1/2 ml-[6px]`
-    };
-    const triangleSize = 6;
-    const triangleClasses = {
-        top: `top-full left-1/2 -translate-x-1/2 border-t-gray-600 border-l-transparent border-r-transparent`,
-        bottom: `bottom-full left-1/2 -translate-x-1/2 border-b-gray-600 border-l-transparent border-r-transparent`,
-        left: `left-full top-1/2 -translate-y-1/2 border-l-gray-600 border-t-transparent border-b-transparent`,
-        right: `right-full top-1/2 -translate-y-1/2 border-r-gray-600 border-t-transparent border-b-transparent`
-    };
-    const triangleStyle = {
-        top: { borderWidth: `${triangleSize}px ${triangleSize}px 0 ${triangleSize}px` },
-        bottom: { borderWidth: `0 ${triangleSize}px ${triangleSize}px ${triangleSize}px` },
-        left: { borderWidth: `${triangleSize}px 0 ${triangleSize}px ${triangleSize}px` },
-        right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }
-    };
-    return (_jsxs("div", { className: clsx('relative inline-block', containerClassName), ...handlers, children: [children, isHovered && (_jsxs("div", { className: clsx(`opacity-0 absolute text-black text-xs font-semibold text-gray-600 px-2 py-1 rounded whitespace-nowrap border-2 border-gray-600
-           animate-tooltip-fade-in shadow-lg bg-gray-100`, positionClasses[position], tooltipClassName), style: { zIndex, animationDelay: animationDelay + 'ms' }, children: [tooltip, _jsx("div", { className: clsx(`absolute w-0 h-0`, triangleClasses[position]), style: { ...triangleStyle[position], zIndex } })] }))] }));
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Tooltip.tsx
+var Tooltip_exports = {};
+__export(Tooltip_exports, {
+  Tooltip: () => Tooltip
+});
+module.exports = __toCommonJS(Tooltip_exports);
+
+// src/hooks/useHoverState.ts
+var import_react = require("react");
+var defaultUseHoverStateProps = {
+  closingDelay: 200,
+  isDisabled: false
+};
+var useHoverState = (props = void 0) => {
+  const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props };
+  const [isHovered, setIsHovered] = (0, import_react.useState)(false);
+  const [timer, setTimer] = (0, import_react.useState)();
+  const onMouseEnter = () => {
+    if (isDisabled) {
+      return;
+    }
+    clearTimeout(timer);
+    setIsHovered(true);
+  };
+  const onMouseLeave = () => {
+    if (isDisabled) {
+      return;
+    }
+    setTimer(setTimeout(() => {
+      setIsHovered(false);
+    }, closingDelay));
+  };
+  (0, import_react.useEffect)(() => {
+    if (timer) {
+      return () => {
+        clearTimeout(timer);
+      };
+    }
+  });
+  (0, import_react.useEffect)(() => {
+    if (timer) {
+      clearTimeout(timer);
+    }
+  }, [isDisabled]);
+  return {
+    isHovered,
+    setIsHovered,
+    handlers: { onMouseEnter, onMouseLeave }
+  };
+};
+
+// src/components/Tooltip.tsx
+var import_clsx = require("clsx");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Tooltip = ({
+  tooltip,
+  children,
+  animationDelay = 650,
+  tooltipClassName = "",
+  containerClassName = "",
+  position = "bottom",
+  zIndex = 10
+}) => {
+  const { isHovered, handlers } = useHoverState();
+  const positionClasses = {
+    top: `bottom-full left-1/2 -translate-x-1/2 mb-[6px]`,
+    bottom: `top-full left-1/2 -translate-x-1/2 mt-[6px]`,
+    left: `right-full top-1/2 -translate-y-1/2 mr-[6px]`,
+    right: `left-full top-1/2 -translate-y-1/2 ml-[6px]`
+  };
+  const triangleSize = 6;
+  const triangleClasses = {
+    top: `top-full left-1/2 -translate-x-1/2 border-t-gray-600 border-l-transparent border-r-transparent`,
+    bottom: `bottom-full left-1/2 -translate-x-1/2 border-b-gray-600 border-l-transparent border-r-transparent`,
+    left: `left-full top-1/2 -translate-y-1/2 border-l-gray-600 border-t-transparent border-b-transparent`,
+    right: `right-full top-1/2 -translate-y-1/2 border-r-gray-600 border-t-transparent border-b-transparent`
+  };
+  const triangleStyle = {
+    top: { borderWidth: `${triangleSize}px ${triangleSize}px 0 ${triangleSize}px` },
+    bottom: { borderWidth: `0 ${triangleSize}px ${triangleSize}px ${triangleSize}px` },
+    left: { borderWidth: `${triangleSize}px 0 ${triangleSize}px ${triangleSize}px` },
+    right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: (0, import_clsx.clsx)("relative inline-block", containerClassName),
+      ...handlers,
+      children: [
+        children,
+        isHovered && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            className: (0, import_clsx.clsx)(`opacity-0 absolute text-black text-xs font-semibold text-gray-600 px-2 py-1 rounded whitespace-nowrap border-2 border-gray-600
+           animate-tooltip-fade-in shadow-lg bg-gray-100`, positionClasses[position], tooltipClassName),
+            style: { zIndex, animationDelay: animationDelay + "ms" },
+            children: [
+              tooltip,
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  className: (0, import_clsx.clsx)(`absolute w-0 h-0`, triangleClasses[position]),
+                  style: { ...triangleStyle[position], zIndex }
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Tooltip
+});
+//# sourceMappingURL=Tooltip.js.map

package/dist/components/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Tooltip.tsx","../../src/hooks/useHoverState.ts"],"sourcesContent":["import type { CSSProperties, PropsWithChildren, ReactNode } from 'react'\nimport { useHoverState } from '../hooks/useHoverState'\nimport { clsx } from 'clsx'\n\ntype Position = 'top' | 'bottom' | 'left' | 'right'\n\nexport type TooltipProps = PropsWithChildren<{\n  tooltip: string | ReactNode,\n  /**\n   * Number of milliseconds until the tooltip appears\n   *\n   * defaults to 1000ms\n   */\n  animationDelay?: number,\n  /**\n   * Class names of additional styling properties for the tooltip\n   */\n  tooltipClassName?: string,\n  /**\n   * Class names of additional styling properties for the container from which the tooltip will be created\n   */\n  containerClassName?: string,\n  position?: Position,\n  zIndex?: number,\n}>\n\n/**\n * A Component for showing a tooltip when hovering over Content\n * @param tooltip The tooltip to show can be a text or any ReactNode\n * @param children The Content for which the tooltip should be created\n * @param animationDelay The delay before the tooltip appears\n * @param tooltipClassName Additional ClassNames for the Container of the tooltip\n * @param containerClassName Additional ClassNames for the Container holding the content\n * @param position The direction of the tooltip relative to the Container\n * @param zIndex The z Index of the tooltip (you may require this when stacking modals)\n * @constructor\n */\nexport const Tooltip = ({\n                          tooltip,\n                          children,\n                          animationDelay = 650,\n                          tooltipClassName = '',\n                          containerClassName = '',\n                          position = 'bottom',\n                          zIndex = 10,\n                        }: TooltipProps) => {\n  const { isHovered, handlers } = useHoverState()\n\n  const positionClasses = {\n    top: `bottom-full left-1/2 -translate-x-1/2 mb-[6px]`,\n    bottom: `top-full left-1/2 -translate-x-1/2 mt-[6px]`,\n    left: `right-full top-1/2 -translate-y-1/2 mr-[6px]`,\n    right: `left-full top-1/2 -translate-y-1/2 ml-[6px]`\n  }\n\n  const triangleSize = 6\n  const triangleClasses = {\n    top: `top-full left-1/2 -translate-x-1/2 border-t-gray-600 border-l-transparent border-r-transparent`,\n    bottom: `bottom-full left-1/2 -translate-x-1/2 border-b-gray-600 border-l-transparent border-r-transparent`,\n    left: `left-full top-1/2 -translate-y-1/2 border-l-gray-600 border-t-transparent border-b-transparent`,\n    right: `right-full top-1/2 -translate-y-1/2 border-r-gray-600 border-t-transparent border-b-transparent`\n  }\n\n  const triangleStyle: Record<Position, CSSProperties> = {\n    top: { borderWidth: `${triangleSize}px ${triangleSize}px 0 ${triangleSize}px` },\n    bottom: { borderWidth: `0 ${triangleSize}px ${triangleSize}px ${triangleSize}px` },\n    left: { borderWidth: `${triangleSize}px 0 ${triangleSize}px ${triangleSize}px` },\n    right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }\n  }\n\n  return (\n    <div\n      className={clsx('relative inline-block', containerClassName)}\n      {...handlers}\n    >\n      {children}\n      {isHovered && (\n        <div\n          className={clsx(`opacity-0 absolute text-black text-xs font-semibold text-gray-600 px-2 py-1 rounded whitespace-nowrap border-2 border-gray-600\n           animate-tooltip-fade-in shadow-lg bg-gray-100`, positionClasses[position], tooltipClassName)}\n          style={{ zIndex, animationDelay: animationDelay + 'ms' }}\n        >\n          {tooltip}\n          <div\n            className={clsx(`absolute w-0 h-0`, triangleClasses[position])}\n            style={{ ...triangleStyle[position], zIndex }}\n           />\n        </div>\n      )}\n    </div>\n  )\n}\n","import type { Dispatch, SetStateAction } from 'react'\nimport { useEffect, useState } from 'react'\n\ntype UseHoverStateProps = {\n  /**\n   * The delay after which the menu is closed in milliseconds\n   *\n   * default: 200ms\n   */\n  closingDelay: number,\n  /**\n   * Whether the hover state management should be disabled\n   *\n   * default: false\n   */\n  isDisabled: boolean,\n}\n\ntype UseHoverStateReturnType = {\n  /**\n   * Whether the element is hovered\n   */\n  isHovered: boolean,\n  /**\n   * Function to change the current hover status\n   */\n  setIsHovered: Dispatch<SetStateAction<boolean>>,\n  /**\n   * Handlers to pass on to the component that should be hovered\n   */\n  handlers: {\n    onMouseEnter: () => void,\n    onMouseLeave: () => void,\n  },\n}\n\nconst defaultUseHoverStateProps: UseHoverStateProps = {\n  closingDelay: 200,\n  isDisabled: false,\n}\n\n/**\n * @param props See UseHoverStateProps\n *\n * A react hook for managing the hover state of a component. The handlers provided should be\n * forwarded to the component which should be hovered over\n */\nexport const useHoverState = (props: Partial<UseHoverStateProps> | undefined = undefined): UseHoverStateReturnType => {\n  const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props }\n\n  const [isHovered, setIsHovered] = useState(false)\n  const [timer, setTimer] = useState<NodeJS.Timeout>()\n\n  const onMouseEnter = () => {\n    if (isDisabled) {\n      return\n    }\n    clearTimeout(timer)\n    setIsHovered(true)\n  }\n\n  const onMouseLeave = () => {\n    if (isDisabled) {\n      return\n    }\n    setTimer(setTimeout(() => {\n      setIsHovered(false)\n    }, closingDelay))\n  }\n\n  useEffect(() => {\n    if (timer) {\n      return () => {\n        clearTimeout(timer)\n      }\n    }\n  })\n\n  useEffect(() => {\n    if (timer) {\n      clearTimeout(timer)\n    }\n  }, [isDisabled]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return {\n    isHovered, setIsHovered, handlers: { onMouseEnter, onMouseLeave }\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,mBAAoC;AAmCpC,IAAM,4BAAgD;AAAA,EACpD,cAAc;AAAA,EACd,YAAY;AACd;AAQO,IAAM,gBAAgB,CAAC,QAAiD,WAAuC;AACpH,QAAM,EAAE,cAAc,WAAW,IAAI,EAAE,GAAG,2BAA2B,GAAG,MAAM;AAE9E,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAChD,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAyB;AAEnD,QAAM,eAAe,MAAM;AACzB,QAAI,YAAY;AACd;AAAA,IACF;AACA,iBAAa,KAAK;AAClB,iBAAa,IAAI;AAAA,EACnB;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,YAAY;AACd;AAAA,IACF;AACA,aAAS,WAAW,MAAM;AACxB,mBAAa,KAAK;AAAA,IACpB,GAAG,YAAY,CAAC;AAAA,EAClB;AAEA,8BAAU,MAAM;AACd,QAAI,OAAO;AACT,aAAO,MAAM;AACX,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF;AAAA,EACF,CAAC;AAED,8BAAU,MAAM;AACd,QAAI,OAAO;AACT,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,SAAO;AAAA,IACL;AAAA,IAAW;AAAA,IAAc,UAAU,EAAE,cAAc,aAAa;AAAA,EAClE;AACF;;;ADrFA,kBAAqB;AA2Eb;AAxCD,IAAM,UAAU,CAAC;AAAA,EACE;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,EACnB,qBAAqB;AAAA,EACrB,WAAW;AAAA,EACX,SAAS;AACX,MAAoB;AAC1C,QAAM,EAAE,WAAW,SAAS,IAAI,cAAc;AAE9C,QAAM,kBAAkB;AAAA,IACtB,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AAEA,QAAM,eAAe;AACrB,QAAM,kBAAkB;AAAA,IACtB,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AAEA,QAAM,gBAAiD;AAAA,IACrD,KAAK,EAAE,aAAa,GAAG,YAAY,MAAM,YAAY,QAAQ,YAAY,KAAK;AAAA,IAC9E,QAAQ,EAAE,aAAa,KAAK,YAAY,MAAM,YAAY,MAAM,YAAY,KAAK;AAAA,IACjF,MAAM,EAAE,aAAa,GAAG,YAAY,QAAQ,YAAY,MAAM,YAAY,KAAK;AAAA,IAC/E,OAAO,EAAE,aAAa,GAAG,YAAY,MAAM,YAAY,MAAM,YAAY,OAAO;AAAA,EAClF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,kBAAK,yBAAyB,kBAAkB;AAAA,MAC1D,GAAG;AAAA,MAEH;AAAA;AAAA,QACA,aACC;AAAA,UAAC;AAAA;AAAA,YACC,eAAW,kBAAK;AAAA,2DACiC,gBAAgB,QAAQ,GAAG,gBAAgB;AAAA,YAC5F,OAAO,EAAE,QAAQ,gBAAgB,iBAAiB,KAAK;AAAA,YAEtD;AAAA;AAAA,cACD;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAW,kBAAK,oBAAoB,gBAAgB,QAAQ,CAAC;AAAA,kBAC7D,OAAO,EAAE,GAAG,cAAc,QAAQ,GAAG,OAAO;AAAA;AAAA,cAC7C;AAAA;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/components/Tooltip.mjs

@@ -0,0 +1,109 @@
+// src/hooks/useHoverState.ts
+import { useEffect, useState } from "react";
+var defaultUseHoverStateProps = {
+  closingDelay: 200,
+  isDisabled: false
+};
+var useHoverState = (props = void 0) => {
+  const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props };
+  const [isHovered, setIsHovered] = useState(false);
+  const [timer, setTimer] = useState();
+  const onMouseEnter = () => {
+    if (isDisabled) {
+      return;
+    }
+    clearTimeout(timer);
+    setIsHovered(true);
+  };
+  const onMouseLeave = () => {
+    if (isDisabled) {
+      return;
+    }
+    setTimer(setTimeout(() => {
+      setIsHovered(false);
+    }, closingDelay));
+  };
+  useEffect(() => {
+    if (timer) {
+      return () => {
+        clearTimeout(timer);
+      };
+    }
+  });
+  useEffect(() => {
+    if (timer) {
+      clearTimeout(timer);
+    }
+  }, [isDisabled]);
+  return {
+    isHovered,
+    setIsHovered,
+    handlers: { onMouseEnter, onMouseLeave }
+  };
+};
+
+// src/components/Tooltip.tsx
+import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Tooltip = ({
+  tooltip,
+  children,
+  animationDelay = 650,
+  tooltipClassName = "",
+  containerClassName = "",
+  position = "bottom",
+  zIndex = 10
+}) => {
+  const { isHovered, handlers } = useHoverState();
+  const positionClasses = {
+    top: `bottom-full left-1/2 -translate-x-1/2 mb-[6px]`,
+    bottom: `top-full left-1/2 -translate-x-1/2 mt-[6px]`,
+    left: `right-full top-1/2 -translate-y-1/2 mr-[6px]`,
+    right: `left-full top-1/2 -translate-y-1/2 ml-[6px]`
+  };
+  const triangleSize = 6;
+  const triangleClasses = {
+    top: `top-full left-1/2 -translate-x-1/2 border-t-gray-600 border-l-transparent border-r-transparent`,
+    bottom: `bottom-full left-1/2 -translate-x-1/2 border-b-gray-600 border-l-transparent border-r-transparent`,
+    left: `left-full top-1/2 -translate-y-1/2 border-l-gray-600 border-t-transparent border-b-transparent`,
+    right: `right-full top-1/2 -translate-y-1/2 border-r-gray-600 border-t-transparent border-b-transparent`
+  };
+  const triangleStyle = {
+    top: { borderWidth: `${triangleSize}px ${triangleSize}px 0 ${triangleSize}px` },
+    bottom: { borderWidth: `0 ${triangleSize}px ${triangleSize}px ${triangleSize}px` },
+    left: { borderWidth: `${triangleSize}px 0 ${triangleSize}px ${triangleSize}px` },
+    right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx("relative inline-block", containerClassName),
+      ...handlers,
+      children: [
+        children,
+        isHovered && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: clsx(`opacity-0 absolute text-black text-xs font-semibold text-gray-600 px-2 py-1 rounded whitespace-nowrap border-2 border-gray-600
+           animate-tooltip-fade-in shadow-lg bg-gray-100`, positionClasses[position], tooltipClassName),
+            style: { zIndex, animationDelay: animationDelay + "ms" },
+            children: [
+              tooltip,
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: clsx(`absolute w-0 h-0`, triangleClasses[position]),
+                  style: { ...triangleStyle[position], zIndex }
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Tooltip
+};
+//# sourceMappingURL=Tooltip.mjs.map

package/dist/components/Tooltip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useHoverState.ts","../../src/components/Tooltip.tsx"],"sourcesContent":["import type { Dispatch, SetStateAction } from 'react'\nimport { useEffect, useState } from 'react'\n\ntype UseHoverStateProps = {\n  /**\n   * The delay after which the menu is closed in milliseconds\n   *\n   * default: 200ms\n   */\n  closingDelay: number,\n  /**\n   * Whether the hover state management should be disabled\n   *\n   * default: false\n   */\n  isDisabled: boolean,\n}\n\ntype UseHoverStateReturnType = {\n  /**\n   * Whether the element is hovered\n   */\n  isHovered: boolean,\n  /**\n   * Function to change the current hover status\n   */\n  setIsHovered: Dispatch<SetStateAction<boolean>>,\n  /**\n   * Handlers to pass on to the component that should be hovered\n   */\n  handlers: {\n    onMouseEnter: () => void,\n    onMouseLeave: () => void,\n  },\n}\n\nconst defaultUseHoverStateProps: UseHoverStateProps = {\n  closingDelay: 200,\n  isDisabled: false,\n}\n\n/**\n * @param props See UseHoverStateProps\n *\n * A react hook for managing the hover state of a component. The handlers provided should be\n * forwarded to the component which should be hovered over\n */\nexport const useHoverState = (props: Partial<UseHoverStateProps> | undefined = undefined): UseHoverStateReturnType => {\n  const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props }\n\n  const [isHovered, setIsHovered] = useState(false)\n  const [timer, setTimer] = useState<NodeJS.Timeout>()\n\n  const onMouseEnter = () => {\n    if (isDisabled) {\n      return\n    }\n    clearTimeout(timer)\n    setIsHovered(true)\n  }\n\n  const onMouseLeave = () => {\n    if (isDisabled) {\n      return\n    }\n    setTimer(setTimeout(() => {\n      setIsHovered(false)\n    }, closingDelay))\n  }\n\n  useEffect(() => {\n    if (timer) {\n      return () => {\n        clearTimeout(timer)\n      }\n    }\n  })\n\n  useEffect(() => {\n    if (timer) {\n      clearTimeout(timer)\n    }\n  }, [isDisabled]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return {\n    isHovered, setIsHovered, handlers: { onMouseEnter, onMouseLeave }\n  }\n}\n","import type { CSSProperties, PropsWithChildren, ReactNode } from 'react'\nimport { useHoverState } from '../hooks/useHoverState'\nimport { clsx } from 'clsx'\n\ntype Position = 'top' | 'bottom' | 'left' | 'right'\n\nexport type TooltipProps = PropsWithChildren<{\n  tooltip: string | ReactNode,\n  /**\n   * Number of milliseconds until the tooltip appears\n   *\n   * defaults to 1000ms\n   */\n  animationDelay?: number,\n  /**\n   * Class names of additional styling properties for the tooltip\n   */\n  tooltipClassName?: string,\n  /**\n   * Class names of additional styling properties for the container from which the tooltip will be created\n   */\n  containerClassName?: string,\n  position?: Position,\n  zIndex?: number,\n}>\n\n/**\n * A Component for showing a tooltip when hovering over Content\n * @param tooltip The tooltip to show can be a text or any ReactNode\n * @param children The Content for which the tooltip should be created\n * @param animationDelay The delay before the tooltip appears\n * @param tooltipClassName Additional ClassNames for the Container of the tooltip\n * @param containerClassName Additional ClassNames for the Container holding the content\n * @param position The direction of the tooltip relative to the Container\n * @param zIndex The z Index of the tooltip (you may require this when stacking modals)\n * @constructor\n */\nexport const Tooltip = ({\n                          tooltip,\n                          children,\n                          animationDelay = 650,\n                          tooltipClassName = '',\n                          containerClassName = '',\n                          position = 'bottom',\n                          zIndex = 10,\n                        }: TooltipProps) => {\n  const { isHovered, handlers } = useHoverState()\n\n  const positionClasses = {\n    top: `bottom-full left-1/2 -translate-x-1/2 mb-[6px]`,\n    bottom: `top-full left-1/2 -translate-x-1/2 mt-[6px]`,\n    left: `right-full top-1/2 -translate-y-1/2 mr-[6px]`,\n    right: `left-full top-1/2 -translate-y-1/2 ml-[6px]`\n  }\n\n  const triangleSize = 6\n  const triangleClasses = {\n    top: `top-full left-1/2 -translate-x-1/2 border-t-gray-600 border-l-transparent border-r-transparent`,\n    bottom: `bottom-full left-1/2 -translate-x-1/2 border-b-gray-600 border-l-transparent border-r-transparent`,\n    left: `left-full top-1/2 -translate-y-1/2 border-l-gray-600 border-t-transparent border-b-transparent`,\n    right: `right-full top-1/2 -translate-y-1/2 border-r-gray-600 border-t-transparent border-b-transparent`\n  }\n\n  const triangleStyle: Record<Position, CSSProperties> = {\n    top: { borderWidth: `${triangleSize}px ${triangleSize}px 0 ${triangleSize}px` },\n    bottom: { borderWidth: `0 ${triangleSize}px ${triangleSize}px ${triangleSize}px` },\n    left: { borderWidth: `${triangleSize}px 0 ${triangleSize}px ${triangleSize}px` },\n    right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }\n  }\n\n  return (\n    <div\n      className={clsx('relative inline-block', containerClassName)}\n      {...handlers}\n    >\n      {children}\n      {isHovered && (\n        <div\n          className={clsx(`opacity-0 absolute text-black text-xs font-semibold text-gray-600 px-2 py-1 rounded whitespace-nowrap border-2 border-gray-600\n           animate-tooltip-fade-in shadow-lg bg-gray-100`, positionClasses[position], tooltipClassName)}\n          style={{ zIndex, animationDelay: animationDelay + 'ms' }}\n        >\n          {tooltip}\n          <div\n            className={clsx(`absolute w-0 h-0`, triangleClasses[position])}\n            style={{ ...triangleStyle[position], zIndex }}\n           />\n        </div>\n      )}\n    </div>\n  )\n}\n"],"mappings":";AACA,SAAS,WAAW,gBAAgB;AAmCpC,IAAM,4BAAgD;AAAA,EACpD,cAAc;AAAA,EACd,YAAY;AACd;AAQO,IAAM,gBAAgB,CAAC,QAAiD,WAAuC;AACpH,QAAM,EAAE,cAAc,WAAW,IAAI,EAAE,GAAG,2BAA2B,GAAG,MAAM;AAE9E,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAyB;AAEnD,QAAM,eAAe,MAAM;AACzB,QAAI,YAAY;AACd;AAAA,IACF;AACA,iBAAa,KAAK;AAClB,iBAAa,IAAI;AAAA,EACnB;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,YAAY;AACd;AAAA,IACF;AACA,aAAS,WAAW,MAAM;AACxB,mBAAa,KAAK;AAAA,IACpB,GAAG,YAAY,CAAC;AAAA,EAClB;AAEA,YAAU,MAAM;AACd,QAAI,OAAO;AACT,aAAO,MAAM;AACX,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF;AAAA,EACF,CAAC;AAED,YAAU,MAAM;AACd,QAAI,OAAO;AACT,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,SAAO;AAAA,IACL;AAAA,IAAW;AAAA,IAAc,UAAU,EAAE,cAAc,aAAa;AAAA,EAClE;AACF;;;ACrFA,SAAS,YAAY;AA2Eb,SAME,KANF;AAxCD,IAAM,UAAU,CAAC;AAAA,EACE;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,EACnB,qBAAqB;AAAA,EACrB,WAAW;AAAA,EACX,SAAS;AACX,MAAoB;AAC1C,QAAM,EAAE,WAAW,SAAS,IAAI,cAAc;AAE9C,QAAM,kBAAkB;AAAA,IACtB,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AAEA,QAAM,eAAe;AACrB,QAAM,kBAAkB;AAAA,IACtB,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AAEA,QAAM,gBAAiD;AAAA,IACrD,KAAK,EAAE,aAAa,GAAG,YAAY,MAAM,YAAY,QAAQ,YAAY,KAAK;AAAA,IAC9E,QAAQ,EAAE,aAAa,KAAK,YAAY,MAAM,YAAY,MAAM,YAAY,KAAK;AAAA,IACjF,MAAM,EAAE,aAAa,GAAG,YAAY,QAAQ,YAAY,MAAM,YAAY,KAAK;AAAA,IAC/E,OAAO,EAAE,aAAa,GAAG,YAAY,MAAM,YAAY,MAAM,YAAY,OAAO;AAAA,EAClF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,KAAK,yBAAyB,kBAAkB;AAAA,MAC1D,GAAG;AAAA,MAEH;AAAA;AAAA,QACA,aACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,KAAK;AAAA,2DACiC,gBAAgB,QAAQ,GAAG,gBAAgB;AAAA,YAC5F,OAAO,EAAE,QAAQ,gBAAgB,iBAAiB,KAAK;AAAA,YAEtD;AAAA;AAAA,cACD;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW,KAAK,oBAAoB,gBAAgB,QAAQ,CAAC;AAAA,kBAC7D,OAAO,EAAE,GAAG,cAAc,QAAQ,GAAG,OAAO;AAAA;AAAA,cAC7C;AAAA;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/components/VerticalDivider.d.mts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type VerticalDividerProps = {
+    width?: number;
+    height?: number;
+    strokeWidth?: number;
+    dashGap?: number;
+    dashLength?: number;
+};
+/**
+ * A Component for creating a vertical Divider
+ */
+declare const VerticalDivider: ({ width, height, strokeWidth, dashGap, dashLength, }: VerticalDividerProps) => react_jsx_runtime.JSX.Element;
+
+export { VerticalDivider, type VerticalDividerProps };

package/dist/components/VerticalDivider.d.ts

@@ -1,4 +1,6 @@
-export type VerticalDividerProps = {
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type VerticalDividerProps = {
     width?: number;
     height?: number;
     strokeWidth?: number;
@@ -8,4 +10,6 @@ export type VerticalDividerProps = {
 /**
  * A Component for creating a vertical Divider
  */
-export declare const VerticalDivider: ({ width, height, strokeWidth, dashGap, dashLength, }: VerticalDividerProps) => import("react/jsx-runtime").JSX.Element;
+declare const VerticalDivider: ({ width, height, strokeWidth, dashGap, dashLength, }: VerticalDividerProps) => react_jsx_runtime.JSX.Element;
+
+export { VerticalDivider, type VerticalDividerProps };

package/dist/components/VerticalDivider.js

@@ -1,7 +1,81 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * A Component for creating a vertical Divider
- */
-export const VerticalDivider = ({ width = 1, height = 100, strokeWidth = 4, dashGap = 4, dashLength = 4, }) => {
-    return (_jsx("div", { style: { width: width + 'px', height: height + 'px' }, children: _jsxs("svg", { width: width, height: height, viewBox: `0 0 ${width} ${height}`, fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("line", { opacity: "0.5", x1: width / 2, y1: height, x2: width / 2, y2: "0", stroke: "url(#paint_linear)", strokeWidth: strokeWidth, strokeDasharray: `${dashLength} ${dashLength + dashGap}`, strokeLinecap: "round" }), _jsx("defs", { children: _jsxs("linearGradient", { id: "paint_linear", x1: width / 2, y1: "0", x2: width / 2, y2: height, gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopOpacity: "0", stopColor: "currentColor" }), _jsx("stop", { offset: "0.5", stopColor: "currentColor" }), _jsx("stop", { offset: "1", stopColor: "currentColor", stopOpacity: "0" })] }) })] }) }));
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/VerticalDivider.tsx
+var VerticalDivider_exports = {};
+__export(VerticalDivider_exports, {
+  VerticalDivider: () => VerticalDivider
+});
+module.exports = __toCommonJS(VerticalDivider_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var VerticalDivider = ({
+  width = 1,
+  height = 100,
+  strokeWidth = 4,
+  dashGap = 4,
+  dashLength = 4
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: width + "px", height: height + "px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "line",
+          {
+            opacity: "0.5",
+            x1: width / 2,
+            y1: height,
+            x2: width / 2,
+            y2: "0",
+            stroke: "url(#paint_linear)",
+            strokeWidth,
+            strokeDasharray: `${dashLength} ${dashLength + dashGap}`,
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "linearGradient",
+          {
+            id: "paint_linear",
+            x1: width / 2,
+            y1: "0",
+            x2: width / 2,
+            y2: height,
+            gradientUnits: "userSpaceOnUse",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { stopOpacity: "0", stopColor: "currentColor" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "0.5", stopColor: "currentColor" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "1", stopColor: "currentColor", stopOpacity: "0" })
+            ]
+          }
+        ) })
+      ]
+    }
+  ) });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  VerticalDivider
+});
+//# sourceMappingURL=VerticalDivider.js.map

package/dist/components/VerticalDivider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/VerticalDivider.tsx"],"sourcesContent":["export type VerticalDividerProps = {\n  width?: number,\n  height?: number,\n  strokeWidth?: number,\n  dashGap?: number,\n  dashLength?: number,\n}\n\n/**\n * A Component for creating a vertical Divider\n */\nexport const VerticalDivider = ({\n                                  width = 1,\n                                  height = 100,\n                                  strokeWidth = 4,\n                                  dashGap = 4,\n                                  dashLength = 4,\n                                }: VerticalDividerProps) => {\n  return (\n    <div style={{ width: width + 'px', height: height + 'px' }}>\n      <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} fill=\"none\"\n           xmlns=\"http://www.w3.org/2000/svg\">\n        <line\n          opacity=\"0.5\"\n          x1={width / 2}\n          y1={height}\n          x2={width / 2}\n          y2=\"0\"\n          stroke=\"url(#paint_linear)\"\n          strokeWidth={strokeWidth}\n          strokeDasharray={`${dashLength} ${dashLength + dashGap}`}\n          strokeLinecap=\"round\"\n        />\n        <defs>\n          <linearGradient\n            id=\"paint_linear\"\n            x1={width / 2}\n            y1=\"0\"\n            x2={width / 2}\n            y2={height}\n            gradientUnits=\"userSpaceOnUse\"\n          >\n            <stop stopOpacity=\"0\" stopColor=\"currentColor\"/>\n            <stop offset=\"0.5\" stopColor=\"currentColor\"/>\n            <stop offset=\"1\" stopColor=\"currentColor\" stopOpacity=\"0\"/>\n          </linearGradient>\n        </defs>\n      </svg>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBQ;AAXD,IAAM,kBAAkB,CAAC;AAAA,EACE,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,cAAc;AAAA,EACd,UAAU;AAAA,EACV,aAAa;AACf,MAA4B;AAC1D,SACE,4CAAC,SAAI,OAAO,EAAE,OAAO,QAAQ,MAAM,QAAQ,SAAS,KAAK,GACvD;AAAA,IAAC;AAAA;AAAA,MAAI;AAAA,MAAc;AAAA,MAAgB,SAAS,OAAO,KAAK,IAAI,MAAM;AAAA,MAAI,MAAK;AAAA,MACtE,OAAM;AAAA,MACT;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,IAAI,QAAQ;AAAA,YACZ,IAAI;AAAA,YACJ,IAAI,QAAQ;AAAA,YACZ,IAAG;AAAA,YACH,QAAO;AAAA,YACP;AAAA,YACA,iBAAiB,GAAG,UAAU,IAAI,aAAa,OAAO;AAAA,YACtD,eAAc;AAAA;AAAA,QAChB;AAAA,QACA,4CAAC,UACC;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,IAAI,QAAQ;AAAA,YACZ,IAAG;AAAA,YACH,IAAI,QAAQ;AAAA,YACZ,IAAI;AAAA,YACJ,eAAc;AAAA,YAEd;AAAA,0DAAC,UAAK,aAAY,KAAI,WAAU,gBAAc;AAAA,cAC9C,4CAAC,UAAK,QAAO,OAAM,WAAU,gBAAc;AAAA,cAC3C,4CAAC,UAAK,QAAO,KAAI,WAAU,gBAAe,aAAY,KAAG;AAAA;AAAA;AAAA,QAC3D,GACF;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;","names":[]}