lkd-web-kit 0.3.18 → 0.3.20

package/dist/components/EmptyState/index.cjs

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const clsx = require('clsx');
+const Icon = require('../Icon.cjs');
+
+const pxBySize = {
+  sm: 48,
+  md: 60,
+  lg: 84
+};
+const EmptyState = ({
+  label,
+  action,
+  icon,
+  className,
+  size = "md",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: clsx("justfiy-center flex flex-col items-center gap-1", className),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx(
+          Icon.Icon,
+          {
+            i: icon,
+            size: pxBySize[size],
+            className: "text-gray-2"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-6 text-sm font-semibold", children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { children: action })
+      ]
+    }
+  );
+};
+
+exports.EmptyState = EmptyState;

package/dist/{index2.mjs → components/EmptyState/index.js}

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { Icon } from './index5.mjs';
+import { Icon } from '../Icon.js';
 
 const pxBySize = {
   sm: 48,

package/dist/components/Icon.cjs

@@ -0,0 +1,54 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const clsx = require('clsx');
+
+const Icon = ({ i: I, size = "md", style, rotate, className, ...rest }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    I,
+    {
+      ...typeof size === "number" ? {
+        height: size,
+        width: size
+      } : stylesBySize[size],
+      viewBox: "0 0 24 24",
+      style: {
+        ...style,
+        transform: `rotate(${rotate}deg)`
+      },
+      className: clsx("shrink-0", className),
+      ...rest
+    }
+  );
+};
+const stylesBySize = {
+  xs: {
+    height: 16,
+    width: 16
+  },
+  sm: {
+    height: 20,
+    width: 20
+  },
+  md: {
+    height: 24,
+    width: 24
+  },
+  lg: {
+    height: 28,
+    width: 28
+  },
+  xl: {
+    height: 32,
+    width: 32
+  },
+  ["2xl"]: {
+    height: 40,
+    width: 40
+  }
+};
+
+exports.Icon = Icon;

package/dist/components/InfinityLoader/index.cjs

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const core = require('@mantine/core');
+const hooks = require('@mantine/hooks');
+const react = require('react');
+
+const InfinityLoader = ({
+  root,
+  infinity,
+  rootMargin = "0px 0px 0px 0px",
+  endMessage = "No hay más resultados",
+  loaderProps,
+  ...props
+}) => {
+  const { entry, ref } = hooks.useIntersection({
+    root: root?.current,
+    rootMargin
+  });
+  react.useEffect(() => {
+    if (entry?.isIntersecting && infinity.hasNextPage) infinity.fetchNextPage();
+  }, [entry?.isIntersecting]);
+  react.useEffect(() => {
+    if (!entry?.isIntersecting) return;
+    const el = root?.current ?? document.documentElement;
+    const hasScroll = el?.scrollHeight > el?.clientHeight;
+    if (!hasScroll) infinity.fetchNextPage();
+  }, [entry?.isIntersecting, infinity.data?.pages.length]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.Center,
+    {
+      ref,
+      ...props,
+      style: {
+        minHeight: "1rem",
+        fontSize: "14px",
+        ...props.style
+      },
+      children: infinity.isLoading || infinity.isFetchingNextPage ? /* @__PURE__ */ jsxRuntime.jsx(core.Loader, { ...loaderProps }) : infinity.data && infinity.data.pages.length > 1 && !infinity.hasNextPage ? endMessage : null
+    }
+  );
+};
+
+exports.InfinityLoader = InfinityLoader;

package/dist/components/MyDatePickerInput/CalendarIcon.cjs

