@tecsinapse/cortex-react 1.13.1 → 1.13.3

package/dist/esm/components/ProgressBar/Progress.js

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import { jsx } from 'react/jsx-runtime';
 import '../../styles/calendar-cell.js';
 import '../../styles/date-picker-input-base.js';
 import '../../styles/date-segment.js';
@@ -11,7 +11,7 @@ const Progress = ({
   intent = "default",
   infinite
 }) => {
-  return /* @__PURE__ */ React__default.createElement("div", { className: container(), "data-testid": "linear-progress" }, /* @__PURE__ */ React__default.createElement("div", { className: bar() }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx("div", { className: container(), "data-testid": "linear-progress", children: /* @__PURE__ */ jsx("div", { className: bar(), children: /* @__PURE__ */ jsx(
     "div",
     {
       style: {
@@ -21,7 +21,7 @@ const Progress = ({
       "data-testid": "progress-filled",
       className: progress({ intent, infinite })
     }
-  )));
+  ) }) });
 };
 
 export { Progress };

package/dist/esm/components/ProgressBar/ProgressBar.js

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import { jsx } from 'react/jsx-runtime';
 import { Progress } from './Progress.js';
 
 const ProgressBar = ({
@@ -6,7 +6,7 @@ const ProgressBar = ({
   intent = "default",
   infinite = false
 }) => {
-  return /* @__PURE__ */ React__default.createElement(Progress, { value, intent, infinite });
+  return /* @__PURE__ */ jsx(Progress, { value, intent, infinite });
 };
 
 export { ProgressBar };

package/dist/esm/components/RadioButton.js

@@ -1,18 +1,21 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { radioButtonStyles } from '@tecsinapse/cortex-core';
-import React__default, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 
 const { container, input, label: labelStyle } = radioButtonStyles();
 const RadioButton = forwardRef(
   ({ label, reversed, id, ...rest }, ref) => {
-    return /* @__PURE__ */ React__default.createElement(
+    return /* @__PURE__ */ jsxs(
       "div",
       {
         className: container({ reversed }),
         ref,
-        "data-testid": "radio-button-container"
-      },
-      /* @__PURE__ */ React__default.createElement("input", { id, type: "radio", className: input(), ...rest }),
-      label ? /* @__PURE__ */ React__default.createElement("label", { htmlFor: id, className: labelStyle() }, label) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null)
+        "data-testid": "radio-button-container",
+        children: [
+          /* @__PURE__ */ jsx("input", { id, type: "radio", className: input(), ...rest }),
+          label ? /* @__PURE__ */ jsx("label", { htmlFor: id, className: labelStyle(), children: label }) : /* @__PURE__ */ jsx(Fragment, {})
+        ]
+      }
     );
   }
 );

package/dist/esm/components/ScrollableDigitSelector.js

@@ -0,0 +1,56 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useMemo, useEffect } from 'react';
+import clsx from 'clsx';
+
+const formatValue = (val) => {
+  return val.toString().padStart(2, "0");
+};
+const ScrollableDigitSelector = ({
+  value,
+  onChange,
+  min,
+  max,
+  step = 1
+}) => {
+  const containerRef = useRef(null);
+  const values = useMemo(() => {
+    const vals = [];
+    for (let i = min; i <= max; i += step) {
+      vals.push(i);
+    }
+    return vals;
+  }, [min, max, step]);
+  const scrollToValue = (targetValue) => {
+    if (containerRef.current) {
+      const index = values.indexOf(targetValue);
+      if (index !== -1) {
+        const itemHeight = 27;
+        const scrollTop = index * itemHeight;
+        containerRef.current.scrollTop = scrollTop;
+        containerRef.current.scrollTo({ top: scrollTop, behavior: "smooth" });
+      }
+    }
+  };
+  useEffect(() => {
+    scrollToValue(value);
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "flex flex-col items-center gap-y-micro p-micro overflow-auto",
+      ref: containerRef,
+      children: values.map((val) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { onClick: () => onChange(val), className: "flex justify-center", children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: clsx(
+            "p-micro rounded-micro border-1 border-transparent hover:bg-primary-light hover:border-primary cursor-pointer",
+            value === val && "bg-primary-medium text-white"
+          ),
+          children: formatValue(val)
+        }
+      ) }) }, val))
+    }
+  );
+};
+
+export { ScrollableDigitSelector };

package/dist/esm/components/Select/Content.js

