@tecsinapse/cortex-react 1.3.0-beta.0 → 1.3.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "1.3.0-beta.0",
+  "version": "1.3.0-beta.2",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -18,12 +18,14 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@tecsinapse/cortex-core": "0.2.2-beta.2",
+    "@internationalized/date": "*",
+    "@tecsinapse/cortex-core": "0.3.0-beta.0",
     "clsx": "*",
     "react-aria": "^3.33.1",
     "react-icons": "^5.2.1",
     "react-stately": "^3.31.1",
-    "sonner": "^1.5.0"
+    "sonner": "^1.5.0",
+    "tailwind-merge": "*"
   },
   "repository": {
     "type": "git",
@@ -39,5 +41,5 @@
     "react-dom": ">=18.0.0",
     "tailwind": ">=3.3.0"
   },
-  "gitHead": "0ecb7949c627cb5d2fe9395f148e48a0bb071599"
+  "gitHead": "cc8903eb4c3ec693fa6dbd384bfc407f39e144ae"
 }

package/dist/cjs/components/SearchInput.js

@@ -1,82 +0,0 @@
-'use strict';
-
-var React = require('react');
-require('clsx');
-require('./Badge.js');
-require('./BaseSnackbar.js');
-require('react-icons/md');
-require('./Card.js');
-var Button = require('./Button.js');
-require('@internationalized/date');
-require('react-aria');
-require('react-stately');
-var useDebouncedState = require('../hooks/useDebouncedState.js');
-require('./CalendarCell.js');
-require('@tecsinapse/cortex-core');
-require('react-icons/fa');
-require('react-icons/io');
-require('./GroupButton.js');
-require('./Hint.js');
-var Input = require('./Input.js');
-require('./Modal.js');
-require('../styles/calendar-cell.js');
-require('../styles/groupButton.js');
-require('../styles/progressBar.js');
-require('./Select.js');
-require('./Tag.js');
-require('./TextArea.js');
-require('./Toggle.js');
-var ai = require('react-icons/ai');
-var io5 = require('react-icons/io5');
-
-const inputFace = "bg-white w-full";
-const inputLeft = "flex items-center";
-const SearchInput = ({
-  label,
-  placeholder,
-  isSubmitting = false,
-  onChange,
-  onClick,
-  BOUNCE_TIMEOUT = 1e3
-}) => {
-  const [bouncedText, setBouncedText] = React.useState("");
-  const [searchInput, setSearchInput] = useDebouncedState.useDebouncedState(
-    "",
-    setBouncedText,
-    BOUNCE_TIMEOUT
-  );
-  React.useEffect(() => {
-    if (onChange) {
-      onChange(bouncedText);
-    }
-  }, [bouncedText]);
-  const handleEnterKey = (e) => {
-    if (e.key === "Enter" && onClick && searchInput) {
-      onClick(searchInput);
-    }
-  };
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-row w-full space-x-mili" }, /* @__PURE__ */ React.createElement(Input.Input.Face, { variants: { className: inputFace } }, !onClick && /* @__PURE__ */ React.createElement(Input.Input.Left, { className: inputLeft }, /* @__PURE__ */ React.createElement(io5.IoSearchOutline, { "data-testid": "icon-search-left" })), /* @__PURE__ */ React.createElement(
-    Input.Input.Box,
-    {
-      placeholder,
-      label,
-      onChange: (e) => setSearchInput(e.target.value),
-      onKeyDown: handleEnterKey,
-      disabled: isSubmitting
-    }
-  )), onClick && /* @__PURE__ */ React.createElement(
-    Button.Button,
-    {
-      variants: {
-        intent: "primary",
-        size: "square",
-        className: "h-11"
-      },
-      onClick: () => onClick(searchInput),
-      disabled: !searchInput || isSubmitting
-    },
-    isSubmitting ? /* @__PURE__ */ React.createElement("div", { className: "animate-spin" }, /* @__PURE__ */ React.createElement(ai.AiOutlineLoading, { "data-testid": "icon-loading" })) : /* @__PURE__ */ React.createElement(io5.IoSearchOutline, { "data-testid": "icon-search-button" })
-  ));
-};
-
-module.exports = SearchInput;

