uiplex 1.0.0 → 1.0.1

package/dist/index.d.ts

@@ -8,6 +8,7 @@ import './Modal/Modal.css';
 import './FormControl/FormControl.css';
 import './Input/Input.css';
 import './Textarea/Textarea.css';
+import './Select/Select.css';
 import './Link/Link.css';
 import './Grid/Grid.css';
 import './IconButton/IconButton.css';
@@ -36,6 +37,8 @@ export { Input } from './Input';
 export type { InputProps } from './Input';
 export { Textarea } from './Textarea';
 export type { TextareaProps } from './Textarea';
+export { Select } from './Select';
+export type { SelectProps, SelectOption } from './Select';
 export { Grid } from './Grid';
 export type { GridProps } from './Grid';
 export { Link } from './Link';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,qBAAqB,CAAA;AAC5B,OAAO,qBAAqB,CAAA;AAC5B,OAAO,mBAAmB,CAAA;AAC1B,OAAO,iBAAiB,CAAA;AACxB,OAAO,eAAe,CAAA;AACtB,OAAO,iBAAiB,CAAA;AACxB,OAAO,mBAAmB,CAAA;AAC1B,OAAO,+BAA+B,CAAA;AACtC,OAAO,mBAAmB,CAAA;AAC1B,OAAO,yBAAyB,CAAA;AAChC,OAAO,iBAAiB,CAAA;AACxB,OAAO,iBAAiB,CAAA;AACxB,OAAO,6BAA6B,CAAA;AACpC,OAAO,yCAAyC,CAAA;AAChD,OAAO,uBAAuB,CAAA;AAC9B,OAAO,mBAAmB,CAAA;AAC1B,OAAO,uBAAuB,CAAA;AAC9B,OAAO,mBAAmB,CAAA;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAC3C,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAC3C,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AACnF,OAAO,EACL,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,SAAS,EACT,WAAW,EACX,gBAAgB,GACjB,MAAM,SAAS,CAAA;AAChB,YAAY,EACV,UAAU,EACV,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EAChB,qBAAqB,GACtB,MAAM,SAAS,CAAA;AAChB,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC3B,YAAY,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAGvC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AACxE,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAA;AAC5F,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAG/C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAGvC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAC5E,YAAY,EAAE,qBAAqB,EAAE,0BAA0B,EAAE,MAAM,oBAAoB,CAAA;AAC3F,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAC7C,OAAO,EACL,OAAO,EACP,cAAc,EACd,aAAa,EACb,WAAW,EACX,aAAa,EACb,kBAAkB,GACnB,MAAM,WAAW,CAAA;AAClB,YAAY,EACV,YAAY,EACZ,gBAAgB,EAChB,mBAAmB,EACnB,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,EAClB,uBAAuB,GACxB,MAAM,WAAW,CAAA;AAClB,OAAO,EAAE,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AACrF,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,aAAa,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAGzG,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACvC,YAAY,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AACzC,YAAY,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAGrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAC3E,YAAY,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -1,6 +1,7 @@
 import './index.css';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React, { useRef, useEffect, createContext, useContext, useState, useCallback, useMemo } from 'react';