@@ -1,9 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import React__default, { useRef } from 'react';
+import { useRef } from 'react';
 
 const Content = ({ children, className }) => {
   const ref = useRef(null);
-  return /* @__PURE__ */ React__default.createElement("div", { className: clsx("w-full relative", className), ref }, children);
+  return /* @__PURE__ */ jsx("div", { className: clsx("w-full relative", className), ref, children });
 };
 
 export { Content };

package/dist/esm/components/Select/CustomMultiOption.js

@@ -1,5 +1,5 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { option, checkbox } from '@tecsinapse/cortex-core';
-import React__default from 'react';
 import { useMultiSelectOption } from './useMultiSelectOption.js';
 
 const SelectCustomMultiOption = ({
@@ -12,24 +12,26 @@ const SelectCustomMultiOption = ({
     option$1,
     onSelect
   );
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsxs(
     "li",
     {
       onClick: onClickOption,
       className: option({ grouped }),
-      role: "option"
-    },
-    /* @__PURE__ */ React__default.createElement(
-      "input",
-      {
-        type: "checkbox",
-        checked: isChecked,
-        className: checkbox({ className: "pointer-events-none" }),
-        onChange: () => false,
-        ref: inputRef
-      }
-    ),
-    children
+      role: "option",
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: isChecked,
+            className: checkbox({ className: "pointer-events-none" }),
+            onChange: () => false,
+            ref: inputRef
+          }
+        ),
+        children
+      ]
+    }
   );
 };
 

package/dist/esm/components/Select/CustomOption.js

@@ -1,4 +1,5 @@
-import React__default, { useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { useContext } from 'react';
 import { SelectContext } from './context.js';
 import { option } from '@tecsinapse/cortex-core';
 
@@ -9,7 +10,7 @@ const SelectCustomOption = ({
   children
 }) => {
   const { keyExtractor, value } = useContext(SelectContext);
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx(
     "li",
     {
       onClick: (e) => {
@@ -20,9 +21,9 @@ const SelectCustomOption = ({
         selected: value && keyExtractor(value) === keyExtractor(option$1),
         grouped
       }),
-      role: "option"
-    },
-    children
+      role: "option",
+      children
+    }
   );
 };
 

package/dist/esm/components/Select/GroupedOptions.js

@@ -1,5 +1,6 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { selectVariants } from '@tecsinapse/cortex-core';
-import React__default, { useContext, useCallback } from 'react';
+import { useContext, useCallback } from 'react';
 import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
@@ -29,15 +30,18 @@ const SelectGroupedOptions = ({
     },
     [onSelect]
   );
-  return isLoading ? /* @__PURE__ */ React__default.createElement(SkeletonOptions, null) : /* @__PURE__ */ React__default.createElement("ul", { role: "select", className: list() }, [..._options ?? []].map(([key, value]) => /* @__PURE__ */ React__default.createElement("div", { key }, /* @__PURE__ */ React__default.createElement("span", { className: groupedTitle() }, groupedLabelExtractor?.(key)), value.map((option) => /* @__PURE__ */ React__default.createElement(
-    SelectOption,
-    {
-      grouped: true,
-      option,
-      key: keyExtractor(option),
-      onSelectOption: handleSelect
-    }
-  )))));
+  return isLoading ? /* @__PURE__ */ jsx(SkeletonOptions, {}) : /* @__PURE__ */ jsx("ul", { role: "select", className: list(), children: [..._options ?? []].map(([key, value]) => /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("span", { className: groupedTitle(), children: groupedLabelExtractor?.(key) }),
+    value.map((option) => /* @__PURE__ */ jsx(
+      SelectOption,
+      {
+        grouped: true,
+        option,
+        onSelectOption: handleSelect
+      },
+      keyExtractor(option)
+    ))
+  ] }, key)) });
 };
 
 export { SelectGroupedOptions };

package/dist/esm/components/Select/MultiCheckAllOptions.js