package/dist/cjs/components/Select.js

@@ -1,101 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var cortexCore = require('@tecsinapse/cortex-core');
-var React = require('react');
-var io = require('react-icons/io');
-var io5 = require('react-icons/io5');
-var Hint = require('./Hint.js');
-var SearchInput = require('./SearchInput.js');
-
-const { button, dropdown, groupedTitle, containerGrouped, hintBody } = cortexCore.selectVariants();
-const Select = (props) => {
-  const {
-    label,
-    keyExtractor,
-    labelExtractor,
-    options,
-    value,
-    onSelect,
-    onSearch,
-    disabled,
-    grouped,
-    groupedLabelExtractor,
-    hint,
-    placeholderSearchInput,
-    variant = "default"
-  } = props;
-  const [open, setOpen] = React.useState(false);
-  const placeholder = React.useMemo(
-    () => value ? labelExtractor(value) : label,
-    [label, labelExtractor, value]
-  );
-  const ref = React.useRef(null);
-  const handleClickOutside = React.useCallback((event) => {
-    if (ref.current && !ref.current.contains(event.target)) {
-      setOpen(false);
-    }
-  }, []);
-  const handleSelect = React.useCallback(
-    (option) => {
-      onSelect(option);
-      setOpen(false);
-    },
-    [onSelect]
-  );
-  React.useEffect(() => {
-    document.addEventListener("click", handleClickOutside, true);
-    return () => {
-      document.removeEventListener("click", handleClickOutside, true);
-    };
-  }, [handleClickOutside]);
-  const Option = ({ option }) => /* @__PURE__ */ React.createElement(
-    "li",
-    {
-      onClick: () => handleSelect(option),
-      className: cortexCore.option(),
-      role: "option"
-    },
-    labelExtractor(option)
-  );
-  const GroupedOptions = ({ options: options2 }) => /* @__PURE__ */ React.createElement(React.Fragment, null, [...options2 ?? []].map(([key, value2]) => /* @__PURE__ */ React.createElement("div", { key, className: containerGrouped() }, /* @__PURE__ */ React.createElement("span", { className: groupedTitle() }, groupedLabelExtractor?.(key)), value2.map((option) => /* @__PURE__ */ React.createElement(Option, { option, key: keyExtractor(option) })))));
-  const DefaultOptions = ({ options: options2 }) => /* @__PURE__ */ React.createElement(React.Fragment, null, (options2 ?? []).map((option) => /* @__PURE__ */ React.createElement(Option, { option, key: keyExtractor(option) })));
-  return /* @__PURE__ */ React.createElement("div", { className: "w-full relative bg-white", ref }, /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      className: button({ disabled, intent: variant }),
-      onClick: () => setOpen((prevState) => !prevState),
-      disabled
-    },
-    /* @__PURE__ */ React.createElement("span", { "data-testid": "select-placeholder" }, placeholder),
-    /* @__PURE__ */ React.createElement(io5.IoChevronDownOutline, null)
-  ), /* @__PURE__ */ React.createElement(
-    "ul",
-    {
-      role: "select",
-      className: dropdown({
-        open
-      })
-    },
-    onSearch ? /* @__PURE__ */ React.createElement("div", { className: "m-mili" }, /* @__PURE__ */ React.createElement(
-      SearchInput,
-      {
-        placeholder: placeholderSearchInput,
-        onChange: onSearch
-      }
-    )) : /* @__PURE__ */ React.createElement(React.Fragment, null),
-    grouped ? /* @__PURE__ */ React.createElement(GroupedOptions, { options }) : /* @__PURE__ */ React.createElement(DefaultOptions, { options })
-  ), hint && /* @__PURE__ */ React.createElement(
-    Hint.Hint,
-    {
-      variants: {
-        intent: variant
-      }
-    },
-    /* @__PURE__ */ React.createElement("div", { className: hintBody() }, variant === "error" ? /* @__PURE__ */ React.createElement(io.IoIosCloseCircleOutline, { "data-testid": "select-hint-error-icon" }) : /* @__PURE__ */ React.createElement(React.Fragment, null), /* @__PURE__ */ React.createElement("span", null, hint))
-  ));
-};
-
-exports.Select = Select;
-exports.default = Select;