+import { createPortal } from 'react-dom';
 
 const Button = ({ children, variant = "primary", size = "md", colorScheme = "", disabled = false, loading = false, leftIcon, rightIcon, onClick, className = "", style, ...props }) => {
     const buttonClasses = [
@@ -387,6 +388,225 @@ const Textarea = ({ size = "md", variant = "outline", isInvalid, isDisabled, isR
     return (jsx("textarea", { id: textareaId, className: textareaClasses, disabled: disabled, readOnly: isReadOnly, "aria-invalid": invalid, "aria-describedby": invalid && formControl.id ? `${formControl.id}-error` : undefined, style: style, ...props }));
 };
 
+const Select = ({ size = "md", variant = "outline", isInvalid, isDisabled, isReadOnly, options = [], placeholder = "Select...", value: controlledValue, defaultValue, onChange, mode = "single", searchable = false, allowClear = false, width, className = "", style, id, }) => {
+    const formControl = useFormControlContext();
+    const invalid = isInvalid ?? formControl.isInvalid ?? false;
+    const disabled = isDisabled ?? formControl.isDisabled ?? false;
+    const selectId = id || formControl.id;
+    const [isOpen, setIsOpen] = useState(false);
+    const [searchTerm, setSearchTerm] = useState("");
+    const [internalValue, setInternalValue] = useState(defaultValue || (mode === "multiple" ? [] : ""));
+    const [dropdownPosition, setDropdownPosition] = useState(null);
+    const isControlled = controlledValue !== undefined;
+    const value = isControlled ? controlledValue : internalValue;
+    const selectRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const inputRef = useRef(null);
+    const triggerRef = useRef(null);
+    const clickFromTriggerRef = useRef(false);
+    // Close dropdown on outside click
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleClickOutside = (event) => {
+            const target = event.target;
+            // If click originated from trigger, ignore it
+            if (clickFromTriggerRef.current) {
+                return;
+            }
+            // Check if refs are available
+            if (!selectRef.current || !dropdownRef.current) {
+                return;
+            }
+            // Check if click is inside select trigger or dropdown
+            const clickedInsideSelect = selectRef.current.contains(target);
+            const clickedInsideDropdown = dropdownRef.current.contains(target);
+            // Close if clicked outside both
+            if (!clickedInsideSelect && !clickedInsideDropdown) {
+                setIsOpen(false);
+                setSearchTerm("");
+                setDropdownPosition(null);
+            }
+        };
+        // Use mousedown in capture phase for more reliable detection
+        // This prevents the double-click issue
+        document.addEventListener("mousedown", handleClickOutside, true);
+        document.addEventListener("touchstart", handleClickOutside, true);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside, true);
+            document.removeEventListener("touchstart", handleClickOutside, true);
+        };
+    }, [isOpen]);
+    // Calculate and update dropdown position
+    const updateDropdownPosition = useCallback(() => {
+        if (!triggerRef.current)
+            return;
+        const rect = triggerRef.current.getBoundingClientRect();
+        setDropdownPosition({
+            top: rect.bottom + 4,
+            left: rect.left,
+            width: rect.width,
+        });
+    }, []);
+    // Calculate dropdown position when it opens
+    useEffect(() => {
+        if (isOpen) {
+            updateDropdownPosition();
+        }
+        else {
+            setDropdownPosition(null);
+        }
+    }, [isOpen, updateDropdownPosition]);
+    // Update position on scroll/resize
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        // Update position immediately
+        updateDropdownPosition();
+        // Listen to scroll events on all scrollable containers
+        const handleScroll = () => {
+            updateDropdownPosition();
+        };
+        const handleResize = () => {
+            updateDropdownPosition();
+        };
+        // Add listeners to window and all scrollable parents
+        window.addEventListener("scroll", handleScroll, true);
+        window.addEventListener("resize", handleResize);
+        // Also listen to scroll on the document
+        document.addEventListener("scroll", handleScroll, true);
+        return () => {
+            window.removeEventListener("scroll", handleScroll, true);
+            window.removeEventListener("resize", handleResize);
+            document.removeEventListener("scroll", handleScroll, true);
+        };
+    }, [isOpen, updateDropdownPosition]);
+    // Focus search input when dropdown opens
+    useEffect(() => {
+        if (isOpen && searchable && inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [isOpen, searchable]);
+    // Filter options based on search term
+    const filteredOptions = searchable
+        ? options.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()))
+        : options;
+    // Get selected option(s)
+    const getSelectedOptions = useCallback(() => {
+        if (mode === "multiple") {
+            const values = Array.isArray(value) ? value : [];
+            return options.filter((opt) => values.includes(opt.value));
+        }
+        else {
+            return options.find((opt) => opt.value === value);
+        }
+    }, [value, options, mode]);
+    const selectedOptions = getSelectedOptions();
+    const displayValue = mode === "multiple"
+        ? Array.isArray(selectedOptions) && selectedOptions.length > 0
+            ? `${selectedOptions.length} selected`
+            : placeholder
+        : selectedOptions && !Array.isArray(selectedOptions)
+            ? selectedOptions.label
+            : placeholder;
+    const handleToggle = (e) => {
+        if (disabled || isReadOnly)
+            return;
+        e.stopPropagation();
+        // Set flag to prevent outside click handler from firing
+        clickFromTriggerRef.current = true;
+        setIsOpen((prev) => {
+            const newIsOpen = !prev;
+            if (newIsOpen) {
+                setSearchTerm("");
+            }
+            // Reset flag after state update
+            setTimeout(() => {
+                clickFromTriggerRef.current = false;
+            }, 100);
+            return newIsOpen;
+        });
+    };
+    const handleSelect = (optionValue) => {
+        if (mode === "multiple") {
+            const currentValues = Array.isArray(value) ? value : [];
+            const newValues = currentValues.includes(optionValue)
+                ? currentValues.filter((v) => v !== optionValue)
+                : [...currentValues, optionValue];
+            if (!isControlled) {
+                setInternalValue(newValues);
+            }
+            onChange?.(newValues);
+        }
+        else {
+            if (!isControlled) {
+                setInternalValue(optionValue);
+            }
+            onChange?.(optionValue);
+            setIsOpen(false);
+        }
+    };
+    const handleClear = (e) => {
+        e.stopPropagation();
+        const newValue = mode === "multiple" ? [] : "";
+        if (!isControlled) {
+            setInternalValue(newValue);
+        }
+        onChange?.(newValue);
+    };
+    const isSelected = (optionValue) => {
+        if (mode === "multiple") {
+            return Array.isArray(value) && value.includes(optionValue);
+        }
+        return value === optionValue;
+    };
+    const hasValue = mode === "multiple"
+        ? Array.isArray(value) && value.length > 0
+        : value !== "" && value !== undefined && value !== null;
+    const selectClasses = [
+        "ui-select",
+        `ui-select--${size}`,
+        `ui-select--${variant}`,
+        invalid && "ui-select--invalid",
+        disabled && "ui-select--disabled",
+        isReadOnly && "ui-select--readonly",
+        isOpen && "ui-select--open",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    const wrapperStyle = {
+        ...style,
+        ...(width && {
+            width: typeof width === "number" ? `${width}px` : width,
+        }),
+    };
+    return (jsxs("div", { ref: selectRef, className: "ui-select-wrapper", style: wrapperStyle, children: [jsxs("div", { ref: triggerRef, id: selectId, className: selectClasses, onClick: handleToggle, "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-invalid": invalid, "aria-describedby": invalid && formControl.id ? `${formControl.id}-error` : undefined, role: "combobox", tabIndex: disabled || isReadOnly ? -1 : 0, children: [jsx("div", { className: "ui-select__value", children: mode === "multiple" && hasValue && Array.isArray(selectedOptions) && selectedOptions.length > 0 ? (jsxs("div", { className: "ui-select__tags", children: [selectedOptions.slice(0, 2).map((option) => (jsxs("span", { className: "ui-select__tag", children: [option.label, jsx("button", { type: "button", className: "ui-select__tag-close", onClick: (e) => {
+                                                e.stopPropagation();
+                                                handleSelect(option.value);
+                                            }, "aria-label": `Remove ${option.label}`, children: "\u00D7" })] }, option.value))), selectedOptions.length > 2 && (jsxs("span", { className: "ui-select__tag-more", children: ["+", selectedOptions.length - 2] }))] })) : (jsx("span", { className: `ui-select__text ${!hasValue ? "ui-select__text--placeholder" : ""}`, children: displayValue })) }), jsxs("div", { className: "ui-select__actions", children: [allowClear && hasValue && !disabled && !isReadOnly && (jsx("button", { type: "button", className: "ui-select__clear", onClick: handleClear, "aria-label": "Clear selection", children: "\u00D7" })), jsx("span", { className: "ui-select__arrow", "aria-hidden": "true", children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), isOpen &&
+                dropdownPosition &&
+                typeof window !== "undefined" &&
+                createPortal(jsxs("div", { ref: dropdownRef, className: "ui-select-dropdown", role: "listbox", style: {
+                        position: "fixed",
+                        top: `${dropdownPosition.top}px`,
+                        left: `${dropdownPosition.left}px`,
+                        width: `${dropdownPosition.width}px`,
+                    }, onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), children: [searchable && (jsx("div", { className: "ui-select-dropdown__search", children: jsx("input", { ref: inputRef, type: "text", className: "ui-select-dropdown__search-input", placeholder: "Search...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), onClick: (e) => e.stopPropagation(), onKeyDown: (e) => {
+                                    if (e.key === "Escape") {
+                                        setIsOpen(false);
+                                    }
+                                } }) })), jsx("div", { className: "ui-select-dropdown__options", children: filteredOptions.length === 0 ? (jsx("div", { className: "ui-select-dropdown__empty", children: "No options found" })) : (filteredOptions.map((option) => {
+                                const selected = isSelected(option.value);
+                                return (jsxs("div", { className: `ui-select-dropdown__option ${selected ? "ui-select-dropdown__option--selected" : ""} ${option.disabled ? "ui-select-dropdown__option--disabled" : ""}`, onClick: (e) => {
+                                        e.stopPropagation();
+                                        if (!option.disabled) {
+                                            handleSelect(option.value);
+                                        }
+                                    }, role: "option", "aria-selected": selected, children: [mode === "multiple" && (jsx("span", { className: "ui-select-dropdown__checkbox", children: selected ? "✓" : "" })), jsx("span", { className: "ui-select-dropdown__option-label", children: option.label })] }, option.value));
+                            })) })] }), document.body)] }));
+};
+
 const normalizeValue = (value) => {
     if (value === undefined)
         return undefined;
@@ -518,7 +738,7 @@ const useOutsideClick = ({ handler, refs, enabled = true, }) => {
     }, [handler, refs, enabled]);
 };
 
-const Tooltip = ({ children, label, placement = "top", isOpen: controlledIsOpen, defaultIsOpen = false, closeOnClick = false, className = "", style, }) => {
+const Tooltip = ({ children, label, placement = "top", isOpen: controlledIsOpen, defaultIsOpen = false, closeOnClick = false, width, className = "", style, }) => {
     const [internalIsOpen, setInternalIsOpen] = useState(defaultIsOpen);
     const tooltipRef = useRef(null);
     const triggerRef = useRef(null);
@@ -554,7 +774,11 @@ const Tooltip = ({ children, label, placement = "top", isOpen: controlledIsOpen,
         onMouseLeave: handleMouseLeave,
         onClick: handleClick,
     });
-    return (jsxs("div", { className: `ui-tooltip-wrapper ${className}`, style: style, children: [clonedChild, isOpen && (jsx("div", { ref: tooltipRef, className: `ui-tooltip ui-tooltip--${placement}`, role: "tooltip", children: label }))] }));
+    return (jsxs("div", { className: `ui-tooltip-wrapper ${className}`, style: style, children: [clonedChild, isOpen && (jsx("div", { ref: tooltipRef, className: `ui-tooltip ui-tooltip--${placement} ${width ? "ui-tooltip--wrappable" : ""}`, role: "tooltip", style: width
+                    ? {
+                        width: typeof width === "number" ? `${width}px` : width,
+                    }
+                    : undefined, children: label }))] }));
 };
 
 const PopoverContent = ({ children, className = "", }) => {
@@ -869,7 +1093,7 @@ const useTheme = () => {
     }
     return context;
 };
-const ThemeProvider = ({ children, defaultTheme = "system", storageKey = "uilab-theme" }) => {
+const ThemeProvider = ({ children, defaultTheme = "system", storageKey = "uiplex-theme" }) => {
     const [theme, setTheme] = useState(defaultTheme);
     const [resolvedTheme, setResolvedTheme] = useState("light");
     // Get system preference
@@ -1053,4 +1277,4 @@ const ThemeScript = ({ storageKey = "uiplex-theme", defaultTheme = "system" }) =
         } }));
 };
 
-export { Box, Button, CircularProgress, CircularProgressLabel, Flex, FormControl, FormErrorMessage, FormLabel, Grid, IconButton, Input, Link, Loader, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Popover, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, Radio, RadioGroup, Text, Textarea, ThemeProvider, ThemeScript, ThemeToggle, ToastStatic as Toast, Toast as ToastComponent, ToastContainer, ToastContainerGlobal, Tooltip, useDisclosure, useOutsideClick, useTheme };
+export { Box, Button, CircularProgress, CircularProgressLabel, Flex, FormControl, FormErrorMessage, FormLabel, Grid, IconButton, Input, Link, Loader, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Popover, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, Radio, RadioGroup, Select, Text, Textarea, ThemeProvider, ThemeScript, ThemeToggle, ToastStatic as Toast, Toast as ToastComponent, ToastContainer, ToastContainerGlobal, Tooltip, useDisclosure, useOutsideClick, useTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uiplex",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A modern React component library with TypeScript support, featuring Button, Loader, Radio components and a comprehensive theme system",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -44,13 +44,13 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/uilab/Frontend-UI-Library.git",
+    "url": "https://github.com/ankit-kaushal/Frontend-UI-Library",
     "directory": "packages/ui"
   },
   "bugs": {
-    "url": "https://github.com/uilab/Frontend-UI-Library/issues"
+    "url": "https://github.com/ankit-kaushal/Frontend-UI-Library/issues"
   },
-  "homepage": "https://github.com/uilab/Frontend-UI-Library#readme",
+  "homepage": "https://github.com/ankit-kaushal/Frontend-UI-Library#readme",
   "peerDependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0"