@@ -1,5 +1,6 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { option, checkbox } from '@tecsinapse/cortex-core';
-import React__default, { useContext, useMemo, useCallback } from 'react';
+import { useContext, useMemo, useCallback } from 'react';
 import { SelectContext, SelectMultiOptionsContext } from './context.js';
 
 const SelectMultiCheckAllOptions = ({
@@ -34,15 +35,18 @@ const SelectMultiCheckAllOptions = ({
       onSelect?.(updateSelected);
     }
   }, [options, onSelect]);
-  return options?.length ? /* @__PURE__ */ React__default.createElement("div", { className: option(), onClick: checkAll }, /* @__PURE__ */ React__default.createElement(
-    "input",
-    {
-      type: "checkbox",
-      className: checkbox(),
-      onChange: () => void 0,
-      checked: isChecked
-    }
-  ), /* @__PURE__ */ React__default.createElement("span", null, checkAllLabel)) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
+  return options?.length ? /* @__PURE__ */ jsxs("div", { className: option(), onClick: checkAll, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "checkbox",
+        className: checkbox(),
+        onChange: () => void 0,
+        checked: isChecked
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { children: checkAllLabel })
+  ] }) : /* @__PURE__ */ jsx(Fragment, {});
 };
 
 export { SelectMultiCheckAllOptions };

package/dist/esm/components/Select/MultiGroupedOptions.js

@@ -1,5 +1,6 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { selectVariants } from '@tecsinapse/cortex-core';
-import React__default, { useContext, useMemo } from 'react';
+import { useContext, useMemo } from 'react';
 import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
@@ -26,21 +27,26 @@ const SelectMultiGroupedOptions = ({
     () => _options ? Array.from(_options?.values()).flatMap((value) => value) : [],
     [_options]
   );
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsxs(
     SelectMultiOptionsContext.Provider,
     {
-      value: { onSelect, options: flattenMap }
-    },
-    children,
-    isLoading ? /* @__PURE__ */ React__default.createElement(SkeletonOptions, null) : /* @__PURE__ */ React__default.createElement("ul", { role: "select", className: list() }, [..._options ?? []].map(([key, value]) => /* @__PURE__ */ React__default.createElement("div", { key }, /* @__PURE__ */ React__default.createElement("span", { className: groupedTitle() }, groupedLabelExtractor?.(key)), value.map((option) => /* @__PURE__ */ React__default.createElement(
-      SelectMultiOption,
-      {
-        grouped: true,
-        option,
-        key: keyExtractor(option),
-        onSelect
-      }
-    )))))
+      value: { onSelect, options: flattenMap },
+      children: [
+        children,
+        isLoading ? /* @__PURE__ */ jsx(SkeletonOptions, {}) : /* @__PURE__ */ jsx("ul", { role: "select", className: list(), children: [..._options ?? []].map(([key, value]) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("span", { className: groupedTitle(), children: groupedLabelExtractor?.(key) }),
+          value.map((option) => /* @__PURE__ */ jsx(
+            SelectMultiOption,
+            {
+              grouped: true,
+              option,
+              onSelect
+            },
+            keyExtractor(option)
+          ))
+        ] }, key)) })
+      ]
+    }
   );
 };
 

package/dist/esm/components/Select/MultiOption.js

@@ -1,5 +1,5 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { option, checkbox } from '@tecsinapse/cortex-core';
-import React__default from 'react';
 import { useMultiSelectOption } from './useMultiSelectOption.js';
 
 const SelectMultiOption = ({
@@ -8,24 +8,26 @@ const SelectMultiOption = ({
   grouped = false
 }) => {
   const { onClickOption, isChecked, inputRef, labelExtractor } = useMultiSelectOption(option$1, onSelect);
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsxs(
     "li",
     {
       onClick: onClickOption,
       className: option({ grouped }),
-      role: "option"
-    },
-    /* @__PURE__ */ React__default.createElement(
-      "input",
-      {
-        type: "checkbox",
-        checked: isChecked,
-        className: checkbox({ className: "pointer-events-none" }),
-        onChange: () => false,
-        ref: inputRef
-      }
-    ),
-    labelExtractor(option$1)
+      role: "option",
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: isChecked,
+            className: checkbox({ className: "pointer-events-none" }),
+            onChange: () => false,
+            ref: inputRef
+          }
+        ),
+        labelExtractor(option$1)
+      ]
+    }
   );
 };
 

package/dist/esm/components/Select/MultiOptions.js

@@ -1,5 +1,6 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { selectVariants } from '@tecsinapse/cortex-core';
-import React__default, { useContext } from 'react';
+import { useContext } from 'react';
 import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