package/dist/esm/components/SearchInput.js

@@ -1,80 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import 'clsx';
-import './Badge.js';
-import './BaseSnackbar.js';
-import 'react-icons/md';
-import './Card.js';
-import { Button } from './Button.js';
-import '@internationalized/date';
-import 'react-aria';
-import 'react-stately';
-import { useDebouncedState } from '../hooks/useDebouncedState.js';
-import './CalendarCell.js';
-import '@tecsinapse/cortex-core';
-import 'react-icons/fa';
-import 'react-icons/io';
-import './GroupButton.js';
-import './Hint.js';
-import { Input } from './Input.js';
-import './Modal.js';
-import '../styles/calendar-cell.js';
-import '../styles/groupButton.js';
-import '../styles/progressBar.js';
-import './Select.js';
-import './Tag.js';
-import './TextArea.js';
-import './Toggle.js';
-import { AiOutlineLoading } from 'react-icons/ai';
-import { IoSearchOutline } from 'react-icons/io5';
-
-const inputFace = "bg-white w-full";
-const inputLeft = "flex items-center";
-const SearchInput = ({
-  label,
-  placeholder,
-  isSubmitting = false,
-  onChange,
-  onClick,
-  BOUNCE_TIMEOUT = 1e3
-}) => {
-  const [bouncedText, setBouncedText] = useState("");
-  const [searchInput, setSearchInput] = useDebouncedState(
-    "",
-    setBouncedText,
-    BOUNCE_TIMEOUT
-  );
-  useEffect(() => {
-    if (onChange) {
-      onChange(bouncedText);
-    }
-  }, [bouncedText]);
-  const handleEnterKey = (e) => {
-    if (e.key === "Enter" && onClick && searchInput) {
-      onClick(searchInput);
-    }
-  };
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-row w-full space-x-mili" }, /* @__PURE__ */ React.createElement(Input.Face, { variants: { className: inputFace } }, !onClick && /* @__PURE__ */ React.createElement(Input.Left, { className: inputLeft }, /* @__PURE__ */ React.createElement(IoSearchOutline, { "data-testid": "icon-search-left" })), /* @__PURE__ */ React.createElement(
-    Input.Box,
-    {
-      placeholder,
-      label,
-      onChange: (e) => setSearchInput(e.target.value),
-      onKeyDown: handleEnterKey,
-      disabled: isSubmitting
-    }
-  )), onClick && /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      variants: {
-        intent: "primary",
-        size: "square",
-        className: "h-11"
-      },
-      onClick: () => onClick(searchInput),
-      disabled: !searchInput || isSubmitting
-    },
-    isSubmitting ? /* @__PURE__ */ React.createElement("div", { className: "animate-spin" }, /* @__PURE__ */ React.createElement(AiOutlineLoading, { "data-testid": "icon-loading" })) : /* @__PURE__ */ React.createElement(IoSearchOutline, { "data-testid": "icon-search-button" })
-  ));
-};
-
-export { SearchInput as default };

package/dist/esm/components/Select.js

