@rovula/ui 0.0.42 → 0.0.44

package/dist/cjs/types/components/Dropdown/Dropdown.d.ts

@@ -26,6 +26,8 @@ export type DropdownProps = {
     required?: boolean;
     className?: string;
     optionContainerClassName?: string;
+    optionItemClassName?: string;
+    optionNotFoundItemClassName?: string;
     options: Options[];
     value?: Options;
     onChangeText?: InputProps["onChange"];
@@ -51,6 +53,8 @@ declare const Dropdown: React.ForwardRefExoticComponent<{
     required?: boolean | undefined;
     className?: string | undefined;
     optionContainerClassName?: string | undefined;
+    optionItemClassName?: string | undefined;
+    optionNotFoundItemClassName?: string | undefined;
     options: Options[];
     value?: Options | undefined;
     onChangeText?: InputProps["onChange"];

package/dist/cjs/types/components/Dropdown/Dropdown.stories.d.ts

@@ -17,6 +17,8 @@ declare const meta: {
         required?: boolean | undefined;
         className?: string | undefined;
         optionContainerClassName?: string | undefined;
+        optionItemClassName?: string | undefined;
+        optionNotFoundItemClassName?: string | undefined;
         options: Options[];
         value?: Options | undefined;
         onChangeText?: React.ChangeEventHandler<HTMLInputElement> | undefined;
@@ -46,6 +48,8 @@ declare const meta: {
         required?: boolean | undefined;
         className?: string | undefined;
         optionContainerClassName?: string | undefined;
+        optionItemClassName?: string | undefined;
+        optionNotFoundItemClassName?: string | undefined;
         options: Options[];
         value?: Options | undefined;
         onChangeText?: React.ChangeEventHandler<HTMLInputElement> | undefined;

package/dist/cjs/types/components/Search/Search.stories.d.ts

@@ -324,6 +324,8 @@ declare const meta: {
             onClick: (option: Options) => void;
         }) => React.ReactNode) | undefined;
         optionContainerClassName?: string | undefined;
+        optionItemClassName?: string | undefined;
+        optionNotFoundItemClassName?: string | undefined;
         ref?: React.LegacyRef<HTMLInputElement> | undefined;
         key?: React.Key | null | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];

package/dist/components/DatePicker/DatePicker.js

@@ -20,7 +20,7 @@ import { format } from "date-fns/format";
 const DatePicker = (_a) => {
     var { date, onSelect, textInputProps, popoverContentProps } = _a, props = __rest(_a, ["date", "onSelect", "textInputProps", "popoverContentProps"]);
     const [isOpen, setIsOpen] = useState(false);
-    return (_jsx("div", { children: _jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("div", { className: "flex", children: _jsx(TextInput, Object.assign({ fullwidth: true, id: "2" // TODO
+    return (_jsx("div", { children: _jsxs(Popover, { modal: true, open: isOpen, onOpenChange: setIsOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("div", { className: "flex", children: _jsx(TextInput, Object.assign({ fullwidth: true, id: "2" // TODO
                             , readOnly: true, label: "Date", size: "md", value: date ? format(date, "dd MMM yyyy") : isOpen ? " " : "", hasClearIcon: false, endIcon: _jsx(CalendarIcon, { fill: "inherit", className: "cursor-pointer" }) }, textInputProps)) }) }), _jsx(PopoverContent, Object.assign({ className: "w-auto p-0 z-[100]" }, popoverContentProps, { children: _jsx(Calendar, Object.assign({ defaultMonth: date }, props, { mode: "single", selected: date, onSelect: (...value) => {
                             onSelect === null || onSelect === void 0 ? void 0 : onSelect(...value);
                             setIsOpen(false);

package/dist/components/Dropdown/Dropdown.js

@@ -16,9 +16,9 @@ import { customInputVariant, dropdownIconVariant, iconWrapperVariant, } from "./
 import { ChevronDownIcon } from "@heroicons/react/16/solid";
 import { cn } from "@/utils/cn";
 const Dropdown = forwardRef((_a, ref) => {
-    var { id, options = [], value, label, size = "md", rounded = "normal", variant = "outline", helperText, errorMessage, fullwidth = true, disabled = false, error = false, filterMode = false, required = true, onChangeText, onSelect, renderOptions: customRenderOptions, optionContainerClassName } = _a, props = __rest(_a, ["id", "options", "value", "label", "size", "rounded", "variant", "helperText", "errorMessage", "fullwidth", "disabled", "error", "filterMode", "required", "onChangeText", "onSelect", "renderOptions", "optionContainerClassName"]);
+    var { id, options = [], value, label, size = "md", rounded = "normal", variant = "outline", helperText, errorMessage, fullwidth = true, disabled = false, error = false, filterMode = false, required = true, onChangeText, onSelect, renderOptions: customRenderOptions, optionContainerClassName, optionItemClassName, optionNotFoundItemClassName } = _a, props = __rest(_a, ["id", "options", "value", "label", "size", "rounded", "variant", "helperText", "errorMessage", "fullwidth", "disabled", "error", "filterMode", "required", "onChangeText", "onSelect", "renderOptions", "optionContainerClassName", "optionItemClassName", "optionNotFoundItemClassName"]);
     const _id = id || `${label}-select`;
-    const [isFocused, setIsFocused] = useState(false);
+    const [isFocused, setIsFocused] = useState(true);
     const [selectedOption, setSelectedOption] = useState(null);
     const [textValue, setTextValue] = useState("");
     const keyCode = useRef("");
@@ -60,15 +60,15 @@ const Dropdown = forwardRef((_a, ref) => {
                                 value: option.value,
                                 label: option.label,
                                 handleOnClick: () => handleOptionClick(option),
-                                className: `px-4 py-2 hover:bg-gray-100 cursor-pointer ${(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value
-                                    ? " bg-gray-200"
-                                    : ""}`,
+                                className: cn(`px-4 py-2 hover:bg-primary-hover-bg cursor-pointer`, optionItemClassName, {
+                                    "bg-base-popup-highligh": (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value,
+                                }),
                             }) }, option.value));
                     }
-                    return (_jsx("li", { onMouseDown: () => handleOptionClick(option), className: `px-4 py-2 hover:bg-primary-hover-bg cursor-pointer ${(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value
-                            ? "bg-base-popup-highligh"
-                            : ""}`, children: option.label }, option.value));
-                }), optionsFiltered.length === 0 && (_jsx("li", { className: "px-4 py-14 text-center text-input-text", children: "Not found" }))] }));
+                    return (_jsx("li", { onMouseDown: () => handleOptionClick(option), className: cn(`px-4 py-2 hover:bg-primary-hover-bg cursor-pointer`, optionItemClassName, {
+                            "bg-base-popup-highligh": (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value,
+                        }), children: option.label }, option.value));
+                }), optionsFiltered.length === 0 && (_jsx("li", { className: cn("px-4 py-14 text-center text-input-text", optionNotFoundItemClassName), children: "Not found" }))] }));
     };
     const handleOnFocus = useCallback((e) => {
         var _a;
@@ -106,6 +106,6 @@ const Dropdown = forwardRef((_a, ref) => {
         keyCode.current = e.code;
         (_a = props === null || props === void 0 ? void 0 : props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
     }, [props === null || props === void 0 ? void 0 : props.onKeyDown]);
-    return (_jsxs("div", { className: `relative ${fullwidth ? "w-full" : ""}`, children: [_jsx(TextInput, Object.assign({ hasClearIcon: false, endIcon: _jsx("div", { className: iconWrapperVariant({ size }), children: _jsx(ChevronDownIcon, { className: dropdownIconVariant({ size, isFocus: isFocused }) }) }) }, props, { ref: ref, readOnly: !filterMode, value: textValue, onChange: handleOnChangeText, label: label, placeholder: " ", type: "text", rounded: rounded, variant: variant, helperText: helperText, errorMessage: errorMessage, fullwidth: fullwidth, error: error, required: required, id: _id, disabled: disabled, size: size, className: customInputVariant({ size }), onFocus: handleOnFocus, onBlur: handleOnBlur, onKeyDown: handleOnKeyDown })), isFocused && renderOptions()] }));
+    return (_jsxs("div", { className: `relative ${fullwidth ? "w-full" : ""}`, children: [_jsx(TextInput, Object.assign({ hasClearIcon: false, endIcon: _jsx("div", { className: iconWrapperVariant({ size }), children: _jsx(ChevronDownIcon, { className: dropdownIconVariant({ size, isFocus: isFocused }) }) }) }, props, { ref: ref, readOnly: !filterMode, value: textValue, onChange: handleOnChangeText, label: label, placeholder: " ", type: "text", autoComplete: "off", rounded: rounded, variant: variant, helperText: helperText, errorMessage: errorMessage, fullwidth: fullwidth, error: error, required: required, id: _id, disabled: disabled, size: size, className: customInputVariant({ size }), onFocus: handleOnFocus, onBlur: handleOnBlur, onKeyDown: handleOnKeyDown })), isFocused && renderOptions()] }));
 });
 export default Dropdown;

package/dist/components/Dropdown/Dropdown.stories.js

@@ -93,6 +93,9 @@ export const CustomOption = {
     render: (args) => {
         console.log("args ", args);
         const props = Object.assign({}, args);
-        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(DropdownWithRef, Object.assign({ id: "1", size: "lg", options: options }, args)) }));
+        const onChangeText = (e) => {
+            console.log("aaa ", e);
+        };
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Dropdown, Object.assign({ id: "1", size: "lg", options: options }, args, { onChangeText: onChangeText })) }));
     },
 };

package/dist/components/Toast/Toast.js

@@ -46,7 +46,7 @@ const ToastTitle = React.forwardRef((_a, ref) => {
 ToastTitle.displayName = ToastPrimitives.Title.displayName;
 const ToastDescription = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(ToastPrimitives.Description, Object.assign({ ref: ref, className: cn("typography-subtitile5 text-text-grey-dark", className) }, props)));
+    return (_jsx(ToastPrimitives.Description, Object.assign({ ref: ref, className: cn("typography-subtitile5 text-input-default-tex", className) }, props)));
 });
 ToastDescription.displayName = ToastPrimitives.Description.displayName;
 export { ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, };