@@ -21,14 +22,17 @@ const SelectMultiOptions = ({
 }) => {
   const { keyExtractor } = useContext(SelectContext);
   const { options: _options, isLoading } = useSelectOptions({ options });
-  return /* @__PURE__ */ React__default.createElement(SelectMultiOptionsContext.Provider, { value: { onSelect, options: _options } }, isLoading ? /* @__PURE__ */ React__default.createElement(SkeletonOptions, null) : /* @__PURE__ */ React__default.createElement("ul", { role: "select", className: list() }, children, _options?.map((option) => /* @__PURE__ */ React__default.createElement(
-    SelectMultiOption,
-    {
-      option,
-      key: keyExtractor(option),
-      onSelect
-    }
-  ))));
+  return /* @__PURE__ */ jsx(SelectMultiOptionsContext.Provider, { value: { onSelect, options: _options }, children: isLoading ? /* @__PURE__ */ jsx(SkeletonOptions, {}) : /* @__PURE__ */ jsxs("ul", { role: "select", className: list(), children: [
+    children,
+    _options?.map((option) => /* @__PURE__ */ jsx(
+      SelectMultiOption,
+      {
+        option,
+        onSelect
+      },
+      keyExtractor(option)
+    ))
+  ] }) });
 };
 
 export { SelectMultiOptions };

package/dist/esm/components/Select/Option.js

@@ -1,5 +1,6 @@
+import { jsx } from 'react/jsx-runtime';
 import { option } from '@tecsinapse/cortex-core';
-import React__default, { useContext } from 'react';
+import { useContext } from 'react';
 import { SelectContext } from './context.js';
 
 const SelectOption = ({
@@ -8,7 +9,7 @@ const SelectOption = ({
   grouped = false
 }) => {
   const { keyExtractor, labelExtractor, value } = useContext(SelectContext);
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx(
     "li",
     {
       onClick: () => onSelectOption(option$1),
@@ -16,9 +17,9 @@ const SelectOption = ({
         selected: value && keyExtractor(value) === keyExtractor(option$1),
         grouped
       }),
-      role: "option"
-    },
-    labelExtractor(option$1)
+      role: "option",
+      children: labelExtractor(option$1)
+    }
   );
 };
 

package/dist/esm/components/Select/Options.js

@@ -1,5 +1,6 @@
+import { jsx } from 'react/jsx-runtime';
 import { selectVariants } from '@tecsinapse/cortex-core';
-import React__default, { useContext, useCallback, useMemo } from 'react';
+import { useContext, useCallback, useMemo } from 'react';
 import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
@@ -30,17 +31,17 @@ const SelectOptions = ({
     [onSelect]
   );
   const defaultOptions = useMemo(
-    () => _options?.map((option) => /* @__PURE__ */ React__default.createElement(
+    () => _options?.map((option) => /* @__PURE__ */ jsx(
       SelectOption,
       {
         option,
-        key: keyExtractor(option),
         onSelectOption: handleSelect
-      }
+      },
+      keyExtractor(option)
     )) ?? [],
     [_options, keyExtractor, handleSelect]
   );
-  return isLoading ? /* @__PURE__ */ React__default.createElement(SkeletonOptions, null) : /* @__PURE__ */ React__default.createElement("ul", { role: "select", className: list() }, children ?? defaultOptions);
+  return isLoading ? /* @__PURE__ */ jsx(SkeletonOptions, {}) : /* @__PURE__ */ jsx("ul", { role: "select", className: list(), children: children ?? defaultOptions });
 };
 
 export { SelectOptions };

package/dist/esm/components/Select/Popover.js

@@ -1,21 +1,22 @@
-import React__default, { useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { useContext } from 'react';
 import { Popover } from '../Popover/index.js';
 import { FloatingPortal } from '@floating-ui/react';
 import { SelectContext } from './context.js';
 
 const SelectPopover = ({ children }) => {
   const { triggerWidth } = useContext(SelectContext);
-  return /* @__PURE__ */ React__default.createElement(FloatingPortal, null, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
     Popover.Content,
     {
       className: "bg-white max-h-[30vh] overflow-y-scroll gap-y-mili flex flex-col p-0",
       style: {
         width: triggerWidth ? `${triggerWidth}px` : "auto",
         zIndex: 9999
-      }
-    },
-    children
-  ));
+      },
+      children
+    }
+  ) });
 };
 
 export { SelectPopover };

package/dist/esm/components/Select/Root.js

@@ -1,4 +1,5 @@
-import React__default, { useState } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
 import { Popover } from '../Popover/index.js';
 import { Content } from './Content.js';
 import { SelectContext } from './context.js';
