funuicss 3.2.1 → 3.2.2

package/css/fun.css

@@ -2774,6 +2774,7 @@ color: var(--text-color);
   box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
 }
 
+
 ._center-play-icon{
    position: absolute;
   top: 50%;
@@ -3211,13 +3212,13 @@ color: var(--text-color);
   border-radius: 50%;
 }
 .round-edge, .roundEdge {
-  border-radius: var(--borderRadius);
+  border-radius: var(--borderRadius) !important;
 }
 .roundEdgeSmall{
-  border-radius: var(--borderRadiusSmall);
+  border-radius: var(--borderRadiusSmall) !important;
 }
 .roundEdgeMax{
-  border-radius: var(--borderRadiusMax);
+  border-radius: var(--borderRadiusMax) !important;
 }
 .leftEdge{
   border-top-right-radius: 0 ;
@@ -3367,7 +3368,7 @@ color: var(--text-color);
 }
 
 
-
+.button
 /*inputs*/
 .input {
   padding: var(--inputPadding);
@@ -3496,6 +3497,7 @@ background-color: rgba(var(--borderRgb), 0.3);
 
 .input.borderedInput:focus {
   outline: var(--input_outline_size) solid var(--primary);
+  box-shadow: 0 0 0 3px rgba(var(--borderRgb), 0.1);
 }
 
 .input.borderless {
@@ -3517,6 +3519,214 @@ background-color: rgba(var(--borderRgb), 0.3);
 }
 
 
+.custom-select {position: relative; width: 100%; border-radius: var(--InputButtonBorderRadius);}
+
+.custom-select.fullWidth {max-width: none;}
+
+
+.select-trigger {
+display: flex;
+align-items: center;
+justify-content: space-between;
+  padding: var(--inputRoundedPadding);
+background: inherit;
+border: var(--border);
+border-radius: var(--InputButtonBorderRadius);
+cursor: pointer;
+transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+font-size: 14px;
+line-height: 1.5;
+min-height: 48px;
+user-select: none;
+outline: none;
+}
+
+
+
+.select-trigger.open {
+border-color: var(--primary);
+box-shadow: 0 0 0 3px rgba(var(--borderRgb), 0.1);
+border-bottom-left-radius: 0;
+border-bottom-right-radius: 0;
+}
+
+       
+
+.select-trigger.borderless {
+border: none !important;
+background: transparent;
+}
+
+
+.select-trigger.rounded {
+border-radius: 24px;
+}
+
+.select-trigger.rounded.open {
+border-bottom-left-radius: 0;
+border-bottom-right-radius: 0;
+}
+
+.select-trigger.flat {
+box-shadow: none;
+}
+
+.select-trigger.flat:hover:not(.disabled),
+.select-trigger.flat:focus:not(.disabled) {
+box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.select-trigger.success {
+border-color: var(--success);
+}
+
+.select-trigger.warning {
+border-color: var(--warning);
+}
+
+.select-trigger.danger {
+border-color: var(--error);
+}
+
+.select-trigger.disabled {
+background: var(--gray);
+cursor: not-allowed;
+opacity: 0.6;
+}
+
+.select-value {
+flex: 1;
+text-align: left;
+white-space: nowrap;
+overflow: hidden;
+text-overflow: ellipsis;
+}
+
+.select-placeholder {
+color: inherit;
+}
+
+.select-arrow {
+width: 20px;
+height: 20px;
+display: flex;
+align-items: center;
+justify-content: center;
+transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+color: inherit;
+flex-shrink: 0;
+margin-left: 8px;
+}
+
+.select-arrow.open {
+transform: rotate(180deg);
+}
+
+.select-dropdown {
+position: absolute;
+top: 100%;
+left: 0;
+right: 0;
+background: var(--raiseOpaque);
+backdrop-filter: blur(12px);
+border-top: none;
+border-radius: 0 0 8px 8px;
+max-height: 250px;
+overflow: hidden;
+z-index: 1000;
+opacity: 0;
+visibility: hidden;
+transform: translateY(-10px);
+transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+box-shadow: var(--card);
+}
+
+.select-dropdown.open {
+opacity: 1;
+visibility: visible;
+transform: translateY(0);
+}
+
+.select-dropdown.rounded {
+border-radius: 0 0 24px 24px;
+}
+
+.select-search {
+padding: 12px 16px;
+border: none;
+width: 100%;
+font-size: 14px;
+outline: none;
+background: var(--page-bg);
+color: inherit;
+}
+
+.select-search:focus {
+background: var(--lighter);
+}
+
+.select-options {
+max-height: 200px;
+overflow-y: auto;
+}
+
+.select-options::-webkit-scrollbar {
+width: 6px;
+}
+
+
+.select-option {
+padding: 12px 16px;
+cursor: pointer;
+transition: all 0.15s ease;
+font-size: 14px;
+color: inherit;
+border: none;
+background: none;
+width: 100%;
+text-align: left;
+display: flex;
+align-items: center;
+}
+
+.select-option:hover {
+background: var(--lighter);
+}
+
+.select-option.selected {
+background: var(--page-bg);
+font-weight: 500;
+}
+
+.select-option.focused {
+background: var(--lighter);
+outline: none;
+}
+
+.select-option.no-results {
+cursor: default;
+font-style: italic;
+}
+
+.select-option.no-results:hover {
+background: transparent;
+}
+
+@keyframes fadeInUp {
+from {
+opacity: 0;
+transform: translateY(10px);
+}
+to {
+opacity: 1;
+transform: translateY(0);
+}
+}
+
+.select-option {
+animation: fadeInUp 0.1s ease forwards;
+}
+
 .icon-container {
   position: relative;
   display: flex;

package/index.d.ts

@@ -53,6 +53,7 @@ export { default as Vista } from "./ui/vista/Vista";
 export { default as Slider } from "./ui/slider/Slider";
 export { default as FlexItem } from "./ui/flex/FlexItem";
 export { default as ScrollToTop } from "./ui/scrolltotop/ScrollToTop";
+export { default as Select } from "./ui/select/Select";
 export { default as Cookie } from "./js/Cookie";
 export { FunGet } from "./js/Fun";
 export { default as GoogleAnalytics } from "./js/google/analytics";

package/index.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DatePicker = exports.View = exports.ScrollInView = exports.Accordion = exports.Flex = exports.RichText = exports.Carousel = exports.Video = exports.SideBar = exports.ChartPie = exports.Lines = exports.Bars = exports.FullCenteredPage = exports.CircleGroup = exports.Circle = exports.Hr = exports.Section = exports.RowFlex = exports.Tip = exports.AppBar = exports.ToolTip = exports.Notification = exports.FunLoader = exports.ProgressBar = exports.DropMenu = exports.DropItem = exports.Dropdown = exports.DropDown = exports.DropUp = exports.UnAuthorized = exports.NotFound = exports.StepLine = exports.StepHeader = exports.Step = exports.StepContainer = exports.Div = exports.Text = exports.List = exports.Table = exports.Modal = exports.Loader = exports.Input = exports.Col = exports.Grid = exports.Container = exports.BreadCrumb = exports.Card = exports.Button = exports.ThemeProvider = exports.Alert = void 0;
-exports.GoogleAnalytics = exports.FunGet = exports.Cookie = exports.ScrollToTop = exports.FlexItem = exports.Slider = exports.Vista = exports.Calendar = void 0;
+exports.GoogleAnalytics = exports.FunGet = exports.Cookie = exports.Select = exports.ScrollToTop = exports.FlexItem = exports.Slider = exports.Vista = exports.Calendar = void 0;
 var Alert_1 = require("./ui/alert/Alert");
 Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return __importDefault(Alert_1).default; } });
 var theme_1 = require("./ui/theme/theme");