@@ -1,96 +0,0 @@
-import { selectVariants, option } from '@tecsinapse/cortex-core';
-import React, { useState, useMemo, useRef, useCallback, useEffect } from 'react';
-import { IoIosCloseCircleOutline } from 'react-icons/io';
-import { IoChevronDownOutline } from 'react-icons/io5';
-import { Hint } from './Hint.js';
-import SearchInput from './SearchInput.js';
-
-const { button, dropdown, groupedTitle, containerGrouped, hintBody } = selectVariants();
-const Select = (props) => {
-  const {
-    label,
-    keyExtractor,
-    labelExtractor,
-    options,
-    value,
-    onSelect,
-    onSearch,
-    disabled,
-    grouped,
-    groupedLabelExtractor,
-    hint,
-    placeholderSearchInput,
-    variant = "default"
-  } = props;
-  const [open, setOpen] = useState(false);
-  const placeholder = useMemo(
-    () => value ? labelExtractor(value) : label,
-    [label, labelExtractor, value]
-  );
-  const ref = useRef(null);
-  const handleClickOutside = useCallback((event) => {
-    if (ref.current && !ref.current.contains(event.target)) {
-      setOpen(false);
-    }
-  }, []);
-  const handleSelect = useCallback(
-    (option) => {
-      onSelect(option);
-      setOpen(false);
-    },
-    [onSelect]
-  );
-  useEffect(() => {
-    document.addEventListener("click", handleClickOutside, true);
-    return () => {
-      document.removeEventListener("click", handleClickOutside, true);
-    };
-  }, [handleClickOutside]);
-  const Option = ({ option: option$1 }) => /* @__PURE__ */ React.createElement(
-    "li",
-    {
-      onClick: () => handleSelect(option$1),
-      className: option(),
-      role: "option"
-    },
-    labelExtractor(option$1)
-  );
-  const GroupedOptions = ({ options: options2 }) => /* @__PURE__ */ React.createElement(React.Fragment, null, [...options2 ?? []].map(([key, value2]) => /* @__PURE__ */ React.createElement("div", { key, className: containerGrouped() }, /* @__PURE__ */ React.createElement("span", { className: groupedTitle() }, groupedLabelExtractor?.(key)), value2.map((option) => /* @__PURE__ */ React.createElement(Option, { option, key: keyExtractor(option) })))));
-  const DefaultOptions = ({ options: options2 }) => /* @__PURE__ */ React.createElement(React.Fragment, null, (options2 ?? []).map((option) => /* @__PURE__ */ React.createElement(Option, { option, key: keyExtractor(option) })));
-  return /* @__PURE__ */ React.createElement("div", { className: "w-full relative bg-white", ref }, /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      className: button({ disabled, intent: variant }),
-      onClick: () => setOpen((prevState) => !prevState),
-      disabled
-    },
-    /* @__PURE__ */ React.createElement("span", { "data-testid": "select-placeholder" }, placeholder),
-    /* @__PURE__ */ React.createElement(IoChevronDownOutline, null)
-  ), /* @__PURE__ */ React.createElement(
-    "ul",
-    {
-      role: "select",
-      className: dropdown({
-        open
-      })
-    },
-    onSearch ? /* @__PURE__ */ React.createElement("div", { className: "m-mili" }, /* @__PURE__ */ React.createElement(
-      SearchInput,
-      {
-        placeholder: placeholderSearchInput,
-        onChange: onSearch
-      }
-    )) : /* @__PURE__ */ React.createElement(React.Fragment, null),
-    grouped ? /* @__PURE__ */ React.createElement(GroupedOptions, { options }) : /* @__PURE__ */ React.createElement(DefaultOptions, { options })
-  ), hint && /* @__PURE__ */ React.createElement(
-    Hint,
-    {
-      variants: {
-        intent: variant
-      }
-    },
-    /* @__PURE__ */ React.createElement("div", { className: hintBody() }, variant === "error" ? /* @__PURE__ */ React.createElement(IoIosCloseCircleOutline, { "data-testid": "select-hint-error-icon" }) : /* @__PURE__ */ React.createElement(React.Fragment, null), /* @__PURE__ */ React.createElement("span", null, hint))
-  ));
-};
-
-export { Select, Select as default };

package/dist/types/components/Select.d.ts

@@ -1,27 +0,0 @@
-interface CommonProps<T> {
-    label: string;
-    value: T | undefined;
-    onSelect: (value: T) => void;
-    keyExtractor: (value: T) => string;
-    labelExtractor: (value: T) => string;
-    onSearch?: (search: string) => void;
-    disabled?: boolean;
-    grouped?: boolean;
-    variant?: 'error' | 'default';
-    hint?: string;
-    placeholderSearchInput?: string;
-}
-interface GroupedProps<T> {
-    options?: Map<string, T[]>;
-    groupedLabelExtractor: (value: string) => string;
-    grouped: true;
-}
-interface DefaultProps<T> {
-    options?: T[];
-    groupedLabelExtractor?: never;
-    grouped?: never;
-}
-type ConditionalProps<T> = GroupedProps<T> | DefaultProps<T>;
-type SelectProps<T> = CommonProps<T> & ConditionalProps<T>;
-export declare const Select: <T>(props: SelectProps<T>) => JSX.Element;
-export default Select;