@@ -11,26 +12,26 @@ const SelectRoot = ({
   className
 }) => {
   const [triggerWidth, setTriggerWidth] = useState(0);
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx(
     Popover.Root,
     {
       fallbackPlacements: ["bottom", "top"],
       placement: "bottom",
-      trigger: "click"
-    },
-    /* @__PURE__ */ React__default.createElement(
-      SelectContext.Provider,
-      {
-        value: {
-          value,
-          keyExtractor,
-          labelExtractor,
-          triggerWidth,
-          setTriggerWidth
+      trigger: "click",
+      children: /* @__PURE__ */ jsx(
+        SelectContext.Provider,
+        {
+          value: {
+            value,
+            keyExtractor,
+            labelExtractor,
+            triggerWidth,
+            setTriggerWidth
+          },
+          children: /* @__PURE__ */ jsx(Content, { className, children })
         }
-      },
-      /* @__PURE__ */ React__default.createElement(Content, { className }, children)
-    )
+      )
+    }
   );
 };
 

package/dist/esm/components/Select/SkeletonOptions.js

@@ -1,9 +1,9 @@
-import React__default from 'react';
+import { jsx } from 'react/jsx-runtime';
 import { Skeleton } from '../Skeleton.js';
 
 const optionSkeletonStyle = "w-full px-deca my-nano h-[30px]";
 const SkeletonOptions = () => {
-  return /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col gap-y-nano" }, Array.from(Array(10).keys()).map((value) => /* @__PURE__ */ React__default.createElement(Skeleton, { key: value }, /* @__PURE__ */ React__default.createElement("div", { className: optionSkeletonStyle }))));
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-nano", children: Array.from(Array(10).keys()).map((value) => /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx("div", { className: optionSkeletonStyle }) }, value)) });
 };
 
 export { SkeletonOptions };

package/dist/esm/components/Select/Trigger.js

@@ -1,4 +1,5 @@
-import React__default, { useContext, useRef, useMemo, useEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useContext, useRef, useMemo, useEffect } from 'react';
 import { IoChevronDownOutline } from 'react-icons/io5';
 import { Popover } from '../Popover/index.js';
 import { SelectContext } from './context.js';
@@ -29,36 +30,41 @@ const SelectTrigger = ({
       setTriggerWidth(width);
     }
   }, [triggerRef.current, setTriggerWidth]);
-  return /* @__PURE__ */ React__default.createElement(Popover.Trigger, { disabled }, /* @__PURE__ */ React__default.createElement("div", { className: "w-full gap-mili" }, /* @__PURE__ */ React__default.createElement(
-    "button",
-    {
-      ref: triggerRef,
-      className: button({ className: rest.className }),
-      disabled,
-      role: "button",
-      ...rest
-    },
-    /* @__PURE__ */ React__default.createElement(
-      "span",
+  return /* @__PURE__ */ jsx(Popover.Trigger, { disabled, children: /* @__PURE__ */ jsxs("div", { className: "w-full gap-mili", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
       {
-        className: clsx({ "mt-mili": hasValue && label }),
-        "data-testid": "select-placeholder"
-      },
-      _placeholder
+        ref: triggerRef,
+        className: button({ className: rest.className }),
+        disabled,
+        role: "button",
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: clsx({ "mt-mili": hasValue && label }),
+              "data-testid": "select-placeholder",
+              children: _placeholder
+            }
+          ),
+          /* @__PURE__ */ jsx(IoChevronDownOutline, {})
+        ]
+      }
     ),
-    /* @__PURE__ */ React__default.createElement(IoChevronDownOutline, null)
-  ), hasValue && label ? /* @__PURE__ */ React__default.createElement(
-    "label",
-    {
-      htmlFor: "select-trigger",
-      className: clsx(
-        "ml-centi",
-        labelStyle({ intent: "default", placeholder })
-      ),
-      "data-testid": "input-label"
-    },
-    label
-  ) : null));
+    hasValue && label ? /* @__PURE__ */ jsx(
+      "label",
+      {
+        htmlFor: "select-trigger",
+        className: clsx(
+          "ml-centi",
+          labelStyle({ intent: "default", placeholder })
+        ),
+        "data-testid": "input-label",
+        children: label
+      }
+    ) : null
+  ] }) });
 };
 
 export { SelectTrigger };