@@ -0,0 +1,65 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+
+const CalendarIcon = ({ size = "sm", ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size === "sm" ? 20 : 24,
+      height: size === "sm" ? 20 : 24,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M6 5.5C5.66848 5.5 5.35054 5.6317 5.11612 5.86612C4.8817 6.10054 4.75 6.41848 4.75 6.75V18.75C4.75 19.0815 4.8817 19.3995 5.11612 19.6339C5.35054 19.8683 5.66848 20 6 20H18C18.3315 20 18.6495 19.8683 18.8839 19.6339C19.1183 19.3995 19.25 19.0815 19.25 18.75V6.75C19.25 6.41848 19.1183 6.10054 18.8839 5.86612C18.6495 5.6317 18.3315 5.5 18 5.5H6ZM4.05546 4.80546C4.57118 4.28973 5.27065 4 6 4H18C18.7293 4 19.4288 4.28973 19.9445 4.80546C20.4603 5.32118 20.75 6.02065 20.75 6.75V18.75C20.75 19.4793 20.4603 20.1788 19.9445 20.6945C19.4288 21.2103 18.7293 21.5 18 21.5H6C5.27065 21.5 4.57118 21.2103 4.05546 20.6945C3.53973 20.1788 3.25 19.4793 3.25 18.75V6.75C3.25 6.02065 3.53973 5.32118 4.05546 4.80546Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M16 2C16.4142 2 16.75 2.33579 16.75 2.75V6.75C16.75 7.16421 16.4142 7.5 16 7.5C15.5858 7.5 15.25 7.16421 15.25 6.75V2.75C15.25 2.33579 15.5858 2 16 2Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M8 2C8.41421 2 8.75 2.33579 8.75 2.75V6.75C8.75 7.16421 8.41421 7.5 8 7.5C7.58579 7.5 7.25 7.16421 7.25 6.75V2.75C7.25 2.33579 7.58579 2 8 2Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M3.25 10.75C3.25 10.3358 3.58579 10 4 10H20C20.4142 10 20.75 10.3358 20.75 10.75C20.75 11.1642 20.4142 11.5 20 11.5H4C3.58579 11.5 3.25 11.1642 3.25 10.75Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M7 14.3929C7 14.0378 7.28782 13.75 7.64286 13.75H9.35714C9.71218 13.75 10 14.0378 10 14.3929V16.1071C10 16.4622 9.71218 16.75 9.35714 16.75H7.64286C7.28782 16.75 7 16.4622 7 16.1071V14.3929Z",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+};
+
+module.exports = CalendarIcon;

package/dist/components/MyDatePickerInput/index.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const dates = require('@mantine/dates');
+const CalendarIcon = require('./CalendarIcon.cjs');
+
+const MyDatePickerInput = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+  dates.DatePickerInput,
+  {
+    leftSection: /* @__PURE__ */ jsxRuntime.jsx(CalendarIcon, { size: props.size }),
+    leftSectionPointerEvents: "none",
+    variant: props.readOnly ? "filled" : "default",
+    ...props
+  }
+);
+
+exports.MyDatePickerInput = MyDatePickerInput;

package/dist/{index6.mjs → components/MyDatePickerInput/index.js}

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { DatePickerInput } from '@mantine/dates';
-import CalendarIcon from './index54.mjs';
+import CalendarIcon from './CalendarIcon.js';
 
 const MyDatePickerInput = (props) => /* @__PURE__ */ jsx(
   DatePickerInput,

package/dist/components/MyDateTimePicker/index.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const dates = require('@mantine/dates');
+const CalendarIcon = require('../MyDatePickerInput/CalendarIcon.cjs');
+
+const MyDateTimePicker = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+  dates.DateTimePicker,
+  {
+    leftSection: /* @__PURE__ */ jsxRuntime.jsx(CalendarIcon, { size: props.size }),
+    leftSectionPointerEvents: "none",
+    variant: props.readOnly ? "filled" : "default",
+    ...props
+  }
+);
+
+exports.MyDateTimePicker = MyDateTimePicker;

package/dist/{index7.mjs → components/MyDateTimePicker/index.js}

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { DateTimePicker } from '@mantine/dates';
-import CalendarIcon from './index54.mjs';
+import CalendarIcon from '../MyDatePickerInput/CalendarIcon.js';
 
 const MyDateTimePicker = (props) => /* @__PURE__ */ jsx(
   DateTimePicker,

package/dist/components/MyMonthPickerInput/index.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const dates = require('@mantine/dates');
+const CalendarIcon = require('../MyDatePickerInput/CalendarIcon.cjs');
+
+const MyMonthPickerInput = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+  dates.MonthPickerInput,
+  {
+    leftSection: /* @__PURE__ */ jsxRuntime.jsx(CalendarIcon, { size: props.size }),
+    leftSectionPointerEvents: "none",
+    variant: props.readOnly ? "filled" : "default",
+    ...props
+  }
+);
+
+exports.MyMonthPickerInput = MyMonthPickerInput;

package/dist/{index16.mjs → components/MyMonthPickerInput/index.js}

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { MonthPickerInput } from '@mantine/dates';
-import CalendarIcon from './index54.mjs';
+import CalendarIcon from '../MyDatePickerInput/CalendarIcon.js';
 
 const MyMonthPickerInput = (props) => /* @__PURE__ */ jsx(
   MonthPickerInput,

package/dist/components/MyMultiSelect/index.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const core = require('@mantine/core');
+
+const MyMultiSelect = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+  core.MultiSelect,
+  {
+    variant: props.readOnly ? "filled" : "default",
+    ...props
+  }
+);
+
+exports.MyMultiSelect = MyMultiSelect;

package/dist/components/MyNotifications/index.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const notifications = require('@mantine/notifications');
+;/* empty css                                                     */
+
+const MyNotifications = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+  notifications.Notifications,
+  {
+    position: "top-center",
+    ...props
+  }
+);
+
+exports.MyNotifications = MyNotifications;