package/dist/components/Toast/useToast.js

@@ -13,7 +13,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 // Inspired by react-hot-toast library
 import * as React from "react";
 const TOAST_LIMIT = 1;
-const TOAST_REMOVE_DELAY = 6000;
+const TOAST_REMOVE_DELAY = 3000;
 const actionTypes = {
     ADD_TOAST: "ADD_TOAST",
     UPDATE_TOAST: "UPDATE_TOAST",
@@ -37,7 +37,7 @@ const addToRemoveQueue = (toastId) => {
             type: "REMOVE_TOAST",
             toastId: toastId,
         });
-    }, TOAST_REMOVE_DELAY);
+    }, TOAST_REMOVE_DELAY); // TODO
     toastTimeouts.set(toastId, timeout);
 };
 export const reducer = (state, action) => {

package/dist/esm/bundle.css

@@ -412,6 +412,22 @@ body {
     /* @apply bg-[var(--backgroud)] text-[var(--foreground)]; */
   }
 
+/* hide input number arrow */
+
+/* Chrome, Safari, Edge, Opera */
+
+input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+/* Firefox */
+
+input[type=number] {
+    -moz-appearance: textfield;
+  }
+
 *, ::before, ::after{
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -5617,4 +5633,4 @@ body {
 }
 .\[\&_tr\]\:border-b tr{
   border-bottom-width: 1px;
-}
+}