@@ -115,6 +115,8 @@ var FlexItem_1 = require("./ui/flex/FlexItem");
 Object.defineProperty(exports, "FlexItem", { enumerable: true, get: function () { return __importDefault(FlexItem_1).default; } });
 var ScrollToTop_1 = require("./ui/scrolltotop/ScrollToTop");
 Object.defineProperty(exports, "ScrollToTop", { enumerable: true, get: function () { return __importDefault(ScrollToTop_1).default; } });
+var Select_1 = require("./ui/select/Select");
+Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return __importDefault(Select_1).default; } });
 // js 
 var Cookie_1 = require("./js/Cookie");
 Object.defineProperty(exports, "Cookie", { enumerable: true, get: function () { return __importDefault(Cookie_1).default; } });

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.2.1",
+  "version": "3.2.2",
   "name": "funuicss",
   "description": "React and Next.js component UI Library for creating Easy and good looking websites with fewer lines of code. Elevate your web development experience with our cutting-edge React/Next.js component UI Library. Craft stunning websites effortlessly, boasting both seamless functionality and aesthetic appeal—all achieved with minimal lines of code. Unleash the power of simplicity and style in your projects!",
   "main": "index.js",

package/ui/input/Input.d.ts

@@ -1,35 +1,60 @@
 import React from 'react';