package/dist/{index8.mjs → components/MyNotifications/index.js}

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { Notifications } from '@mantine/notifications';
-/* empty css         */
+/* empty css                                                   */
 
 const MyNotifications = (props) => /* @__PURE__ */ jsx(
   Notifications,

package/dist/components/MyNumberInput/index.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const core = require('@mantine/core');
+
+const MyNumberInput = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+  core.NumberInput,
+  {
+    variant: props.readOnly ? "filled" : "default",
+    ...props
+  }
+);
+
+exports.MyNumberInput = MyNumberInput;

package/dist/components/MySelect/index.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const core = require('@mantine/core');
+
+const MySelect = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+  core.Select,
+  {
+    variant: props.readOnly ? "filled" : "default",
+    ...props
+  }
+);
+
+exports.MySelect = MySelect;

package/dist/components/MyTextInput/index.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const core = require('@mantine/core');
+
+const MyTextInput = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+  core.TextInput,
+  {
+    variant: props.readOnly ? "filled" : "default",
+    ...props
+  }
+);
+
+exports.MyTextInput = MyTextInput;

package/dist/components/MyTextarea/index.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const core = require('@mantine/core');
+
+const MyTextarea = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+  core.Textarea,
+  {
+    variant: props.readOnly ? "filled" : "default",
+    ...props
+  }
+);
+
+exports.MyTextarea = MyTextarea;

package/dist/components/MyTimeInput/index.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const core = require('@mantine/core');
+
+const MyTimeInput = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+  core.TextInput,
+  {
+    variant: props.readOnly ? "filled" : "default",
+    ...props
+  }
+);
+
+exports.MyTimeInput = MyTimeInput;

package/dist/components/NavItems.cjs

@@ -0,0 +1,40 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const core = require('@mantine/core');
+const Link = require('next/link');
+const navigation = require('next/navigation');
+
+const NavItems = ({ items, activeStrategy = "includes" }) => {
+  const pathname = navigation.usePathname();
+  return /* @__PURE__ */ jsxRuntime.jsx(core.Stack, { gap: 0, children: items.map(({ href, isActive, ...navLinkProps }) => {
+    if (href) {
+      const active = isActive ?? (activeStrategy === "equals" ? href === pathname : href.includes(pathname));
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        core.NavLink,
+        {
+          active,
+          component: Link,
+          prefetch: false,
+          href,
+          ...navLinkProps
+        },
+        navLinkProps.label
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      core.NavLink,
+      {
+        active: isActive,
+        component: "button",
+        ...navLinkProps
+      },
+      navLinkProps.label
+    );
+  }) });
+};
+
+exports.NavItems = NavItems;

