@tecsinapse/cortex-react 2.3.0-beta.0 → 2.3.0

package/dist/cjs/components/Uploader/Manager.js

@@ -15,7 +15,7 @@ const Manager = ({
   files,
   onDelete,
   uploadProgressText = "Upload(s) in progress",
-  uploadSuccessText = "Upload(s) completed",
+  uploadResultText = "Upload(s) completed",
   onClose
 }) => {
   const {
@@ -47,7 +47,7 @@ const Manager = ({
                 children: min ? /* @__PURE__ */ jsxRuntime.jsx(io5.IoChevronUp, {}) : /* @__PURE__ */ jsxRuntime.jsx(io5.IoChevronDown, {})
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("h3", { "data-testid": "upload-progress", className: "font-bold text-h4", children: isLoading ? uploadProgressText : uploadSuccessText }),
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { "data-testid": "upload-progress", children: isLoading ? uploadProgressText : uploadResultText }),
             /* @__PURE__ */ jsxRuntime.jsx(
               Button.Button,
               {

package/dist/cjs/components/Uploader/Modal.js

@@ -18,7 +18,7 @@ const Modal = ({
       {
         open,
         onClose,
-        className: "flex flex-col bg-surface-base rounded-mili min-w-[70vw] max-w-[95vh] max-h-[95vh] overflow-auto text-default",
+        className: "flex flex-col bg-secondary-xlight rounded-mili min-w-[70vw] max-w-[95vh] max-h-[95vh] overflow-auto",
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center justify-between mb-deca", children: [
             /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-deca font-semibold ml-tera flex-1 text-center", children: title }),

package/dist/cjs/components/Uploader/Upload.js

@@ -105,8 +105,8 @@ const Folder = ({ name, subItems }) => {
   );
   const intent = React.useMemo(() => {
     if (loading) return "info";
-    if ((subItems ?? []).some((item) => item.status === "error") && (subItems ?? []).some((item) => item.status === "success")) {
-      return "warning";
+    if ((subItems ?? []).some((item) => item.status === "error")) {
+      return "error";
     }
     return "success";
   }, [subItems]);

package/dist/cjs/hooks/useAutocompleteGroupedOptions.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var React = require('react');
+
+const useAutocompleteGroupedOptions = ({
+  options: _options
+}) => {
+  const [options, setOptions] = React.useState();
+  const [isLoading, setIsLoading] = React.useState();
+  const [error, setError] = React.useState();
+  const initData = async (fetch) => {
+    setIsLoading(true);
+    try {
+      const result = await fetch();
+      if (result) {
+        setOptions(result ?? []);
+      }
+    } catch (e) {
+      setError(String(e));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  React.useEffect(() => {
+    if (typeof _options === "function") initData(_options);
+    else setOptions(_options);
+  }, [_options]);
+  return {
+    isLoading,
+    options,
+    error
+  };
+};
+
+exports.useAutocompleteGroupedOptions = useAutocompleteGroupedOptions;

package/dist/cjs/hooks/useAutocompleteOptions.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var React = require('react');
+
+const useAutocompleteOptions = ({
+  options: _options
+}) => {
+  const [options, setOptions] = React.useState();
+  const [isLoading, setIsLoading] = React.useState();
+  const [error, setError] = React.useState();
+  const initData = React.useCallback(async (fetch) => {
+    setIsLoading(true);
+    try {
+      const result = await fetch();
+      if (result) {
+        setOptions(result ?? []);
+      }
+    } catch (e) {
+      setError(String(e));
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+  React.useEffect(() => {
+    if (typeof _options === "function") initData(_options);
+    else setOptions(_options);
+  }, [_options]);
+  return {
+    isLoading,
+    options,
+    error
+  };
+};
+
+exports.useAutocompleteOptions = useAutocompleteOptions;

package/dist/cjs/hooks/useFileUpload.js

@@ -30,7 +30,7 @@ const useFileUpload = ({
   noClick = false,
   ignoreRejections = false,
   uploadProgressText,
-  uploadSuccessText
+  uploadResultText
 }) => {
   const {
     showManager,
@@ -100,10 +100,10 @@ const useFileUpload = ({
         onClose: closeManager,
         onDelete: handleRemoveFile,
         uploadProgressText,
-        uploadSuccessText
+        uploadResultText
       });
     }
-  }, [handleRemoveFile, closeManager]);
+  }, [handleRemoveFile, closeManager, uploadResultText]);
   const addMimeTypes = (key, acc) => {
     types.AcceptSpecificMap[key].forEach((mimeType) => {
       acc[mimeType] = [];

package/dist/cjs/index.js

@@ -44,7 +44,8 @@ var TimeFieldInput = require('./components/TimePicker/TimeFieldInput.js');
 var Toggle = require('./components/Toggle.js');
 var Tooltip = require('./components/Tooltip.js');
 var index$7 = require('./components/Uploader/index.js');
-var index$8 = require('./components/PhoneInput/index.js');
+var index$8 = require('./components/Autocomplete/index.js');
+var index$9 = require('./components/PhoneInput/index.js');
 var useCalendar = require('./hooks/useCalendar.js');
 var useCalendarCell = require('./hooks/useCalendarCell.js');
 var useCalendarGrid = require('./hooks/useCalendarGrid.js');
@@ -128,7 +129,8 @@ exports.TimeFieldInput = TimeFieldInput.TimeFieldInput;
 exports.Toggle = Toggle.Toggle;
 exports.Tooltip = Tooltip.Tooltip;
 exports.Uploader = index$7.Uploader;
-exports.PhoneInput = index$8.PhoneInput;
+exports.Autocomplete = index$8.Autocomplete;
+exports.PhoneInput = index$9.PhoneInput;
 exports.useCalendar = useCalendar.useCalendar;
 exports.useCalendarCell = useCalendarCell.useCalendarCell;
 exports.useCalendarGrid = useCalendarGrid.useCalendarGrid;

package/dist/cjs/provider/ManagerContext.js

@@ -66,6 +66,9 @@ require('../components/Tooltip.js');
 require('react-icons/hi2');
 require('react-icons/fa6');
 require('react-dom');
+require('../components/Autocomplete/context.js');
+require('../components/Autocomplete/Options.js');
+require('../components/Autocomplete/GroupedOptions.js');
 require('../components/PhoneInput/Options.js');
 require('../components/PhoneInput/context.js');
 require('react-international-phone');

package/dist/cjs/styles/calendar-cell.js

@@ -4,7 +4,7 @@ var tailwindVariants = require('tailwind-variants');
 
 const calendarCell = tailwindVariants.tv({
   slots: {
-    cell: "text-center rounded-mili hover:bg-primary-light",
+    cell: "text-center rounded-mili text-black hover:bg-primary-light",
     button: "flex aspect-square items-center justify-center"
   },
   variants: {
@@ -15,17 +15,17 @@ const calendarCell = tailwindVariants.tv({
     },
     isSelected: {
       true: {
-        cell: "bg-primary-medium border-2 border-primary-medium text-white hover:bg-primary-medium"
+        cell: "bg-primary-medium border-2 border-primary-medium text-on-primary hover:bg-primary-medium"
       }
     },
     isSelectionStart: {
       true: {
-        cell: "bg-primary-medium border-2 border-primary-medium rounded-r-none text-white"
+        cell: "bg-primary-medium border-2 border-primary-medium rounded-r-none text-on-primary"
       }
     },
     isSelectionEnd: {
       true: {
-        cell: "bg-primary-medium border-2 border-primary-medium rounded-l-none text-white"
+        cell: "bg-primary-medium border-2 border-primary-medium rounded-l-none text-on-primary"
       }
     },
     inRange: {
@@ -35,7 +35,7 @@ const calendarCell = tailwindVariants.tv({
     },
     isDisabled: {
       true: {
-        cell: "text-content-minimal cursor-default  hover:bg-surface-overlay",
+        cell: "text-secondary-light cursor-default  hover:bg-white-500",
         button: "cursor-default"
       }
     }

package/dist/cjs/styles/date-picker-input-base.js

@@ -9,7 +9,7 @@ const datePickerInputBase = tailwindVariants.tv({
   variants: {
     disabled: {
       true: {
-        icon: "text-content-minimal cursor-default"
+        icon: "text-secondary-light cursor-default"
       }
     }
   }

package/dist/cjs/styles/date-segment.js

@@ -4,12 +4,12 @@ var tailwindVariants = require('tailwind-variants');
 
 const dateSegment = tailwindVariants.tv({
   slots: {
-    base: "focus:outline-none focus:bg-content-minimal"
+    base: "focus:outline-none focus:bg-secondary-light"
   },
   variants: {
     disabled: {
       true: {
-        base: "text-content-minimal"
+        base: "text-secondary-light"
       }
     }
   }

package/dist/cjs/styles/groupButton.js

@@ -4,12 +4,12 @@ var tailwindVariants = require('tailwind-variants');
 
 const groupButton = tailwindVariants.tv({
   slots: {
-    button: "border-[1px] border-content-low px-centi py-mili items-center flex text-sub font-bold",
-    inactive: "bg-surface-overlay text-content-low disabled:bg-content-minimal",
+    button: "border-[1px] border-secondary-medium px-centi py-mili items-center flex text-sub font-bold",
+    inactive: "bg-white text-secondary-medium disabled:bg-secondary-light",
     firstButton: "first:rounded-l-mili first:border-r-0",
     lastButton: "last:rounded-r-mili last:border-l-0",
     container: "flex flex-row h-[2rem]",
-    active: "text-white bg-content-low"
+    active: "text-white bg-secondary-medium"
   }
 });
 

package/dist/cjs/styles/menubar.js

@@ -4,10 +4,10 @@ var tailwindVariants = require('tailwind-variants');
 
 const menubar = tailwindVariants.tv({
   slots: {
-    header: "relative w-screen px-kilo py-deca flex flex-row md:justify-between bg-surface-overlay z-header sm:justify-start",
+    header: "relative w-screen px-kilo py-deca flex flex-row md:justify-between bg-white z-header sm:justify-start",
     left: "flex items-center w-fit",
     right: "flex items-center gap-x-deca hidden sm:flex",
-    dropdown: "w-full bg-surface-overlay flex-1 shadow-default z-popover px-[8vw] absolute"
+    dropdown: "w-full bg-white flex-1 shadow-default z-popover px-[8vw] absolute"
   },
   variants: {
     show: {
@@ -21,7 +21,7 @@ const menubar = tailwindVariants.tv({
 const mostUsed = tailwindVariants.tv({
   slots: {
     container: "mb-kilo",
-    label: "font-bold mb-centi text-default",
+    label: "font-bold mb-centi",
     containerList: "gap-x-kilo flex flex-row"
   }
 });
@@ -29,26 +29,26 @@ const mostUsedItem = tailwindVariants.tv({
   slots: {
     container: "flex-1 py-mili",
     title: "text-primary-medium font-bold text-base",
-    category: "text-content-low text-label"
+    category: "text-secondary-medium text-label"
   }
 });
 const item = tailwindVariants.tv({
   slots: {
-    container: "flex flex-row gap-x-deca items-center text-content-medium hover:cursor-pointer text-base",
+    container: "flex flex-row gap-x-deca items-center text-secondary-dark hover:cursor-pointer text-base",
     textBehavior: "hover:text-primary-medium",
     icon: "text-primary-medium hover:cursor-pointer"
   }
 });
 const category = tailwindVariants.tv({
   slots: {
-    text: "mb-mili font-bold text-default",
-    hr: "mb-mili border-0 h-px bg-content-high",
+    text: "mb-mili font-bold",
+    hr: "mb-mili border-0 h-px bg-secondary-light",
     container: "flex flex-col gap-y-mili"
   }
 });
 const subItem = tailwindVariants.tv({
   slots: {
-    container: "pl-deca text-sub border-l-[1px] border-primary-medium text-content-medium hover:text-primary-medium cursor-pointer"
+    container: "pl-deca text-sub border-l-[1px] border-primary-medium text-secondary-dark hover:text-primary-medium cursor-pointer"
   }
 });
 const animate = tailwindVariants.tv({

package/dist/cjs/styles/progressBar.js

@@ -5,7 +5,7 @@ var tailwindVariants = require('tailwind-variants');
 const ProgressVariants = tailwindVariants.tv({
   slots: {
     container: "relative",
-    bar: "h-1.5 w-full overflow-hidden bg-content-inverse",
+    bar: "h-1.5 w-full overflow-hidden bg-secondary-xlight",
     progress: "w-full h-full rounded-mili"
   },
   variants: {

package/dist/cjs/styles/stepNodeVariants.js

@@ -30,8 +30,8 @@ const StepNodeVariants = tailwindVariants.tv({
         content: "font-bold"
       },
       false: {
-        content: "text-content-low",
-        separator: "bg-content-minimal"
+        content: "text-secondary-medium",
+        separator: "bg-secondary-light"
       }
     },
     selected: {

package/dist/cjs/styles/time-field-input.js

@@ -9,7 +9,7 @@ const timePickerInputBase = tailwindVariants.tv({
   variants: {
     disabled: {
       true: {
-        icon: "text-content-minimal cursor-default"
+        icon: "text-secondary-light cursor-default"
       }
     }
   }

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

@@ -8,6 +8,9 @@ const AccordionRoot = ({
   defaultOpen,
   label,
   floating,
+  showDivider,
+  showArrowBorder,
+  arrowPosition,
   onOpen,
   invertedArrow,
   onClose,
@@ -21,6 +24,9 @@ const AccordionRoot = ({
         floating,
         onOpen,
         onClose,
+        showDivider,
+        showArrowBorder,
+        arrowPosition,
         invertedArrow,
         direction
       }

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

@@ -5,7 +5,11 @@ import { useAccordionContext } from './context.js';
 
 const AccordionTrigger = ({
   label,
+  children,
   floating = false,
+  arrowPosition = "left",
+  showDivider = true,
+  showArrowBorder = true,
   /**
    * Only applied to trigger arrow
    */
@@ -16,9 +20,9 @@ const AccordionTrigger = ({
   direction = "horizontal"
 }) => {
   const { open, toggle } = useAccordionContext();
-  if (!floating && !label) {
+  if (!floating && !label && !children) {
     throw new Error(
-      "A label must be specified if the trigger is not floating variant"
+      "A label or children must be specified if the trigger is not floating variant"
     );
   }
   const action = () => {
@@ -33,24 +37,40 @@ const AccordionTrigger = ({
     "div",
     {
       className: clsx(
-        "flex justify-between align-center border-content-minimal cursor-pointer",
+        "flex justify-between align-center cursor-pointer",
         { "mr-deca": floating && direction === "horizontal" },
         { "mb-deca": floating && direction === "vertical" },
-        { "border-r flex-col px-mili": direction === "horizontal" },
-        { "border-b py-mili": direction === "vertical" }
+        {
+          "border-r border-secondary-light flex-col px-mili": direction === "horizontal"
+        },
+        {
+          "border-b border-secondary-light py-mili": showDivider && direction === "vertical"
+        }
       ),
       onClick: action,
       children: [
+        !floating && arrowPosition === "right" && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: clsx({
+              "-rotate-180 [writing-mode:vertical-lr]": direction === "horizontal"
+            }),
+            children: children ?? label
+          }
+        ),
         /* @__PURE__ */ jsx(
           "div",
           {
             className: clsx(
-              "rounded-mili border border-content-minimal flex align-center justify-center p-micro",
+              "rounded-mili flex align-center justify-center p-micro",
+              {
+                "absolute -translate-x-micro translate-y-deca bg-white": floating && direction === "horizontal"
+              },
               {
-                "absolute -translate-x-micro translate-y-deca bg-surface-overlay": floating && direction === "horizontal"
+                "absolute -translate-y-micro translate-x-deca bg-white": floating && direction === "vertical"
               },
               {
-                "absolute -translate-y-micro translate-x-deca bg-surface-overlay": floating && direction === "vertical"
+                "border border-secondary-light": showArrowBorder
               },
               className
             ),
@@ -58,7 +78,7 @@ const AccordionTrigger = ({
               LiaAngleRightSolid,
               {
                 className: clsx(
-                  "text-content-low transition-transform duration-200",
+                  "text-secondary-medium transition-transform duration-200",
                   {
                     "rotate-180": invertedArrow ? !open : open
                   }
@@ -68,7 +88,7 @@ const AccordionTrigger = ({
               LiaAngleDownSolid,
               {
                 className: clsx(
-                  "text-content-low transition-transform duration-200",
+                  "text-secondary-medium transition-transform duration-200",
                   {
                     "rotate-180": invertedArrow ? !open : open
                   }
@@ -77,15 +97,15 @@ const AccordionTrigger = ({
             )
           }
         ),
-        !floating ? /* @__PURE__ */ jsx(
+        !floating && arrowPosition === "left" && /* @__PURE__ */ jsx(
           "span",
           {
             className: clsx({
               "-rotate-180 [writing-mode:vertical-lr]": direction === "horizontal"
             }),
-            children: label
+            children: children ?? label
           }
-        ) : null
+        )
       ]
     }
   );

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

@@ -0,0 +1,40 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { selectVariants } from '@tecsinapse/cortex-core';
+import { useContext } from 'react';
+import { AutocompleteOption } from './Option.js';
+import { useAutocompleteGroupedOptions } from '../../hooks/useAutocompleteGroupedOptions.js';
+import { SkeletonOptions } from '../Select/SkeletonOptions.js';
+import { AutocompleteContext } from './context.js';
+
+const { groupedTitle, list } = selectVariants();
+const AutocompleteGroupedOptions = ({
+  onSelect,
+  groupedLabelExtractor,
+  options
+}) => {
+  const { options: _options, isLoading } = useAutocompleteGroupedOptions({
+    options
+  });
+  const context = useContext(
+    AutocompleteContext
+  );
+  if (!context)
+    throw new Error(
+      "AutocompleteGroupedOptions must be used within AutocompleteRoot"
+    );
+  const { keyExtractor } = context;
+  return isLoading ? /* @__PURE__ */ jsx(SkeletonOptions, {}) : /* @__PURE__ */ jsx("ul", { role: "listbox", className: list(), children: [..._options ?? []].map(([key, value]) => /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("span", { className: groupedTitle(), children: groupedLabelExtractor?.(key) }),
+    value.map((option) => /* @__PURE__ */ jsx(
+      AutocompleteOption,
+      {
+        grouped: true,
+        option,
+        onSelect
+      },
+      keyExtractor(option)
+    ))
+  ] }, key)) });
+};
+
+export { AutocompleteGroupedOptions };

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

@@ -0,0 +1,38 @@
+import { jsx } from 'react/jsx-runtime';
+import { option } from '@tecsinapse/cortex-core';
+import { useContext, useCallback } from 'react';
+import { AutocompleteContext } from './context.js';
+
+const AutocompleteOption = ({
+  option: option$1,
+  onSelect,
+  grouped = false
+}) => {
+  const context = useContext(
+    AutocompleteContext
+  );
+  if (!context)
+    throw new Error("AutocompleteOptions must be used within AutocompleteRoot");
+  const { setOpen, labelExtractor } = context;
+  const handleSelect = useCallback(
+    (option2) => {
+      setOpen(false);
+      onSelect?.(option2);
+    },
+    [onSelect, setOpen]
+  );
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      onClick: () => handleSelect(option$1),
+      className: option({
+        selected: false,
+        grouped
+      }),
+      role: "option",
+      children: /* @__PURE__ */ jsx("span", { className: "truncate flex-1", children: labelExtractor(option$1) })
+    }
+  );
+};
+
+export { AutocompleteOption };

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

@@ -0,0 +1,34 @@
+import { jsx } from 'react/jsx-runtime';
+import { selectVariants } from '@tecsinapse/cortex-core';
+import { useContext } from 'react';
+import { AutocompleteOption } from './Option.js';
+import { useAutocompleteOptions } from '../../hooks/useAutocompleteOptions.js';
+import { SkeletonOptions } from '../Select/SkeletonOptions.js';
+import { AutocompleteContext } from './context.js';
+
+const { list } = selectVariants();
+const AutocompleteOptions = ({
+  options,
+  onSelect,
+  children
+}) => {
+  const context = useContext(
+    AutocompleteContext
+  );
+  if (!context)
+    throw new Error("AutocompleteOptions must be used within AutocompleteRoot");
+  const { keyExtractor } = context;
+  const { options: _options, isLoading } = useAutocompleteOptions({
+    options
+  });
+  return isLoading ? /* @__PURE__ */ jsx(SkeletonOptions, {}) : /* @__PURE__ */ jsx("ul", { role: "listbox", className: list(), children: children ?? _options?.map((option) => /* @__PURE__ */ jsx(
+    AutocompleteOption,
+    {
+      option,
+      onSelect
+    },
+    keyExtractor(option)
+  )) });
+};
+
+export { AutocompleteOptions };

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

@@ -0,0 +1,32 @@
+import { jsx } from 'react/jsx-runtime';
+import { useContext } from 'react';
+import { FloatingPortal } from '@floating-ui/react';
+import { Popover } from '../Popover/index.js';
+import { AutocompleteContext } from './context.js';
+import clsx from 'clsx';
+
+const AutocompletePopover = ({
+  children,
+  className
+}) => {
+  const context = useContext(AutocompleteContext);
+  if (!context)
+    throw new Error("AutocompletePopover must be used within AutocompleteRoot");
+  const { triggerWidth } = context;
+  return /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
+    Popover.Content,
+    {
+      className: clsx(
+        "bg-white shadow-md rounded-md overflow-y-auto max-h-[30vh] outline-none z-9999",
+        className
+      ),
+      style: {
+        width: triggerWidth ? `${triggerWidth}px` : "auto"
+      },
+      initialFocus: -1,
+      children
+    }
+  ) });
+};
+
+export { AutocompletePopover };

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

@@ -0,0 +1,38 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Popover } from '../Popover/index.js';
+import { AutocompleteContext } from './context.js';
+
+const AutocompleteRoot = ({
+  keyExtractor,
+  labelExtractor,
+  children
+}) => {
+  const [triggerWidth, setTriggerWidth] = useState();
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsx(
+    AutocompleteContext.Provider,
+    {
+      value: {
+        open,
+        setOpen,
+        triggerWidth,
+        setTriggerWidth,
+        keyExtractor,
+        labelExtractor
+      },
+      children: /* @__PURE__ */ jsx(
+        Popover.Root,
+        {
+          placement: "bottom-start",
+          controlled: true,
+          isOpen: open,
+          setIsOpen: setOpen,
+          children: /* @__PURE__ */ jsx("div", { className: "relative w-full h-full", children })
+        }
+      )
+    }
+  );
+};
+
+export { AutocompleteRoot };