-interface InputProps {
-    select?: boolean;
+interface BaseInputProps {
+    id?: string;
+    name?: string;
+    value?: any;
+    defaultValue?: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
+    status?: 'success' | 'warning' | 'danger' | '';
+    funcss?: string;
+    bg?: string;
+    fullWidth?: boolean;
+    flat?: boolean;
     bordered?: boolean;
     borderless?: boolean;
+    rounded?: boolean;
+    leftRounded?: boolean;
+    rightRounded?: boolean;
+}
+interface SelectOption {
+    value: string;
+    text: string;
+}
+interface TextInputProps extends BaseInputProps {
+    type?: string;
+    label?: string;
+}
+interface SelectProps extends BaseInputProps {
+    options?: SelectOption[];
+}
+interface TextareaProps extends BaseInputProps {
+    label?: string;
+    rows?: number;
+}
+interface FileInputProps extends BaseInputProps {
+    label?: string;
+    icon?: React.ReactNode;
+    extra?: React.ReactNode;
+    button?: React.ReactNode;
+    btn?: boolean;
+}
+export declare const TextInput: React.FC<TextInputProps & React.InputHTMLAttributes<HTMLInputElement>>;
+export declare const SelectInput: React.FC<SelectProps & React.SelectHTMLAttributes<HTMLSelectElement>>;
+export declare const TextareaInput: React.FC<TextareaProps & React.TextareaHTMLAttributes<HTMLTextAreaElement>>;
+export declare const FileInput: React.FC<FileInputProps & React.InputHTMLAttributes<HTMLInputElement>>;
+interface InputProps extends BaseInputProps {
+    select?: boolean;
     multiline?: boolean;
     file?: boolean;
     noBorder?: boolean;
     icon?: React.ReactNode;
     extra?: React.ReactNode;
     button?: React.ReactNode;
-    id?: string;
-    status?: 'success' | 'warning' | 'danger' | '';
-    funcss?: string;
-    flat?: boolean;
-    leftRounded?: boolean;
-    rightRounded?: boolean;
-    rounded?: boolean;
-    fullWidth?: boolean;
     btn?: boolean;
     type?: string;
     label?: string;
-    name?: string;
-    value?: any;
-    defaultValue?: string;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
-    options?: {
-        value: string;
-        text: string;
-    }[];
+    options?: SelectOption[];
     rows?: number;
-    bg?: string;
 }
 declare const Input: React.FC<InputProps>;
 export default Input;

package/ui/input/Input.js

@@ -59,12 +59,79 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileInput = exports.TextareaInput = exports.SelectInput = exports.TextInput = void 0;
 var react_1 = __importStar(require("react"));
 var pi_1 = require("react-icons/pi");
 var Button_1 = __importDefault(require("../button/Button"));
-var Input = function (_a) {
-    var select = _a.select, bordered = _a.bordered, borderless = _a.borderless, multiline = _a.multiline, file = _a.file, extra = _a.extra, noBorder = _a.noBorder, icon = _a.icon, btn = _a.btn, button = _a.button, id = _a.id, status = _a.status, funcss = _a.funcss, flat = _a.flat, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, rounded = _a.rounded, fullWidth = _a.fullWidth, type = _a.type, label = _a.label, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, options = _a.options, rows = _a.rows, bg = _a.bg, rest = __rest(_a, ["select", "bordered", "borderless", "multiline", "file", "extra", "noBorder", "icon", "btn", "button", "id", "status", "funcss", "flat", "leftRounded", "rightRounded", "rounded", "fullWidth", "type", "label", "name", "value", "defaultValue", "onChange", "options", "rows", "bg"]);
-    var _b = (0, react_1.useState)(''), fileName = _b[0], setFileName = _b[1];
+// Utility function to generate CSS classes
+var generateInputClasses = function (_a) {
+    var status = _a.status, rounded = _a.rounded, bg = _a.bg, funcss = _a.funcss, flat = _a.flat, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, bordered = _a.bordered, borderless = _a.borderless, _b = _a.additionalClasses, additionalClasses = _b === void 0 ? '' : _b;
+    var statusClass = status ? "".concat(status, "-input") : '';
+    var roundedClass = rounded ? 'rounded' : '';
+    var bgClass = bg || '';
+    var flatClass = flat ? 'flat' : '';
+    var cornerClass = leftRounded ? 'leftRounded' : rightRounded ? 'rightRounded' : '';
+    var borderClass = bordered ? 'borderedInput' : borderless ? 'borderless' : '';
+    return "\n    ".concat(statusClass, "\n    ").concat(roundedClass, "\n    ").concat(bgClass, "\n    ").concat(funcss || '', "\n    ").concat(flatClass, "\n    ").concat(cornerClass, "\n    ").concat(borderClass, "\n    ").concat(additionalClasses, "\n    input\n  ").trim().replace(/\s+/g, ' ');
+};
+// Text Input Component
+var TextInput = function (_a) {
+    var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, status = _a.status, funcss = _a.funcss, bg = _a.bg, fullWidth = _a.fullWidth, flat = _a.flat, bordered = _a.bordered, borderless = _a.borderless, rounded = _a.rounded, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, _b = _a.type, type = _b === void 0 ? 'text' : _b, label = _a.label, rest = __rest(_a, ["id", "name", "value", "defaultValue", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "bordered", "borderless", "rounded", "leftRounded", "rightRounded", "type", "label"]);
+    var className = generateInputClasses({
+        status: status,
+        rounded: rounded,
+        bg: bg,
+        funcss: funcss,
+        flat: flat,
+        leftRounded: leftRounded,
+        rightRounded: rightRounded,
+        bordered: bordered,
+        borderless: borderless
+    });
+    var style = fullWidth ? { width: '100%' } : undefined;
+    return (react_1.default.createElement("input", __assign({ id: id, name: name, className: className, onChange: onChange, defaultValue: defaultValue, type: type, placeholder: label, style: style, value: value }, rest)));
+};
+exports.TextInput = TextInput;
+// Select Component
+var SelectInput = function (_a) {
+    var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, status = _a.status, funcss = _a.funcss, bg = _a.bg, fullWidth = _a.fullWidth, flat = _a.flat, bordered = _a.bordered, borderless = _a.borderless, rounded = _a.rounded, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, _b = _a.options, options = _b === void 0 ? [] : _b, rest = __rest(_a, ["id", "name", "value", "defaultValue", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "bordered", "borderless", "rounded", "leftRounded", "rightRounded", "options"]);
+    var className = generateInputClasses({
+        status: status,
+        rounded: rounded,
+        bg: bg,
+        funcss: funcss,
+        flat: flat,
+        leftRounded: leftRounded,
+        rightRounded: rightRounded,
+        bordered: bordered,
+        borderless: borderless
+    });
+    var style = fullWidth ? { width: '100%' } : undefined;
+    return (react_1.default.createElement("select", __assign({ id: id, name: name, className: className, onChange: onChange, defaultValue: defaultValue, value: value, style: style }, rest), options.map(function (option) { return (react_1.default.createElement("option", { key: option.value, value: option.value }, option.text)); })));
+};
+exports.SelectInput = SelectInput;
+// Textarea Component
+var TextareaInput = function (_a) {
+    var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, status = _a.status, funcss = _a.funcss, bg = _a.bg, fullWidth = _a.fullWidth, flat = _a.flat, bordered = _a.bordered, borderless = _a.borderless, rounded = _a.rounded, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, label = _a.label, _b = _a.rows, rows = _b === void 0 ? 2 : _b, rest = __rest(_a, ["id", "name", "value", "defaultValue", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "bordered", "borderless", "rounded", "leftRounded", "rightRounded", "label", "rows"]);
+    var className = generateInputClasses({
+        status: status,
+        rounded: rounded,
+        bg: bg,
+        funcss: funcss,
+        flat: flat,
+        leftRounded: leftRounded,
+        rightRounded: rightRounded,
+        bordered: bordered,
+        borderless: borderless
+    });
+    var style = fullWidth ? { width: '100%' } : undefined;
+    return (react_1.default.createElement("textarea", __assign({ id: id, name: name, className: className, onChange: onChange, defaultValue: defaultValue, placeholder: label, style: style, value: value, rows: rows }, rest)));
+};
+exports.TextareaInput = TextareaInput;
+// File Input Component
+var FileInput = function (_a) {
+    var _b = _a.id, id = _b === void 0 ? 'fileInput' : _b, name = _a.name, onChange = _a.onChange, status = _a.status, funcss = _a.funcss, bg = _a.bg, fullWidth = _a.fullWidth, flat = _a.flat, rounded = _a.rounded, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, _c = _a.label, label = _c === void 0 ? 'Upload File' : _c, icon = _a.icon, extra = _a.extra, button = _a.button, btn = _a.btn, value = _a.value, rest = __rest(_a, ["id", "name", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "rounded", "leftRounded", "rightRounded", "label", "icon", "extra", "button", "btn", "value"]);
+    var _d = (0, react_1.useState)(''), fileName = _d[0], setFileName = _d[1];
     var handleChange = function (e) {
         var _a;
         var file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
@@ -74,83 +141,51 @@ var Input = function (_a) {
         if (onChange)
             onChange(e);
     };
-    if (select) {
-        if (bordered) {
-            return (react_1.default.createElement("select", __assign({}, rest, { id: id, className: "\n            ".concat(status === 'success' ? 'success-input' : '', "\n            ").concat(status === 'warning' ? 'warning-input' : '', "\n            ").concat(status === 'danger' ? 'danger-input' : '', "\n            input \n            ").concat(rounded ? "rounded" : '', "\n            ").concat(bg ? bg : '', "\n            ").concat(funcss, " ").concat(flat ? 'flat' : '', "\n            ").concat(leftRounded ? 'leftRounded' : rightRounded ? 'rightRounded' : '', "\n            borderedInput\n          "), onChange: onChange, defaultValue: defaultValue, name: name, style: {
-                    width: "".concat(fullWidth ? '100%' : '')
-                }, value: value }), options
-                ? options.map(function (doc) { return (react_1.default.createElement("option", { value: doc.value, key: doc.value }, doc.text)); })
-                : ''));
-        }
-        else if (borderless) {
-            return (react_1.default.createElement("select", __assign({}, rest, { id: id, className: "\n            ".concat(status === 'success' ? 'success-input' : '', "\n            ").concat(status === 'warning' ? 'warning-input' : '', "\n            ").concat(status === 'danger' ? 'danger-input' : '', "\n            input \n            ").concat(rounded ? "rounded" : '', "\n            ").concat(bg ? bg : '', "\n            ").concat(funcss, " ").concat(flat ? 'flat' : '', "\n            ").concat(leftRounded ? 'leftRounded' : rightRounded ? 'rightRounded' : '', "\n            borderless\n          "), onChange: onChange, defaultValue: defaultValue, name: name, value: value, style: {
-                    width: "".concat(fullWidth ? '100%' : '')
-                } }), options
-                ? options.map(function (doc) { return (react_1.default.createElement("option", { value: doc.value, key: doc.value }, doc.text)); })
-                : ''));
-        }
-        else {
-            return (react_1.default.createElement("select", __assign({}, rest, { id: id, className: "\n            ".concat(status === 'success' ? 'success-input' : '', "\n            ").concat(status === 'warning' ? 'warning-input' : '', "\n            ").concat(status === 'danger' ? 'danger-input' : '', "\n            input \n            ").concat(rounded ? "rounded" : '', "\n            ").concat(bg ? bg : '', "\n            ").concat(funcss, " ").concat(flat ? 'flat' : '', "\n            ").concat(leftRounded ? 'leftRounded' : rightRounded ? 'rightRounded' : '', "\n          "), onChange: onChange, defaultValue: defaultValue, name: name, value: value, style: {
-                    width: "".concat(fullWidth ? '100%' : '')
-                } }), options
-                ? options.map(function (doc) { return (react_1.default.createElement("option", { value: doc.value, key: doc.value }, doc.text)); })
-                : ''));
-        }
+    if (btn) {
+        var className = generateInputClasses({
+            status: status,
+            rounded: rounded,
+            bg: bg,
+            funcss: funcss,
+            flat: flat,
+            leftRounded: leftRounded,
+            rightRounded: rightRounded,
+            bordered: true,
+            borderless: false,
+            additionalClasses: 'filedInput'
+        });
+        var style = fullWidth ? { width: '100%' } : undefined;
+        return (react_1.default.createElement("div", { className: "fileInput" },
+            button || (react_1.default.createElement(Button_1.default, { funcss: funcss, startIcon: icon || react_1.default.createElement(pi_1.PiCloudArrowUp, null), bg: "primary", fullWidth: true, raised: true }, fileName || label)),
+            react_1.default.createElement("input", __assign({ id: id, name: name, className: className, onChange: handleChange, type: "file", style: style, value: value }, rest))));
     }
-    else if (multiline) {
-        if (bordered) {
-            return (react_1.default.createElement("textarea", __assign({}, rest, { id: id, className: "\n            ".concat(status === 'success' ? 'success-input' : '', "\n            ").concat(status === 'warning' ? 'warning-input' : '', "\n            ").concat(status === 'danger' ? 'danger-input' : '', "\n            input \n            ").concat(rounded ? "rounded" : '', "\n            ").concat(bg ? bg : '', "\n            ").concat(funcss, " ").concat(flat ? 'flat' : '', "\n            ").concat(leftRounded ? 'leftRounded' : rightRounded ? 'rightRounded' : '', "\n            borderedInput\n          "), onChange: onChange, defaultValue: defaultValue, placeholder: label, name: name, style: {
-                    width: "".concat(fullWidth ? '100%' : '')
-                }, value: value, rows: rows ? rows : 2 })));
-        }
-        else if (borderless) {
-            return (react_1.default.createElement("textarea", __assign({}, rest, { id: id, className: "\n            ".concat(status === 'success' ? 'success-input' : '', "\n            ").concat(status === 'warning' ? 'warning-input' : '', "\n            ").concat(status === 'danger' ? 'danger-input' : '', "\n            input \n            ").concat(rounded ? "rounded" : '', "\n            ").concat(bg ? bg : '', "\n            ").concat(funcss, " ").concat(flat ? 'flat' : '', "\n            ").concat(leftRounded ? 'leftRounded' : rightRounded ? 'rightRounded' : '', "\n            borderless\n          "), onChange: onChange, defaultValue: defaultValue, placeholder: label, name: name, value: value, style: {
-                    width: "".concat(fullWidth ? '100%' : '')
-                }, rows: rows ? rows : 2 })));
-        }
-        else {
-            return (react_1.default.createElement("textarea", __assign({}, rest, { id: id, className: "\n            ".concat(status === 'success' ? 'success-input' : '', "\n            ").concat(status === 'warning' ? 'warning-input' : '', "\n            ").concat(status === 'danger' ? 'danger-input' : '', "\n            input \n            ").concat(rounded ? "rounded" : '', "\n            ").concat(bg ? bg : '', "\n            ").concat(funcss, " ").concat(flat ? 'flat' : '', "\n            ").concat(leftRounded ? 'leftRounded' : rightRounded ? 'rightRounded' : '', "\n          "), onChange: onChange, defaultValue: defaultValue, placeholder: label, name: name, value: value, style: {
-                    width: "".concat(fullWidth ? '100%' : '')
-                }, rows: rows ? rows : 2 })));
-        }
+    return (react_1.default.createElement("div", { className: "_upload_container" },
+        react_1.default.createElement("label", { htmlFor: id, className: "_upload_label" },
+            react_1.default.createElement("div", { className: "_upload_icon" }, icon || react_1.default.createElement(pi_1.PiCloudArrowUp, null)),
+            react_1.default.createElement("div", { className: "_upload_text", style: {
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    display: 'inline-block',
+                    width: '100%',
+                } }, fileName || label),
+            extra && react_1.default.createElement("div", { className: "text-small opacity-3" }, extra)),
+        react_1.default.createElement("input", __assign({ onChange: handleChange, type: "file", id: id, className: "_upload_input" }, rest))));
+};
+exports.FileInput = FileInput;
+var Input = function (_a) {
+    var select = _a.select, multiline = _a.multiline, file = _a.file, noBorder = _a.noBorder, props = __rest(_a, ["select", "multiline", "file", "noBorder"]);
+    // Handle legacy noBorder prop
+    var inputProps = __assign(__assign({}, props), { borderless: noBorder || props.borderless });
+    if (select) {
+        return react_1.default.createElement(exports.SelectInput, __assign({}, inputProps));
     }
-    else if (file) {
-        if (btn)
-            return (react_1.default.createElement("div", { className: "fileInput" },
-                button ? (button) : (react_1.default.createElement(Button_1.default, { funcss: " ".concat(funcss, " "), startIcon: icon ? icon : react_1.default.createElement(pi_1.PiCloudArrowUp, null), bg: "primary", fullWidth: true, raised: true }, fileName || label || 'Upload File')),
-                react_1.default.createElement("input", __assign({ name: name, id: id, className: "\n            ".concat(status === 'success' ? 'success-input' : '', "\n            ").concat(status === 'warning' ? 'warning-input' : '', "\n            ").concat(status === 'danger' ? 'danger-input' : '', "\n            input \n            ").concat(rounded ? "rounded" : '', "\n            ").concat(bg ? bg : '', "\n            ").concat(funcss, " ").concat(flat ? 'flat' : '', "\n            ").concat(leftRounded ? 'leftRounded' : rightRounded ? 'rightRounded' : '', "\n            borderedInput\n            filedInput\n          "), onChange: handleChange, type: 'file', style: {
-                        width: "".concat(fullWidth ? '100%' : '')
-                    }, value: value }, rest))));
-        return (react_1.default.createElement("div", { className: "_upload_container" },
-            react_1.default.createElement("label", { htmlFor: id || "fileInput", className: "_upload_label" },
-                react_1.default.createElement("div", { className: "_upload_icon" }, icon || react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(pi_1.PiCloudArrowUp, null))),
-                react_1.default.createElement("div", { className: "_upload_text", style: {
-                        whiteSpace: 'nowrap',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        display: 'inline-block',
-                        width: '100%',
-                    } }, fileName || label || "Upload File"),
-                react_1.default.createElement("div", { className: "text-small opacity-3" }, extra || '')),
-            react_1.default.createElement("input", __assign({ onChange: handleChange, type: "file", id: id || "fileInput", className: "_upload_input" }, rest))));
+    if (multiline) {
+        return react_1.default.createElement(exports.TextareaInput, __assign({}, inputProps));
     }
-    else {
-        if (bordered) {
-            return (react_1.default.createElement("input", __assign({ name: name, id: id, className: "\n            ".concat(status === 'success' ? 'success-input' : '', "\n            ").concat(status === 'warning' ? 'warning-input' : '', "\n            ").concat(status === 'danger' ? 'danger-input' : '', "\n            input \n            ").concat(rounded ? "rounded" : '', "\n            ").concat(bg ? bg : '', "\n            ").concat(funcss, " ").concat(flat ? 'flat' : '', "\n            ").concat(leftRounded ? 'leftRounded' : rightRounded ? 'rightRounded' : '', "\n            borderedInput\n          "), onChange: onChange, defaultValue: defaultValue, type: type, placeholder: label, style: {
-                    width: "".concat(fullWidth ? '100%' : '')
-                }, value: value }, rest)));
-        }
-        else if (borderless) {
-            return (react_1.default.createElement("input", __assign({ name: name, id: id, className: "\n            ".concat(status === 'success' ? 'success-input' : '', "\n            ").concat(status === 'warning' ? 'warning-input' : '', "\n            ").concat(status === 'danger' ? 'danger-input' : '', "\n            input \n            ").concat(rounded ? "rounded" : '', "\n            ").concat(bg ? bg : '', "\n            ").concat(funcss, " ").concat(flat ? 'flat' : '', "\n            ").concat(leftRounded ? 'leftRounded' : rightRounded ? 'rightRounded' : '', "\n            borderless\n          "), onChange: onChange, defaultValue: defaultValue, type: type, placeholder: label, value: value, style: {
-                    width: "".concat(fullWidth ? '100%' : '')
-                } }, rest)));
-        }
-        else {
-            return (react_1.default.createElement("input", __assign({ name: name, id: id, className: "\n            ".concat(status === 'success' ? 'success-input' : '', "\n            ").concat(status === 'warning' ? 'warning-input' : '', "\n            ").concat(status === 'danger' ? 'danger-input' : '', "\n            input \n            ").concat(rounded ? "rounded" : '', "\n            ").concat(bg ? bg : '', "\n            ").concat(funcss, " ").concat(flat ? 'flat' : '', "\n            ").concat(leftRounded ? 'leftRounded' : rightRounded ? 'rightRounded' : '', "\n          "), onChange: onChange, defaultValue: defaultValue, type: type, placeholder: label, value: value, style: {
-                    width: "".concat(fullWidth ? '100%' : '')
-                } }, rest)));
-        }
+    if (file) {
+        return react_1.default.createElement(exports.FileInput, __assign({}, inputProps));
     }
+    return react_1.default.createElement(exports.TextInput, __assign({}, inputProps));
 };
 exports.default = Input;

package/ui/select/Select.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+interface SelectOption {
+    value: string;
+    text: string;
+}
+interface CustomSelectProps {
+    id?: string;
+    name?: string;
+    value?: string;
+    defaultValue?: string;
+    placeholder?: string;
+    options: SelectOption[];
+    onChange?: (value: string, option: SelectOption) => void;
+    onBlur?: (event: React.FocusEvent) => void;
+    searchable?: boolean;
+    disabled?: boolean;
+    bordered?: boolean;
+    borderless?: boolean;
+    rounded?: boolean;
+    flat?: boolean;
+    fullWidth?: boolean;
+    status?: 'success' | 'warning' | 'danger' | '';
+    className?: string;
+    funcss?: string;
+    style?: React.CSSProperties;
+}
+declare const Select: React.FC<CustomSelectProps>;
+export default Select;

package/ui/select/Select.js

@@ -0,0 +1,189 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var Select = function (_a) {
+    var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, _b = _a.placeholder, placeholder = _b === void 0 ? 'Select an option' : _b, _c = _a.options, options = _c === void 0 ? [] : _c, onChange = _a.onChange, onBlur = _a.onBlur, _d = _a.searchable, searchable = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.bordered, bordered = _f === void 0 ? false : _f, _g = _a.borderless, borderless = _g === void 0 ? false : _g, _h = _a.rounded, rounded = _h === void 0 ? false : _h, _j = _a.flat, flat = _j === void 0 ? false : _j, _k = _a.fullWidth, fullWidth = _k === void 0 ? false : _k, _l = _a.status, status = _l === void 0 ? '' : _l, _m = _a.className, className = _m === void 0 ? '' : _m, _o = _a.funcss, funcss = _o === void 0 ? '' : _o, _p = _a.style, style = _p === void 0 ? {} : _p;
+    var _q = (0, react_1.useState)(false), isOpen = _q[0], setIsOpen = _q[1];
+    var _r = (0, react_1.useState)(null), selectedOption = _r[0], setSelectedOption = _r[1];
+    var _s = (0, react_1.useState)(''), searchQuery = _s[0], setSearchQuery = _s[1];
+    var _t = (0, react_1.useState)(-1), focusedIndex = _t[0], setFocusedIndex = _t[1];
+    var _u = (0, react_1.useState)(options), filteredOptions = _u[0], setFilteredOptions = _u[1];
+    var containerRef = (0, react_1.useRef)(null);
+    var triggerRef = (0, react_1.useRef)(null);
+    var searchInputRef = (0, react_1.useRef)(null);
+    // Initialize selected option
+    (0, react_1.useEffect)(function () {
+        var initialValue = value || defaultValue;
+        if (initialValue) {
+            var option = options.find(function (opt) { return opt.value === initialValue; });
+            if (option) {
+                setSelectedOption(option);
+            }
+        }
+    }, [value, defaultValue, options]);
+    // Update filtered options when search query changes
+    (0, react_1.useEffect)(function () {
+        if (searchQuery) {
+            var filtered = options.filter(function (option) {
+                return option.text.toLowerCase().includes(searchQuery.toLowerCase());
+            });
+            setFilteredOptions(filtered);
+            setFocusedIndex(filtered.length > 0 ? 0 : -1);
+        }
+        else {
+            setFilteredOptions(options);
+            setFocusedIndex(-1);
+        }
+    }, [searchQuery, options]);
+    // Handle outside clicks
+    (0, react_1.useEffect)(function () {
+        var handleClickOutside = function (event) {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                closeDropdown();
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+            return function () { return document.removeEventListener('mousedown', handleClickOutside); };
+        }
+    }, [isOpen]);
+    var openDropdown = function () {
+        if (disabled)
+            return;
+        setIsOpen(true);
+        if (searchable && searchInputRef.current) {
+            setTimeout(function () { var _a; return (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 100);
+        }
+        else if (selectedOption) {
+            var index = filteredOptions.findIndex(function (opt) { return opt.value === selectedOption.value; });
+            setFocusedIndex(index >= 0 ? index : 0);
+        }
+        else {
+            setFocusedIndex(0);
+        }
+    };
+    var closeDropdown = function () {
+        setIsOpen(false);
+        setSearchQuery('');
+        setFocusedIndex(-1);
+    };
+    var selectOption = function (option) {
+        setSelectedOption(option);
+        closeDropdown();
+        onChange === null || onChange === void 0 ? void 0 : onChange(option.value, option);
+    };
+    var handleKeyDown = function (event) {
+        var _a;
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                if (isOpen && focusedIndex >= 0) {
+                    selectOption(filteredOptions[focusedIndex]);
+                }
+                else {
+                    openDropdown();
+                }
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                if (!isOpen) {
+                    openDropdown();
+                }
+                else {
+                    setFocusedIndex(function (prev) { return Math.min(prev + 1, filteredOptions.length - 1); });
+                }
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (isOpen) {
+                    setFocusedIndex(function (prev) { return Math.max(prev - 1, 0); });
+                }
+                break;
+            case 'Escape':
+                if (isOpen) {
+                    event.preventDefault();
+                    closeDropdown();
+                    (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                }
+                break;
+        }
+    };
+    var handleSearchKeyDown = function (event) {
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            handleKeyDown(event);
+        }
+        else if (event.key === 'Enter' && focusedIndex >= 0) {
+            event.preventDefault();
+            selectOption(filteredOptions[focusedIndex]);
+        }
+        else if (event.key === 'Escape') {
+            closeDropdown();
+        }
+    };
+    var getTriggerClasses = function () {
+        var classes = [
+            'select-trigger',
+            isOpen && 'open',
+            bordered && 'bordered',
+            borderless && 'borderless',
+            flat && 'flat',
+            status && status,
+            disabled && 'disabled'
+        ].filter(Boolean);
+        return classes.join(' ');
+    };
+    var getContainerClasses = function () {
+        var classes = [
+            'custom-select',
+            fullWidth && 'fullWidth',
+            ,
+        ].filter(Boolean);
+        return classes.join(' ');
+    };
+    return (react_1.default.createElement("div", { ref: containerRef, className: "".concat(funcss, " ").concat(rounded && 'round-edge', " ").concat(getContainerClasses()), style: style },
+        react_1.default.createElement("div", { ref: triggerRef, className: "".concat(funcss, " ").concat(rounded && 'round-edge', "  ").concat(getTriggerClasses()), onClick: openDropdown, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, role: "button", "aria-expanded": isOpen, "aria-haspopup": "listbox" },
+            react_1.default.createElement("span", { className: "select-value ".concat(!selectedOption ? 'select-placeholder' : '') }, selectedOption ? selectedOption.text : placeholder),
+            react_1.default.createElement("div", { className: "select-arrow ".concat(isOpen ? 'open' : '') },
+                react_1.default.createElement("svg", { width: "16", height: "16", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
+                    react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 9l-7 7-7-7" })))),
+        react_1.default.createElement("div", { className: "select-dropdown ".concat(isOpen ? 'open' : '', " ") },
+            searchable && (react_1.default.createElement("input", { ref: searchInputRef, type: "text", className: "select-search", placeholder: "Search options...", value: searchQuery, onChange: function (e) { return setSearchQuery(e.target.value); }, onKeyDown: handleSearchKeyDown })),
+            react_1.default.createElement("div", { className: "select-options", role: "listbox" }, filteredOptions.length === 0 ? (react_1.default.createElement("div", { className: "select-option no-results" }, "No options found")) : (filteredOptions.map(function (option, index) { return (react_1.default.createElement("button", { key: option.value, type: "button", className: "select-option ".concat((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value ? 'selected' : '', " ").concat(index === focusedIndex ? 'focused' : ''), onClick: function () { return selectOption(option); }, role: "option", "aria-selected": (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value }, option.text)); })))),
+        react_1.default.createElement("input", { type: "hidden", id: id, name: name, value: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) || '' })));
+};
+exports.default = Select;