funuicss 3.5.1 → 3.5.3

package/css/fun.css

@@ -3519,8 +3519,14 @@ background-color: rgba(var(--borderRgb), 0.3);
 
 }
 
-
-.custom-select {position: relative; width: 100%; border-radius: var(--InputButtonBorderRadius); }
+.custom-select {
+  position: relative; 
+  width: 100%; 
+  border-radius: var(--InputButtonBorderRadius);
+  /* FIX: Create a new stacking context and ensure proper layering */
+  z-index: 999;
+  isolation: isolate;
+}
 
 .custom-select.fullWidth {max-width: none;}
 
@@ -3630,16 +3636,17 @@ border-top: none;
 border-radius: 0 0 0.5rem 0.5rem;
 max-height: 250px;
 overflow: hidden;
-opacity: 0;
+/* opacity: 0; */
 visibility: hidden;
 transform: translateY(-10px);
 transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 box-shadow: var(--card);
-z-index: 1000 !important;
+/* FIX: Increased z-index and ensure it's above the parent's stacking context */
+z-index: 1001 !important;
 }
 
 .select-dropdown.open {
-opacity: 1;
+/* opacity: 1; */
 visibility: visible;
 transform: translateY(0);
 
@@ -3774,6 +3781,467 @@ padding-right: 2.5rem;
   
 }
 
