@arkyn/components 1.3.144 → 1.3.146

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

@@ -1,5 +1,7 @@
 import { SelectProps } from "@arkyn/types";
 declare function getConfig(props: SelectProps, isFocused: boolean): {
+    isSearchable?: boolean;
+    onSearch?: (value: string) => void;
     name: string;
     value?: string;
     defaultValue?: string;

package/dist/components/Select/getConfig.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getConfig.d.ts","sourceRoot":"","sources":["../../../src/components/Select/getConfig.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAK3C,iBAAS,SAAS,CAAC,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4CxD;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"getConfig.d.ts","sourceRoot":"","sources":["../../../src/components/Select/getConfig.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAK3C,iBAAS,SAAS,CAAC,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CxD;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/Select/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAQhD,OAAO,cAAc,CAAC;AAGtB,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,2CA4IjC;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAUhD,OAAO,cAAc,CAAC;AAEtB,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,2CAgKjC;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/Select/index.js

@@ -1,16 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Check, ChevronDown } from "lucide-react";
+import { Check, ChevronDown, Search } from "lucide-react";
 import { useRef, useState } from "react";
 import { getConfig } from "./getConfig";
-import "./styles.css";
 import { useFormController } from "../../components/Form/FormController";
+import { Input } from "../Input";
+import "./styles.css";
 function Select(props) {
+    const [search, setSearch] = useState("");
     const [isFocused, setIsFocused] = useState(false);
     const { inputRef, id, error } = useFormController();
     const baseRef = useRef(null);
     const ref = inputRef || baseRef;
     const isError = props.isError || !!error;
-    const { disabled, title, style, className, prefix, iconSize, isLoading, LeftIcon, value: baseValue = null, defaultValue = "", onFocus, onBlur, Spinner, name, placeholder, onSelect, options, optionMaxHeight, closeOnSelect, ...rest } = getConfig({ ...props, id, isError }, isFocused);
+    const { disabled, title, style, className, prefix, iconSize, isLoading, LeftIcon, value: baseValue = null, defaultValue = "", onFocus, onBlur, Spinner, name, placeholder, onSelect, options, optionMaxHeight, closeOnSelect, isSearchable, onSearch, ...rest } = getConfig({ ...props, id, isError }, isFocused);
     const [selectedValue, setSelectedValue] = useState(defaultValue);
     function handleSectionClick() {
         if (disabled || !ref?.current || isFocused)
@@ -53,7 +55,17 @@ function Select(props) {
         if (isFocused && !currentLabel)
             return false;
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("section", { title: title, style: style, onClick: handleSectionClick, className: `${className} placeholder_dark_${placeholderDark()}`, children: [prefix, LeftIcon && _jsx(LeftIcon, { size: iconSize, strokeWidth: 2.5 }), _jsx("input", { disabled: disabled, readOnly: true, placeholder: currentLabel || placeholder, onFocus: handleFocus, ...rest }), _jsx("input", { type: "hidden", ref: ref, name: name, value: currentValue || "", readOnly: true }), isFocused && (_jsxs("div", { className: "arkyn_select_content", style: { overflow: "auto", maxHeight: optionMaxHeight }, children: [options.map(({ label, value }) => (_jsxs("div", { onClick: () => handleChangeValue({ label, value }), className: currentValue === value
+    return (_jsxs(_Fragment, { children: [_jsxs("section", { title: title, style: style, onClick: handleSectionClick, className: `${className} placeholder_dark_${placeholderDark()}`, children: [prefix, LeftIcon && _jsx(LeftIcon, { size: iconSize, strokeWidth: 2.5 }), _jsx("input", { disabled: disabled, readOnly: true, placeholder: currentLabel || placeholder, onFocus: handleFocus, ...rest }), _jsx("input", { type: "hidden", ref: ref, name: name, value: currentValue || "", readOnly: true }), isFocused && (_jsxs("div", { className: "arkyn_select_content", style: { overflow: "auto", maxHeight: optionMaxHeight }, children: [isSearchable && (_jsx(Input, { type: "search", name: "search-select", variant: "underline", leftIcon: Search, onChange: (e) => setSearch(e.target.value) })), options
+                                .filter((option) => {
+                                if (props.onSearch)
+                                    return true;
+                                if (!props.isSearchable)
+                                    return true;
+                                if (option.label.toLowerCase().includes(search.toLowerCase()))
+                                    return true;
+                                return false;
+                            })
+                                .map(({ label, value }) => (_jsxs("div", { onClick: () => handleChangeValue({ label, value }), className: currentValue === value
                                     ? "arkyn_select_option active"
                                     : "arkyn_select_option", children: [label, " ", _jsx(Check, {})] }, value))), options.length <= 0 && _jsx("p", { children: "Sem op\u00E7\u00F5es dispon\u00EDveis" })] })), !isLoading && (_jsx(ChevronDown, { className: "arkyn_select_arrow", size: iconSize, strokeWidth: 2.5 })), isLoading && Spinner] }), isFocused && (_jsx("aside", { className: "arkyn_select_overlay", onClick: handleBlur }))] }));
 }

package/dist/provider/ToastProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastProvider.d.ts","sourceRoot":"","sources":["../../src/provider/ToastProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAK9D,iBAAS,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,kBAAkB,2CAmBtD;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"ToastProvider.d.ts","sourceRoot":"","sources":["../../src/provider/ToastProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAK9D,iBAAS,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,kBAAkB,2CA2CtD;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/provider/ToastProvider.js

@@ -5,9 +5,33 @@ function ToastProvider({ children }) {
     function showToast(props) {
         switch (props.type) {
             case "success":
-                return toast.success(props.message);
+                return toast.success(props.message, {
+                    style: {
+                        background: "#10B981",
+                        color: "#ffffff",
+                        padding: "12px 16px",
+                        fontSize: "14px",
+                        fontWeight: 600,
+                    },
+                    iconTheme: {
+                        primary: "#059669",
+                        secondary: "#ffffff",
+                    },
+                });
             case "danger":
-                return toast.error(props.message);
+                return toast.error(props.message, {
+                    style: {
+                        background: "#E11D48",
+                        color: "#ffffff",
+                        padding: "12px 16px",
+                        fontSize: "14px",
+                        fontWeight: 600,
+                    },
+                    iconTheme: {
+                        primary: "#BE123C",
+                        secondary: "#ffffff",
+                    },
+                });
         }
     }
     return (_jsxs(ToastContext.Provider, { value: { showToast }, children: [_jsx(Toaster, { position: "top-right", containerStyle: { zIndex: 999999999999999 } }), children] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arkyn/components",
-  "version": "1.3.144",
+  "version": "1.3.146",
   "main": "./dist/bundle.js",
   "types": "./dist/index.d.ts",
   "author": "Lucas Gonçalves",

package/src/components/Select/getConfig.tsx

@@ -16,7 +16,6 @@ function getConfig(props: SelectProps, isFocused: boolean) {
     readOnly,
     onFocus,
     onBlur,
-
     title,
     style,
     closeOnSelect = true,

package/src/components/Select/index.tsx

@@ -1,15 +1,17 @@
 import type { SelectProps } from "@arkyn/types";
 import type { FocusEvent } from "react";
 
-import { Check, ChevronDown } from "lucide-react";
+import { Check, ChevronDown, Search } from "lucide-react";
 import { useRef, useState } from "react";
 
 import { getConfig } from "./getConfig";
 
-import "./styles.css";
 import { useFormController } from "../../components/Form/FormController";
+import { Input } from "../Input";
+import "./styles.css";
 
 function Select(props: SelectProps) {
+  const [search, setSearch] = useState("");
   const [isFocused, setIsFocused] = useState(false);
   const { inputRef, id, error } = useFormController();
 
@@ -38,7 +40,8 @@ function Select(props: SelectProps) {
     options,
     optionMaxHeight,
     closeOnSelect,
-
+    isSearchable,
+    onSearch,
     ...rest
   } = getConfig({ ...props, id, isError }, isFocused);
 
@@ -116,19 +119,37 @@ function Select(props: SelectProps) {
             className="arkyn_select_content"
             style={{ overflow: "auto", maxHeight: optionMaxHeight }}
           >
-            {options.map(({ label, value }) => (
-              <div
-                key={value}
-                onClick={() => handleChangeValue({ label, value })}
-                className={
-                  currentValue === value
-                    ? "arkyn_select_option active"
-                    : "arkyn_select_option"
-                }
-              >
-                {label} <Check />
-              </div>
-            ))}
+            {isSearchable && (
+              <Input
+                type="search"
+                name="search-select"
+                variant="underline"
+                leftIcon={Search}
+                onChange={(e) => setSearch(e.target.value)}
+              />
+            )}
+
+            {options
+              .filter((option) => {
+                if (props.onSearch) return true;
+                if (!props.isSearchable) return true;
+                if (option.label.toLowerCase().includes(search.toLowerCase()))
+                  return true;
+                return false;
+              })
+              .map(({ label, value }) => (
+                <div
+                  key={value}
+                  onClick={() => handleChangeValue({ label, value })}
+                  className={
+                    currentValue === value
+                      ? "arkyn_select_option active"
+                      : "arkyn_select_option"
+                  }
+                >
+                  {label} <Check />
+                </div>
+              ))}
 
             {options.length <= 0 && <p>Sem opções disponíveis</p>}
           </div>

package/src/provider/ToastProvider.tsx

@@ -7,9 +7,33 @@ function ToastProvider({ children }: ToastProviderProps) {
   function showToast(props: ToastProps) {
     switch (props.type) {
       case "success":
-        return toast.success(props.message);
+        return toast.success(props.message, {
+          style: {
+            background: "#10B981",
+            color: "#ffffff",
+            padding: "12px 16px",
+            fontSize: "14px",
+            fontWeight: 600,
+          },
+          iconTheme: {
+            primary: "#059669",
+            secondary: "#ffffff",
+          },
+        });
       case "danger":
-        return toast.error(props.message);
+        return toast.error(props.message, {
+          style: {
+            background: "#E11D48",
+            color: "#ffffff",
+            padding: "12px 16px",
+            fontSize: "14px",
+            fontWeight: 600,
+          },
+          iconTheme: {
+            primary: "#BE123C",
+            secondary: "#ffffff",
+          },
+        });
     }
   }