package/dist/components/SelectInfinity/index.cjs

@@ -0,0 +1,118 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const core = require('@mantine/core');
+const react = require('react');
+const useFetchNextPageOnScroll = require('../../hooks/useFetchNextPageOnScroll.cjs');
+const index = require('../InfinityLoader/index.cjs');
+
+function SelectInfinity({
+  value,
+  onChange,
+  data = [],
+  searchValue,
+  onSearchChange,
+  renderOption,
+  onOptionSubmit,
+  nothingFoundMessage,
+  infinity,
+  placeholder,
+  ...props
+}) {
+  const combobox = core.useCombobox({
+    onDropdownClose: () => {
+      combobox.resetSelectedOption();
+      combobox.focusTarget();
+      onSearchChange?.("");
+    },
+    onDropdownOpen: () => {
+      combobox.focusSearchInput();
+    }
+  });
+  const options = data.map((i) => /* @__PURE__ */ jsxRuntime.jsx(
+    core.Combobox.Option,
+    {
+      value: i.value,
+      children: renderOption ? renderOption({ option: i }) : i.label
+    },
+    i.value
+  ));
+  const selectedOption = data.find((i) => i.value === value);
+  const scrollRef = react.useRef(null);
+  useFetchNextPageOnScroll.useFetchNextPageOnScroll({ infinity, scrollRef });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    core.Combobox,
+    {
+      store: combobox,
+      middlewares: {
+        shift: {
+          crossAxis: true
+        }
+      },
+      onOptionSubmit: (val) => {
+        onChange?.(val);
+        onOptionSubmit?.(val);
+        combobox.closeDropdown();
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(core.Combobox.Target, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          core.InputBase,
+          {
+            component: "button",
+            type: "button",
+            pointer: true,
+            rightSection: /* @__PURE__ */ jsxRuntime.jsx(core.Combobox.Chevron, {}),
+            onClick: () => combobox.toggleDropdown(),
+            rightSectionPointerEvents: "none",
+            ...props,
+            children: selectedOption?.label || /* @__PURE__ */ jsxRuntime.jsx(core.Input.Placeholder, { children: placeholder })
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(core.Combobox.Dropdown, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            core.Combobox.Search,
+            {
+              value: searchValue,
+              onChange: (event) => onSearchChange?.(event.currentTarget.value),
+              placeholder: "Escribe para buscar"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(core.Combobox.Options, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+            core.ScrollArea.Autosize,
+            {
+              mah: 200,
+              type: "scroll",
+              viewportRef: scrollRef,
+              children: [
+                options.length > 0 ? options : !infinity.isFetching ? /* @__PURE__ */ jsxRuntime.jsx(
+                  core.Combobox.Empty,
+                  {
+                    onClick: () => combobox.closeDropdown(),
+                    className: "min-h-6",
+                    children: nothingFoundMessage ?? "Sin resultados"
+                  }
+                ) : null,
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  index.InfinityLoader,
+                  {
+                    className: "text-sm",
+                    infinity,
+                    loaderProps: {
+                      size: "sm",
+                      className: "mt-1 mb-2"
+                    }
+                  }
+                )
+              ]
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+}
+
+exports.SelectInfinity = SelectInfinity;

package/dist/{index14.mjs → components/SelectInfinity/index.js}

@@ -2,8 +2,8 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useCombobox, Combobox, InputBase, Input, ScrollArea } from '@mantine/core';
 import { useRef } from 'react';
-import { useFetchNextPageOnScroll } from './index41.mjs';
-import { InfinityLoader } from './index3.mjs';
+import { useFetchNextPageOnScroll } from '../../hooks/useFetchNextPageOnScroll.js';
+import { InfinityLoader } from '../InfinityLoader/index.js';
 
 function SelectInfinity({
   value,