+
+/* SearchableInput.css - Matching your theme format */
+
+/* Reset and base styles */
+* {
+  box-sizing: border-box;
+}
+
+/* Main wrapper */
+.searchable-input-wrapper {
+  position: relative;
+  display: inline-block;
+  font-family: inherit;
+}
+
+.searchable-input-wrapper.full-width {
+  display: block;
+  width: 100%;
+}
+
+/* Label styles */
+.searchable-input__label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-color);
+  line-height: 1.4;
+}
+
+/* Container for input and dropdown */
+.searchable-input__container {
+  position: relative;
+  display: block;
+}
+
+/* Input wrapper with icons */
+.searchable-input__input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+/* Base input styles */
+.searchable-input {
+  width: 100%;
+  height: var(--inputHeight);
+  padding: 0.6rem 0.8rem;
+  font-size: inherit;
+  line-height: 1.5;
+  color: var(--text-color);
+  background-color: var(--background-color);
+  border: none;
+  border-bottom: var(--inputBorder) solid var(--border-color);
+  border-radius: 0;
+  outline: none;
+  transition: 0.1s linear;
+}
+
+.searchable-input:focus {
+  border-bottom: var(--inputBorder) solid var(--primary);
+}
+
+.searchable-input::placeholder {
+  color: var(--text-muted);
+}
+
+/* Full width modifier */
+.searchable-input.full-width {
+  width: 100%;
+}
+
+/* Status modifiers */
+.searchable-input.success-input {
+  border-bottom: var(--inputBorder) solid var(--success) !important;
+}
+
+.searchable-input.warning-input {
+  border-bottom: var(--inputBorder) solid var(--warning) !important;
+}
+
+.searchable-input.danger-input {
+  border-bottom: var(--inputBorder) solid var(--danger) !important;
+}
+
+.searchable-input.success-input:focus,
+.searchable-input.warning-input:focus,
+.searchable-input.danger-input:focus {
+  outline: none !important;
+}
+
+/* Bordered input styles */
+.searchable-input.borderedInput {
+  border: var(--border);
+  border-radius: var(--InputButtonBorderRadius);
+  transition: 0.1s linear;
+  padding: 0.6rem 0.5rem;
+}
+
+.searchable-input.borderedInput:focus {
+  outline: var(--input_outline_size) solid var(--primary);
+  box-shadow: 0 0 0 3px rgba(var(--borderRgb), 0.1);
+}
+
+.searchable-input.success-input.borderedInput {
+  border: var(--inputBorder) solid var(--success) !important;
+  outline: var(--input_outline_size) solid var(--success);
+}
+
+.searchable-input.warning-input.borderedInput {
+  border: var(--inputBorder) solid var(--warning) !important;
+  outline: var(--input_outline_size) solid var(--warning);
+}
+
+.searchable-input.danger-input.borderedInput {
+  border: var(--inputBorder) solid var(--danger) !important;
+  outline: var(--input_outline_size) solid var(--danger);
+}
+
+/* Borderless input styles */
+.searchable-input.borderless {
+  border: none !important;
+  outline: none !important;
+  background-color: var(--light);
+}
+
+.searchable-input.borderless:focus {
+  border: none !important;
+  outline: none !important;
+  background-color: rgba(var(--borderRgb), 0.3);
+}
+
+/* Flat modifier */
+.searchable-input.flat {
+  border-radius: 0;
+}
+
+/* No outline */
+.searchable-input.no-outline {
+  outline: none;
+}
+
+/* Rounded modifiers */
+.searchable-input.round,
+.searchable-input.rounded {
+  border-radius: 100rem !important;
+  padding: var(--inputRoundedPadding);
+}
+
+.searchable-input.left-rounded {
+  border-top-left-radius: 100rem !important;
+  border-bottom-left-radius: 100rem !important;
+  padding-left: var(--inputRoundedPadding);
+}
+
+.searchable-input.right-rounded {
+  border-top-right-radius: 100rem !important;
+  border-bottom-right-radius: 100rem !important;
+  padding-right: var(--inputRoundedPadding);
+}
+
+/* Icon spacing modifiers */
+.searchable-input.with-left-icon {
+  padding-left: 2.5rem;
+}
+
+.searchable-input.with-clear {
+  padding-right: 4.5rem;
+}
+
+/* Disabled state */
+.searchable-input:disabled {
+  background-color: var(--disabled-bg, var(--light));
+  color: var(--text-muted);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* Left icon */
+.searchable-input__icon {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  color: var(--text-muted);
+  z-index: 1;
+}
+
+.searchable-input__icon--left {
+  left: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* Right actions container */
+.searchable-input__actions {
+  position: absolute;
+  right: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  z-index: 1;
+}
+
+/* Clear button */
+.searchable-input__clear-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  background: none;
+  border: none;
+  border-radius: 0.25rem;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: 0.1s linear;
+}
+
+.searchable-input__clear-btn:hover {
+  color: var(--text-color);
+  background-color: rgba(var(--borderRgb), 0.1);
+}
+
+.searchable-input__clear-btn:focus {
+  outline: var(--input_outline_size) solid var(--primary);
+}
+
+/* Caret container */
+.searchable-input__caret {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+}
+
+/* Caret icon */
+.searchable-input__caret-icon {
+  transition: transform 0.2s ease;
+}
+
+.searchable-input__caret-icon--open {
+  transform: rotate(180deg);
+}
+
+/* Loading spinner */
+.searchable-input__spinner {
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid rgba(var(--borderRgb), 0.3);
+  border-top: 2px solid var(--primary);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* Dropdown */
+.searchable-input__dropdown {
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background-color: var(--raiseThemes);
+  backdrop-filter: var(--raiseBackdrop);
+  border: var(--border);
+  border-radius: var(--InputButtonBorderRadius);
+  box-shadow: var(--shadow);
+  overflow: hidden;
+  animation: dropdown-appear 0.15s ease-out;
+}
+
+.searchable-input__dropdown--up {
+  bottom: 100%;
+  margin-bottom: 0.25rem;
+}
+
+.searchable-input__dropdown--down {
+  top: 100%;
+  margin-top: 0.25rem;
+}
+
+@keyframes dropdown-appear {
+  0% {
+    opacity: 0;
+    transform: translateY(-0.25rem);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Dropdown content */
+.searchable-input__dropdown-content {
+  padding: 0.25rem 0;
+  overflow-y: auto;
+  max-height: 12.5rem;
+}
+
+.searchable-input__dropdown-content::-webkit-scrollbar {
+  width: 0.375rem;
+}
+
+.searchable-input__dropdown-content::-webkit-scrollbar-track {
+  background: rgba(var(--borderRgb), 0.1);
+}
+
+.searchable-input__dropdown-content::-webkit-scrollbar-thumb {
+  background: rgba(var(--borderRgb), 0.3);
+  border-radius: 0.1875rem;
+}
+
+.searchable-input__dropdown-content::-webkit-scrollbar-thumb:hover {
+  background: rgba(var(--borderRgb), 0.5);
+}
+
+/* Option item */
+.searchable-input__option {
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+  transition: 0.1s linear;
+  border-bottom: 1px solid rgba(var(--borderRgb), 0.1);
+  color: var(--text-color);
+}
+
+.searchable-input__option:last-child {
+  border-bottom: none;
+}
+
+.searchable-input__option:hover {
+  background-color: rgba(var(--borderRgb), 0.1);
+}
+
+.searchable-input__option--highlighted {
+  background-color: rgba(var(--primaryRgb), 0.1);
+}
+
+.searchable-input__option--selected {
+  background-color: rgba(var(--primaryRgb), 0.2);
+  color: var(--primary);
+  font-weight: 500;
+}
+
+/* Option text */
+.searchable-input__option-text {
+  font-size: 0.875rem;
+  line-height: 1.4;
+  color: inherit;
+  margin-bottom: 0.125rem;
+}
+
+/* Option value (when different from text) */
+.searchable-input__option-value {
+  font-size: 0.75rem;
+  line-height: 1.3;
+  color: var(--text-muted);
+}
+
+.searchable-input__option--selected .searchable-input__option-value {
+  color: var(--primary);
+}
+
+/* Highlight matching text */
+.searchable-input__highlight {
+  background-color: var(--warning);
+  color: var(--text-color);
+  font-weight: 600;
+  padding: 0.0625rem 0.125rem;
+  border-radius: 0.125rem;
+}
+
+/* No data message */
+.searchable-input__no-data {
+  padding: 1rem;
+  text-align: center;
+  color: var(--text-muted);
+  font-size: 0.875rem;
+  font-style: italic;
+}
+
+/* Extra content */
+.searchable-input__extra {
+  margin-top: 0.375rem;
+  font-size: 0.75rem;
+  line-height: 1.4;
+}
+
+
+/* Responsive design */
+@media (max-width: 640px) {
+  .searchable-input-wrapper {
+    width: 100%;
+  }
+  
+  .searchable-input {
+    min-height: var(--inputHeight);
+    font-size: 1rem; /* Prevents zoom on iOS */
+  }
+  
+  .searchable-input__dropdown {
+    left: -0.25rem;
+    right: -0.25rem;
+  }
+}
+
+/* Focus-visible for better accessibility */
+.searchable-input:focus-visible {
+  outline: var(--input_outline_size) solid var(--primary);
+  outline-offset: 0.125rem;
+}
+
+.searchable-input__clear-btn:focus-visible {
+  outline: var(--input_outline_size) solid var(--primary);
+  outline-offset: 0.0625rem;
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .searchable-input {
+    border-width: 0.1875rem;
+  }
+  
+  .searchable-input__option--highlighted {
+    background-color: var(--text-color);
+    color: var(--background-color);
+  }
+  
+  .searchable-input__highlight {
+    background-color: var(--warning);
+    color: var(--text-color);
+    border: 1px solid var(--text-color);
+  }
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .searchable-input,
+  .searchable-input__caret-icon,
+  .searchable-input__clear-btn,
+  .searchable-input__option {
+    transition: none;
+  }
+  
+  .searchable-input__dropdown {
+    animation: none;
+  }
+  
+  .searchable-input__spinner {
+    animation: none;
+  }
+}
+
+
+
 @media screen and (max-width: 800px){
   .input , input, textarea , .bubble-editor , .bubble-editor-container{
     font-size: 16px !important;
@@ -8763,4 +9231,7 @@ background-color: rgba(0, 0, 0, 0.2);
 }
 .ql-container.ql-snow {
   border: 1px solid #ccc;
-}
+}
+
+
+

package/index.d.ts

@@ -7,6 +7,7 @@ export { default as Container } from "./ui/container/Container";
 export { default as Grid } from "./ui/grid/Grid";
 export { default as Col } from "./ui/grid/Col";
 export { default as Input } from "./ui/input/Input";
+export { default as SearchableInput } from "./ui/input/SearchableInput";
 export { default as Loader } from "./ui/loader/Loader";
 export { default as Modal } from "./ui/modal/Modal";
 export { default as Table } from "./ui/table/Table";

package/index.js

@@ -3,8 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": 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.Select = exports.ScrollToTop = exports.FlexItem = exports.Slider = exports.Vista = exports.Calendar = void 0;
+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.SearchableInput = 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.Select = exports.ScrollToTop = exports.FlexItem = exports.Slider = exports.Vista = exports.Calendar = exports.DatePicker = 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");
@@ -23,6 +23,8 @@ var Col_1 = require("./ui/grid/Col");
 Object.defineProperty(exports, "Col", { enumerable: true, get: function () { return __importDefault(Col_1).default; } });
 var Input_1 = require("./ui/input/Input");
 Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return __importDefault(Input_1).default; } });
+var SearchableInput_1 = require("./ui/input/SearchableInput");
+Object.defineProperty(exports, "SearchableInput", { enumerable: true, get: function () { return __importDefault(SearchableInput_1).default; } });
 var Loader_1 = require("./ui/loader/Loader");
 Object.defineProperty(exports, "Loader", { enumerable: true, get: function () { return __importDefault(Loader_1).default; } });
 var Modal_1 = require("./ui/modal/Modal");

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.5.1",
+  "version": "3.5.3",
   "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/SearchableInput.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+interface SearchableOption {
+    value: string | number;
+    text: string;
+    [key: string]: any;
+}
+interface SearchableInputProps {
+    id?: string;
+    name?: string;
+    status?: 'error' | 'success' | 'warning' | 'default';
+    funcss?: string;
+    bg?: string;
+    fullWidth?: boolean;
+    flat?: boolean;
+    rounded?: boolean;
+    leftRounded?: boolean;
+    rightRounded?: boolean;
+    label?: string;
+    placeholder?: string;
+    icon?: React.ReactNode;
+    extra?: React.ReactNode;
+    value?: string;
+    data?: SearchableOption[];
+    onSelect?: (option: SearchableOption) => void;
+    onChange?: (value: string) => void;
+    onInputChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    dropDirection?: 'up' | 'down';
+    maxHeight?: string;
+    minChars?: number;
+    clearable?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    noDataText?: string;
+    autoComplete?: boolean;
+    highlightMatch?: boolean;
+}
+declare const SearchableInput: React.FC<SearchableInputProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'>>;
+export default SearchableInput;

package/ui/input/SearchableInput.js

@@ -0,0 +1,258 @@
+"use strict";
+'use client';
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var pi_1 = require("react-icons/pi");
+// Mock function - replace with your actual function
+var generateInputClasses = function (options) {
+    var baseClasses = 'input-base border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500';
+    var statusClasses = {
+        error: 'border-red-500 focus:ring-red-500',
+        success: 'border-green-500 focus:ring-green-500',
+        warning: 'border-yellow-500 focus:ring-yellow-500',
+        default: 'border-gray-300 focus:ring-blue-500'
+    };
+    var classes = baseClasses;
+    if (options.status) {
+        classes += ' ' + statusClasses[options.status];
+    }
+    if (options.rounded)
+        classes += ' rounded-lg';
+    if (options.leftRounded)
+        classes += ' rounded-l-lg';
+    if (options.rightRounded)
+        classes += ' rounded-r-lg';
+    if (options.flat)
+        classes += ' shadow-none';
+    if (options.fullWidth)
+        classes += ' w-full';
+    if (options.additionalClasses)
+        classes += ' ' + options.additionalClasses;
+    return classes;
+};
+var SearchableInput = function (_a) {
+    var _b = _a.id, id = _b === void 0 ? 'searchableInput' : _b, name = _a.name, _c = _a.status, status = _c === void 0 ? 'default' : _c, funcss = _a.funcss, bg = _a.bg, _d = _a.fullWidth, fullWidth = _d === void 0 ? false : _d, _e = _a.flat, flat = _e === void 0 ? false : _e, _f = _a.rounded, rounded = _f === void 0 ? false : _f, _g = _a.leftRounded, leftRounded = _g === void 0 ? false : _g, _h = _a.rightRounded, rightRounded = _h === void 0 ? false : _h, label = _a.label, _j = _a.placeholder, placeholder = _j === void 0 ? 'Search...' : _j, icon = _a.icon, extra = _a.extra, _k = _a.value, value = _k === void 0 ? '' : _k, _l = _a.data, data = _l === void 0 ? [] : _l, onSelect = _a.onSelect, onChange = _a.onChange, onInputChange = _a.onInputChange, _m = _a.dropDirection, dropDirection = _m === void 0 ? 'up' : _m, _o = _a.maxHeight, maxHeight = _o === void 0 ? '200px' : _o, _p = _a.minChars, minChars = _p === void 0 ? 1 : _p, _q = _a.clearable, clearable = _q === void 0 ? true : _q, _r = _a.disabled, disabled = _r === void 0 ? false : _r, _s = _a.loading, loading = _s === void 0 ? false : _s, _t = _a.noDataText, noDataText = _t === void 0 ? 'No results found' : _t, _u = _a.autoComplete, autoComplete = _u === void 0 ? true : _u, _v = _a.highlightMatch, highlightMatch = _v === void 0 ? true : _v, rest = __rest(_a, ["id", "name", "status", "funcss", "bg", "fullWidth", "flat", "rounded", "leftRounded", "rightRounded", "label", "placeholder", "icon", "extra", "value", "data", "onSelect", "onChange", "onInputChange", "dropDirection", "maxHeight", "minChars", "clearable", "disabled", "loading", "noDataText", "autoComplete", "highlightMatch"]);
+    var _w = (0, react_1.useState)(value), inputValue = _w[0], setInputValue = _w[1];
+    var _x = (0, react_1.useState)(false), isOpen = _x[0], setIsOpen = _x[1];
+    var _y = (0, react_1.useState)(-1), highlightedIndex = _y[0], setHighlightedIndex = _y[1];
+    var _z = (0, react_1.useState)(null), selectedOption = _z[0], setSelectedOption = _z[1];
+    var inputRef = (0, react_1.useRef)(null);
+    var dropdownRef = (0, react_1.useRef)(null);
+    var optionRefs = (0, react_1.useRef)([]);
+    // Filter and sort options based on input
+    var filteredOptions = (0, react_1.useMemo)(function () {
+        if (!inputValue || inputValue.length < minChars)
+            return [];
+        var filtered = data.filter(function (option) {
+            return option.text.toLowerCase().includes(inputValue.toLowerCase()) ||
+                option.value.toString().toLowerCase().includes(inputValue.toLowerCase());
+        });
+        // Sort by relevance (exact matches first, then starts with, then contains)
+        return filtered.sort(function (a, b) {
+            var aText = a.text.toLowerCase();
+            var bText = b.text.toLowerCase();
+            var query = inputValue.toLowerCase();
+            if (aText === query)
+                return -1;
+            if (bText === query)
+                return 1;
+            if (aText.startsWith(query) && !bText.startsWith(query))
+                return -1;
+            if (bText.startsWith(query) && !aText.startsWith(query))
+                return 1;
+            return 0;
+        });
+    }, [inputValue, data, minChars]);
+    // Auto-complete logic
+    (0, react_1.useEffect)(function () {
+        if (autoComplete && filteredOptions.length > 0 && inputValue) {
+            var exactMatch = filteredOptions.find(function (option) {
+                return option.text.toLowerCase() === inputValue.toLowerCase();
+            });
+            if (exactMatch) {
+                setSelectedOption(exactMatch);
+            }
+        }
+    }, [filteredOptions, inputValue, autoComplete]);
+    // Handle input change
+    var handleInputChange = function (e) {
+        var newValue = e.target.value;
+        setInputValue(newValue);
+        setIsOpen(newValue.length >= minChars);
+        setHighlightedIndex(-1);
+        setSelectedOption(null);
+        if (onChange)
+            onChange(newValue);
+        if (onInputChange)
+            onInputChange(e);
+    };
+    // Handle option selection
+    var handleOptionSelect = function (option) {
+        setInputValue(option.text);
+        setSelectedOption(option);
+        setIsOpen(false);
+        setHighlightedIndex(-1);
+        if (onSelect)
+            onSelect(option);
+        if (onChange)
+            onChange(option.text);
+    };
+    // Handle keyboard navigation
+    var handleKeyDown = function (e) {
+        if (!isOpen || filteredOptions.length === 0)
+            return;
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                setHighlightedIndex(function (prev) {
+                    return prev < filteredOptions.length - 1 ? prev + 1 : 0;
+                });
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                setHighlightedIndex(function (prev) {
+                    return prev > 0 ? prev - 1 : filteredOptions.length - 1;
+                });
+                break;
+            case 'Enter':
+                e.preventDefault();
+                if (highlightedIndex >= 0) {
+                    handleOptionSelect(filteredOptions[highlightedIndex]);
+                }
+                break;
+            case 'Escape':
+                setIsOpen(false);
+                setHighlightedIndex(-1);
+                break;
+        }
+    };
+    // Scroll highlighted option into view
+    (0, react_1.useEffect)(function () {
+        var _a;
+        if (highlightedIndex >= 0 && optionRefs.current[highlightedIndex]) {
+            (_a = optionRefs.current[highlightedIndex]) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest'
+            });
+        }
+    }, [highlightedIndex]);
+    // Close dropdown when clicking outside
+    (0, react_1.useEffect)(function () {
+        var handleClickOutside = function (event) {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target) &&
+                inputRef.current && !inputRef.current.contains(event.target)) {
+                setIsOpen(false);
+                setHighlightedIndex(-1);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return function () { return document.removeEventListener('mousedown', handleClickOutside); };
+    }, []);
+    // Clear input
+    var handleClear = function () {
+        var _a;
+        setInputValue('');
+        setSelectedOption(null);
+        setIsOpen(false);
+        if (onChange)
+            onChange('');
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    // Highlight matching text
+    var highlightText = function (text, highlight) {
+        if (!highlightMatch || !highlight)
+            return text;
+        var parts = text.split(new RegExp("(".concat(highlight, ")"), 'gi'));
+        return parts.map(function (part, index) {
+            return part.toLowerCase() === highlight.toLowerCase() ? (react_1.default.createElement("span", { key: index, className: "bg-yellow-200 font-medium" }, part)) : part;
+        });
+    };
+    var className = generateInputClasses({
+        status: status,
+        rounded: rounded,
+        bg: bg,
+        funcss: funcss,
+        flat: flat,
+        leftRounded: leftRounded,
+        rightRounded: rightRounded,
+        bordered: true,
+        borderless: false,
+        fullWidth: fullWidth,
+        additionalClasses: 'searchableInput'
+    });
+    var containerStyle = fullWidth ? { width: '100%' } : undefined;
+    var dropdownClasses = "absolute z-50 bg-white border border-gray-300 rounded-md shadow-lg ".concat(dropDirection === 'up' ? 'bottom-full mb-1' : 'top-full mt-1', " left-0 right-0");
+    return (react_1.default.createElement("div", { className: "searchableInput-wrapper relative", style: containerStyle },
+        label && (react_1.default.createElement("label", { htmlFor: id, className: "block text-sm font-medium text-gray-700 mb-1" }, label)),
+        react_1.default.createElement("div", { className: "relative" },
+            react_1.default.createElement("div", { className: "relative flex items-center" },
+                icon && (react_1.default.createElement("div", { className: "absolute left-3 pointer-events-none text-gray-400" }, icon)),
+                react_1.default.createElement("input", __assign({ ref: inputRef, id: id, name: name, type: "text", className: "".concat(className, " ").concat(icon ? 'pl-10' : '', " ").concat(clearable && inputValue ? 'pr-16' : 'pr-10'), placeholder: placeholder, value: inputValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: function () { return inputValue.length >= minChars && setIsOpen(true); }, disabled: disabled }, rest)),
+                react_1.default.createElement("div", { className: "absolute right-3 flex items-center space-x-1" },
+                    clearable && inputValue && !disabled && (react_1.default.createElement("button", { type: "button", onClick: handleClear, className: "text-gray-400 hover:text-gray-600 p-1", tabIndex: -1 },
+                        react_1.default.createElement(pi_1.PiX, { size: 16 }))),
+                    react_1.default.createElement("div", { className: "text-gray-400" }, loading ? (react_1.default.createElement("div", { className: "animate-spin w-4 h-4 border-2 border-gray-300 border-t-gray-600 rounded-full" })) : (react_1.default.createElement(pi_1.PiCaretDown, { size: 16, className: "transition-transform ".concat(isOpen ? 'rotate-180' : '') }))))),
+            isOpen && !disabled && (react_1.default.createElement("div", { ref: dropdownRef, className: dropdownClasses, style: { maxHeight: maxHeight } },
+                react_1.default.createElement("div", { className: "py-1 overflow-y-auto", style: { maxHeight: maxHeight } }, filteredOptions.length > 0 ? (filteredOptions.map(function (option, index) { return (react_1.default.createElement("div", { key: "".concat(option.value, "-").concat(index), ref: function (el) {
+                        optionRefs.current[index] = el;
+                    }, className: "px-3 py-2 cursor-pointer hover:bg-blue-50 ".concat(index === highlightedIndex ? 'bg-blue-100' : '', " ").concat((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value ? 'bg-blue-50' : ''), onClick: function () { return handleOptionSelect(option); } },
+                    react_1.default.createElement("div", { className: "text-sm text-gray-900" }, highlightText(option.text, inputValue)),
+                    option.value !== option.text && (react_1.default.createElement("div", { className: "text-xs text-gray-500" }, option.value)))); })) : (react_1.default.createElement("div", { className: "px-3 py-2 text-sm text-gray-500" }, noDataText)))))),
+        extra && react_1.default.createElement("div", { className: "searchableInput-extra mt-1" }, extra)));
+};
+exports.default = SearchableInput;

package/ui/select/Select.d.ts

@@ -22,6 +22,7 @@ interface CustomSelectProps {
     status?: 'success' | 'warning' | 'danger' | '';
     className?: string;
     funcss?: string;
+    label?: string;
     searchAutoFocus?: boolean;
     style?: React.CSSProperties;
 }

package/ui/select/Select.js

@@ -35,7 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 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 ? true : _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, _q = _a.searchAutoFocus, searchAutoFocus = _q === void 0 ? false : _q;
+    var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, _b = _a.label, label = _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 ? true : _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, _q = _a.searchAutoFocus, searchAutoFocus = _q === void 0 ? false : _q;
     var _r = (0, react_1.useState)(false), isOpen = _r[0], setIsOpen = _r[1];
     var _s = (0, react_1.useState)(null), selectedOption = _s[0], setSelectedOption = _s[1];
     var _t = (0, react_1.useState)(''), searchQuery = _t[0], setSearchQuery = _t[1];
@@ -179,7 +179,7 @@ var Select = function (_a) {
     };
     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("span", { className: "select-value ".concat(!selectedOption ? 'select-placeholder' : '') }, selectedOption ? selectedOption.text : label),
             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" })))),

package/ui/table/Table.js

@@ -111,7 +111,7 @@ function Table(_a) {
     var _o = (0, react_1.useState)(""), searchQuery = _o[0], setsearchQuery = _o[1];
     React.useEffect(function () {
         if (clearSearch) {
-            setsearchQuery('');
+            setsearchQuery("");
         }
     }, [clearSearch]);
     // Enhanced filter logic: