@klu_dev/ui-klu-green 1.2.17 → 1.2.18

package/dist/index.css

@@ -230,6 +230,10 @@ button,
 .uiklu-left-0{
     left: 0px;
 
+}
+.uiklu-left-2{
+    left: 0.5rem;
+
 }
 .uiklu-left-3{
     left: 0.75rem;
@@ -975,6 +979,10 @@ button,
 .uiklu-cursor-default{
     cursor: default;
 
+}
+.uiklu-cursor-not-allowed{
+    cursor: not-allowed;
+
 }
 .uiklu-cursor-pointer{
     cursor: pointer;
@@ -2485,6 +2493,18 @@ input.uiklu-flex:not(:placeholder-shown) {
 
 }
 
+.placeholder\:uiklu-text-gray800::-moz-placeholder{
+    --tw-text-opacity: 1;
+    color: hsl(var(--uiklu-gray-800) / var(--tw-text-opacity, 1));
+
+}
+
+.placeholder\:uiklu-text-gray800::placeholder{
+    --tw-text-opacity: 1;
+    color: hsl(var(--uiklu-gray-800) / var(--tw-text-opacity, 1));
+
+}
+
 .placeholder\:uiklu-text-white\/40::-moz-placeholder{
     color: rgb(255 255 255 / 0.4);
 
@@ -2540,6 +2560,12 @@ input.uiklu-flex:not(:placeholder-shown) {
 
 }
 
+.focus-within\:uiklu-bg-white:focus-within{
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+
+}
+
 .focus-within\:uiklu-shadow-\[0_0_0_3px_\#AFD8D8\]:focus-within{
     --tw-shadow: 0 0 0 3px #AFD8D8;
     --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);
@@ -2813,6 +2839,12 @@ input.uiklu-flex:not(:placeholder-shown) {
 
 }
 
+.data-\[placeholder\]\:uiklu-text-gray800[data-placeholder]{
+    --tw-text-opacity: 1;
+    color: hsl(var(--uiklu-gray-800) / var(--tw-text-opacity, 1));
+
+}
+
 @media (min-width: 640px){
     .sm\:uiklu-flex-row{
         flex-direction: row;

package/dist/index.d.ts

@@ -147,6 +147,7 @@ declare const Icons: {
     TICKET: react_jsx_runtime.JSX.Element;
     CASH: react_jsx_runtime.JSX.Element;
     CHEVRON_RIGHT: react_jsx_runtime.JSX.Element;
+    CHEVRON_DOWN: react_jsx_runtime.JSX.Element;
     SHIELD_CHECK: react_jsx_runtime.JSX.Element;
     CLOSE: react_jsx_runtime.JSX.Element;
     MONEY: react_jsx_runtime.JSX.Element;
@@ -205,13 +206,13 @@ declare const searchSelectTriggerVariants: (props?: ({
     size?: "sm" | "md" | "lg" | "full" | null | undefined;
     error?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface Option {
+interface Option$1 {
     value: string;
     label: string;
     extra?: React.ReactNode;
 }
 interface SearchSelectProps extends VariantProps<typeof searchSelectTriggerVariants> {
-    options: Option[];
+    options: Option$1[];
     value: string;
     onChange: (value: string) => void;
     placeholder?: string;
@@ -302,4 +303,42 @@ interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement
 }
 declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
 
-export { BackButton, BalanceInfo, Button, Checkbox, type CheckboxProps, DetailCard, type DetailCardItem, type DetailCardProps, GridCard, IconBadge, type IconBadgeProps, Icons, Input, InputCode, InputPhone, type InputPhoneProps, type LadaOption, LoadingScreen, MobileMenuDrawer, Modal, PromoBanner, SearchSelect, Select, SidebarTabs, TextField, type TextFieldProps, ToastAction, Toaster, Typography, useToast };
+type SelectFieldSize = "sm" | "md" | "lg" | "full";
+interface SelectFieldProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root> {
+    label: string;
+    placeholder?: string;
+    size?: SelectFieldSize;
+    error?: string;
+    required?: boolean;
+    disabled?: boolean;
+    className?: string;
+    labelClassName?: string;
+}
+declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectField: React.ForwardRefExoticComponent<SelectFieldProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+type SearchSelectFieldSize = "sm" | "md" | "lg" | "full";
+interface Option {
+    value: string;
+    label: string;
+    extra?: React.ReactNode;
+}
+interface SearchSelectFieldProps {
+    options: Option[];
+    value: string;
+    onChange: (value: string) => void;
+    label: string;
+    placeholder?: string;
+    size?: SearchSelectFieldSize;
+    error?: string;
+    required?: boolean;
+    disabled?: boolean;
+    className?: string;
+    labelClassName?: string;
+}
+declare const SearchSelectField: ({ options, value, onChange, label, placeholder, size, error, required, disabled, className, labelClassName, }: SearchSelectFieldProps) => react_jsx_runtime.JSX.Element;
+
+export { BackButton, BalanceInfo, Button, Checkbox, type CheckboxProps, DetailCard, type DetailCardItem, type DetailCardProps, GridCard, IconBadge, type IconBadgeProps, Icons, Input, InputCode, InputPhone, type InputPhoneProps, type LadaOption, LoadingScreen, MobileMenuDrawer, Modal, PromoBanner, SearchSelect, SearchSelectField, type SearchSelectFieldProps, Select, SelectContent, SelectField, type SelectFieldProps, SelectGroup, SelectItem, SelectValue, SidebarTabs, TextField, type TextFieldProps, ToastAction, Toaster, Typography, useToast };

package/dist/index.js

@@ -82,6 +82,24 @@ var ChevronRightIcon = ({ className }) => /* @__PURE__ */ jsx(
     )
   }
 );
+var ChevronDownIcon = ({ className }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    className,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M16.6923 7.94217L10.4423 14.1922C10.3842 14.2503 10.3153 14.2964 10.2394 14.3278C10.1636 14.3593 10.0822 14.3755 10.0001 14.3755C9.91797 14.3755 9.83664 14.3593 9.76077 14.3278C9.68489 14.2964 9.61596 14.2503 9.55792 14.1922L3.30792 7.94217C3.19064 7.82489 3.12476 7.66583 3.12476 7.49998C3.12476 7.33413 3.19064 7.17507 3.30792 7.05779C3.42519 6.94052 3.58425 6.87463 3.7501 6.87463C3.91596 6.87463 4.07502 6.94052 4.19229 7.05779L10.0001 12.8664L15.8079 7.05779C15.866 6.99972 15.9349 6.95366 16.0108 6.92224C16.0867 6.89081 16.168 6.87463 16.2501 6.87463C16.3322 6.87463 16.4135 6.89081 16.4894 6.92224C16.5653 6.95366 16.6342 6.99972 16.6923 7.05779C16.7504 7.11586 16.7964 7.1848 16.8278 7.26067C16.8593 7.33654 16.8755 7.41786 16.8755 7.49998C16.8755 7.5821 16.8593 7.66342 16.8278 7.73929C16.7964 7.81516 16.7504 7.8841 16.6923 7.94217Z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
 var ShieldCheckIcon = ({ className }) => /* @__PURE__ */ jsx("div", { className: "uiklu-bg-primary300 uiklu-w-8 uiklu-h-8 uiklu-rounded-full uiklu-flex uiklu-items-center uiklu-justify-center uiklu-shrink-0", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className, children: /* @__PURE__ */ jsx(
   "path",
   {
@@ -943,6 +961,7 @@ var Icons = {
   TICKET: /* @__PURE__ */ jsx(TicketIcon, {}),
   CASH: /* @__PURE__ */ jsx(CashIcon, {}),
   CHEVRON_RIGHT: /* @__PURE__ */ jsx(ChevronRightIcon, {}),
+  CHEVRON_DOWN: /* @__PURE__ */ jsx(ChevronDownIcon, {}),
   SHIELD_CHECK: /* @__PURE__ */ jsx(ShieldCheckIcon, {}),
   CLOSE: /* @__PURE__ */ jsx(CloseIcon, {}),
   MONEY: /* @__PURE__ */ jsx(MoneyIcon, {}),
@@ -1325,7 +1344,10 @@ var SelectContent = React4.forwardRef(({ className, children, position = "popper
   {
     ref,
     className: cn(
-      "uiklu-relative uiklu-z-50 uiklu-max-h-96 uiklu-w-[var(--radix-select-trigger-width)] uiklu-min-w-[var(--radix-select-trigger-width)] uiklu-overflow-hidden uiklu-rounded-[20px] uiklu-border-[1px] uiklu-border-border uiklu-bg-background uiklu-text-inputtext uiklu-font-sans uiklu-shadow-md",
+      "uiklu-relative uiklu-z-50 uiklu-max-h-96 uiklu-w-[var(--radix-select-trigger-width)]",
+      "uiklu-min-w-[var(--radix-select-trigger-width)] uiklu-overflow-hidden uiklu-rounded-[20px]",
+      "uiklu-border-[1px] uiklu-border-border uiklu-bg-background uiklu-text-inputtext",
+      "uiklu-font-sans uiklu-shadow-md",
       position === "popper" && "uiklu-translate-y-1",
       className
     ),
@@ -2077,8 +2099,8 @@ function SidebarNav({
   };
   return /* @__PURE__ */ jsx16("nav", { className: "uiklu-flex uiklu-flex-col uiklu-gap-1 uiklu-w-full", children: items.map((item) => {
     const isActive = activeTab === item.id;
-    const Icon2 = item.icon;
-    const isReactElement = React9.isValidElement(Icon2);
+    const Icon3 = item.icon;
+    const isReactElement = React9.isValidElement(Icon3);
     return /* @__PURE__ */ jsxs13(React9.Fragment, { children: [
       /* @__PURE__ */ jsxs13(
         "button",
@@ -2097,7 +2119,7 @@ function SidebarNav({
               "uiklu-items-center uiklu-justify-center",
               "uiklu-transition-colors uiklu-duration-200",
               isActive ? "uiklu-text-primary600" : "uiklu-text-primary300"
-            ), children: isReactElement ? React9.cloneElement(Icon2, { className: "uiklu-h-full uiklu-w-full" }) : /* @__PURE__ */ jsx16(Icon2, { className: "uiklu-h-full uiklu-w-full" }) }),
+            ), children: isReactElement ? React9.cloneElement(Icon3, { className: "uiklu-h-full uiklu-w-full" }) : /* @__PURE__ */ jsx16(Icon3, { className: "uiklu-h-full uiklu-w-full" }) }),
             /* @__PURE__ */ jsx16(
               "span",
               {
@@ -2961,7 +2983,8 @@ var TextField = React16.forwardRef(
               "uiklu-px-[10px] uiklu-py-[4px] uiklu-appearance-none uiklu-outline-none uiklu-transition-all",
               "uiklu-rounded-[8px] uiklu-border-[1px] uiklu-border-solid",
               "uiklu-overflow-hidden uiklu-text-ellipsis",
-              "uiklu-bg-gray50 uiklu-text-gray800 placeholder:uiklu-text-gray500 placeholder:uiklu-font-semibold",
+              "uiklu-bg-gray50 uiklu-text-gray800 placeholder:uiklu-text-gray500 uiklu-font-semibold",
+              "placeholder:uiklu-font-semibold",
               "disabled:uiklu-cursor-not-allowed disabled:uiklu-opacity-50",
               !error ? [
                 "uiklu-border-gray100",
@@ -3025,6 +3048,343 @@ var TextField = React16.forwardRef(
   }
 );
 TextField.displayName = "TextField";
+
+// src/components/ui/selectField/selectField.tsx
+import * as React17 from "react";
+import * as SelectPrimitive2 from "@radix-ui/react-select";
+import { Check as Check4 } from "lucide-react";
+import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
+var inputSizes3 = {
+  sm: "uiklu-w-[150px] uiklu-text-[10px]",
+  md: "uiklu-w-[250px] uiklu-text-[12px]",
+  lg: "uiklu-w-[350px] uiklu-text-[14px]",
+  full: "uiklu-w-full uiklu-text-[14px]"
+};
+var containerSizes3 = {
+  sm: "uiklu-w-[150px]",
+  md: "uiklu-w-[250px]",
+  lg: "uiklu-w-[350px]",
+  full: "uiklu-w-full"
+};
+var labelStyles2 = {
+  sm: "uiklu-text-[12px] uiklu-mb-[5px]",
+  md: "uiklu-text-[13px] uiklu-mb-[7px]",
+  lg: "uiklu-text-[14px] uiklu-mb-[10px]",
+  full: "uiklu-text-[14px] uiklu-mb-[10px]"
+};
+var errorSizes4 = {
+  sm: "uiklu-text-sm",
+  md: "uiklu-text-md",
+  lg: "uiklu-text-lg",
+  full: "uiklu-text-lg"
+};
+var Select2 = SelectPrimitive2.Root;
+var SelectValue = SelectPrimitive2.Value;
+var SelectGroup = SelectPrimitive2.Group;
+var SelectField = React17.forwardRef(({ className, size = "full", label, error, required, disabled, placeholder, children, labelClassName, ...props }, ref) => {
+  return /* @__PURE__ */ jsxs23("div", { className: cn(
+    "uiklu-flex uiklu-flex-col uiklu-font-sans",
+    containerSizes3[size]
+  ), children: [
+    /* @__PURE__ */ jsxs23(
+      "label",
+      {
+        className: cn(
+          "uiklu-label uiklu-font-sans uiklu-transition-colors uiklu-text-left",
+          "uiklu-font-normal",
+          labelStyles2[size],
+          !error ? "uiklu-text-gray600" : "uiklu-text-destructive",
+          labelClassName
+        ),
+        children: [
+          label,
+          required && /* @__PURE__ */ jsx27("span", { className: "uiklu-ml-0.5", children: "*" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx27("div", { className: cn("uiklu-relative", containerSizes3[size]), children: /* @__PURE__ */ jsxs23(Select2, { disabled, ...props, children: [
+      /* @__PURE__ */ jsxs23(
+        SelectPrimitive2.Trigger,
+        {
+          ref,
+          className: cn(
+            "uiklu-font-sans uiklu-flex uiklu-box-border uiklu-h-[36px] uiklu-w-full",
+            "uiklu-items-center uiklu-justify-between uiklu-gap-2",
+            "uiklu-px-[10px] uiklu-py-[4px] uiklu-appearance-none uiklu-outline-none uiklu-transition-all",
+            "uiklu-rounded-[8px] uiklu-border-[1px] uiklu-border-solid uiklu-leading-normal",
+            "uiklu-bg-basewhite uiklu-text-gray800 data-[placeholder]:uiklu-text-gray800",
+            "uiklu-font-semibold",
+            "disabled:uiklu-cursor-not-allowed disabled:uiklu-opacity-50",
+            !error ? [
+              "uiklu-border-gray100",
+              "focus:uiklu-border-primary900 focus:uiklu-bg-white",
+              "focus:uiklu-shadow-[0_0_0_3px_#AFD8D8]"
+            ] : [
+              "uiklu-border-destructive uiklu-bg-white !uiklu-text-destructive",
+              "focus:uiklu-border-destructive",
+              "focus:uiklu-shadow-[0_0_0_3px_rgba(220,38,38,0.20)]"
+            ],
+            inputSizes3[size],
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsx27("span", { className: "uiklu-truncate", children: /* @__PURE__ */ jsx27(SelectValue, { placeholder }) }),
+            /* @__PURE__ */ jsx27(SelectPrimitive2.Icon, { asChild: true, children: /* @__PURE__ */ jsx27("div", { className: cn(
+              "uiklu-flex uiklu-items-center uiklu-justify-center uiklu-h-4",
+              "uiklu-w-4 uiklu-shrink-0 ",
+              error ? "uiklu-text-destructive" : "uiklu-text-primary500"
+            ), children: Icons.CHEVRON_DOWN }) })
+          ]
+        }
+      ),
+      children
+    ] }) }),
+    /* @__PURE__ */ jsx27("div", { className: cn("uiklu-min-h-[20px] uiklu-mb-[10px] uiklu-flex uiklu-items-center", errorSizes4[size]), children: error && /* @__PURE__ */ jsx27("p", { className: "uiklu-error-message uiklu-leading-tight uiklu-text-destructive uiklu-font-sans uiklu-m-0", children: error }) })
+  ] });
+});
+SelectField.displayName = "SelectField";
+var SelectContent2 = React17.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx27(SelectPrimitive2.Portal, { children: /* @__PURE__ */ jsx27(
+  SelectPrimitive2.Content,
+  {
+    ref,
+    className: cn(
+      "uiklu-relative uiklu-z-50 uiklu-max-h-96 uiklu-w-[var(--radix-select-trigger-width)] uiklu-min-w-[var(--radix-select-trigger-width)] uiklu-overflow-hidden uiklu-rounded-[8px] uiklu-border-[1px] uiklu-border-gray100 uiklu-bg-white uiklu-text-gray800 uiklu-font-sans uiklu-shadow-md",
+      position === "popper" && "uiklu-translate-y-1",
+      className
+    ),
+    position,
+    ...props,
+    children: /* @__PURE__ */ jsx27(SelectPrimitive2.Viewport, { className: "uiklu-p-1", children })
+  }
+) }));
+SelectContent2.displayName = SelectPrimitive2.Content.displayName;
+var SelectItem2 = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs23(
+  SelectPrimitive2.Item,
+  {
+    ref,
+    className: cn(
+      "uiklu-relative uiklu-flex uiklu-w-full uiklu-cursor-pointer uiklu-select-none uiklu-items-center uiklu-py-2.5 uiklu-pl-10 uiklu-pr-4 uiklu-text-md uiklu-font-sans uiklu-outline-none focus:uiklu-bg-primary/10 focus:uiklu-text-primary",
+      "uiklu-rounded-none",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx27("span", { className: "uiklu-absolute uiklu-left-2 uiklu-flex uiklu-h-3.5 uiklu-w-3.5 uiklu-items-center uiklu-justify-center", children: /* @__PURE__ */ jsx27(SelectPrimitive2.ItemIndicator, { children: /* @__PURE__ */ jsx27(Check4, { className: "uiklu-h-4 uiklu-w-4 uiklu-text-primary900" }) }) }),
+      /* @__PURE__ */ jsx27(SelectPrimitive2.ItemText, { children })
+    ]
+  }
+));
+SelectItem2.displayName = SelectPrimitive2.Item.displayName;
+
+// src/components/ui/searchSelectField/searchSelectField.tsx
+import * as React18 from "react";
+import * as PopoverPrimitive2 from "@radix-ui/react-popover";
+import { Check as Check5, X as X3 } from "lucide-react";
+import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
+var inputSizes4 = {
+  sm: "uiklu-w-[150px] uiklu-text-[10px]",
+  md: "uiklu-w-[250px] uiklu-text-[12px]",
+  lg: "uiklu-w-[350px] uiklu-text-[14px]",
+  full: "uiklu-w-full uiklu-text-[14px]"
+};
+var containerSizes4 = {
+  sm: "uiklu-w-[150px]",
+  md: "uiklu-w-[250px]",
+  lg: "uiklu-w-[350px]",
+  full: "uiklu-w-full"
+};
+var labelStyles3 = {
+  sm: "uiklu-text-[12px] uiklu-mb-[5px]",
+  md: "uiklu-text-[13px] uiklu-mb-[7px]",
+  lg: "uiklu-text-[14px] uiklu-mb-[10px]",
+  full: "uiklu-text-[14px] uiklu-mb-[10px]"
+};
+var errorSizes5 = {
+  sm: "uiklu-text-sm",
+  md: "uiklu-text-md",
+  lg: "uiklu-text-lg",
+  full: "uiklu-text-lg"
+};
+var SearchSelectField = ({
+  options,
+  value,
+  onChange,
+  label,
+  placeholder = "Buscar...",
+  size = "full",
+  error,
+  required = false,
+  disabled = false,
+  className,
+  labelClassName
+}) => {
+  const [open, setOpen] = React18.useState(false);
+  const [search, setSearch] = React18.useState("");
+  const containerRef = React18.useRef(null);
+  const inputRef = React18.useRef(null);
+  const selectedOption = options.find((opt) => opt.value === value);
+  React18.useEffect(() => {
+    if (selectedOption) {
+      setSearch(selectedOption.label);
+    } else {
+      setSearch("");
+    }
+  }, [selectedOption]);
+  const filteredOptions = options.filter(
+    (option) => option.label.toLowerCase().includes(search.toLowerCase())
+  );
+  const handleClear = (e) => {
+    e.stopPropagation();
+    onChange("");
+    setSearch("");
+    setOpen(true);
+    inputRef.current?.focus();
+  };
+  return /* @__PURE__ */ jsxs24("div", { className: cn(
+    "uiklu-flex uiklu-flex-col uiklu-font-sans",
+    containerSizes4[size]
+  ), children: [
+    /* @__PURE__ */ jsxs24(
+      "label",
+      {
+        className: cn(
+          "uiklu-label uiklu-font-sans uiklu-transition-colors uiklu-text-left",
+          "uiklu-font-normal",
+          labelStyles3[size],
+          !error ? "uiklu-text-gray600" : "uiklu-text-destructive",
+          labelClassName
+        ),
+        children: [
+          label,
+          required && /* @__PURE__ */ jsx28("span", { className: "uiklu-ml-0.5", children: "*" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs24(PopoverPrimitive2.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx28(PopoverPrimitive2.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs24(
+        "div",
+        {
+          ref: containerRef,
+          className: cn(
+            "uiklu-font-sans uiklu-flex uiklu-box-border uiklu-h-[36px] uiklu-w-full",
+            "uiklu-items-center uiklu-justify-between uiklu-gap-2",
+            "uiklu-px-[10px] uiklu-py-[4px] uiklu-transition-all",
+            "uiklu-rounded-[8px] uiklu-border-[1px] uiklu-border-solid uiklu-cursor-text uiklu-relative",
+            "uiklu-bg-basewhite uiklu-text-gray800",
+            disabled && "uiklu-opacity-50 uiklu-pointer-events-none",
+            !error ? [
+              "uiklu-border-gray100",
+              "focus-within:uiklu-border-primary900 focus-within:uiklu-bg-white",
+              "focus-within:uiklu-shadow-[0_0_0_3px_#AFD8D8]"
+            ] : [
+              "uiklu-border-destructive focus-within:uiklu-border-destructive uiklu-bg-white",
+              "focus-within:uiklu-shadow-[0_0_0_3px_rgba(220,38,38,0.20)]"
+            ],
+            inputSizes4[size],
+            className
+          ),
+          onClick: () => {
+            inputRef.current?.focus();
+            setOpen(true);
+          },
+          children: [
+            /* @__PURE__ */ jsx28(
+              "input",
+              {
+                ref: inputRef,
+                type: "text",
+                className: cn(
+                  "uiklu-w-full uiklu-bg-transparent uiklu-outline-none uiklu-border-none uiklu-p-0",
+                  "uiklu-font-sans uiklu-text-gray800 uiklu-leading-normal uiklu-font-semibold",
+                  disabled && "uiklu-cursor-not-allowed",
+                  !error ? "placeholder:uiklu-text-gray800" : "uiklu-text-destructive placeholder:!uiklu-text-destructive"
+                ),
+                placeholder,
+                value: search,
+                disabled,
+                onFocus: () => setOpen(true),
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setOpen(true);
+                },
+                onChange: (e) => {
+                  setSearch(e.target.value);
+                  if (!open) setOpen(true);
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxs24("div", { className: "uiklu-flex uiklu-items-center uiklu-ml-2 uiklu-shrink-0", children: [
+              search && /* @__PURE__ */ jsx28(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleClear,
+                  className: "uiklu-mr-1 uiklu-opacity-50 hover:uiklu-opacity-100 uiklu-transition-opacity\n                    uiklu-bg-transparent uiklu-border-none uiklu-outline-none uiklu-p-0 \n                    uiklu-cursor-pointer uiklu-flex uiklu-items-center uiklu-justify-center",
+                  children: /* @__PURE__ */ jsx28(X3, { className: "uiklu-h-4 uiklu-w-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx28(
+                "div",
+                {
+                  className: cn(
+                    "uiklu-flex uiklu-items-center uiklu-justify-center uiklu-h-4 uiklu-w-4 uiklu-shrink-0 uiklu-cursor-pointer",
+                    error ? "uiklu-text-destructive" : "uiklu-text-primary500"
+                  ),
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setOpen((prev) => !prev);
+                  },
+                  children: Icons.CHEVRON_DOWN
+                }
+              )
+            ] })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx28(PopoverPrimitive2.Portal, { children: /* @__PURE__ */ jsx28(
+        PopoverPrimitive2.Content,
+        {
+          className: cn(
+            "uiklu-relative uiklu-z-50 uiklu-overflow-hidden uiklu-rounded-[8px] uiklu-border-[1px] uiklu-border-gray100 uiklu-bg-white uiklu-text-gray800 uiklu-font-sans uiklu-shadow-md uiklu-translate-y-1"
+          ),
+          style: {
+            width: containerRef.current ? containerRef.current.offsetWidth : "var(--radix-popover-trigger-width)"
+          },
+          align: "start",
+          sideOffset: 4,
+          onOpenAutoFocus: (e) => e.preventDefault(),
+          children: /* @__PURE__ */ jsx28("div", { className: "uiklu-py-1 uiklu-px-0 uiklu-max-h-96 uiklu-overflow-y-auto uiklu-overflow-x-hidden uiklu-w-full uiklu-box-border", children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx28("div", { className: "uiklu-py-3 uiklu-px-4 uiklu-text-sm uiklu-text-center uiklu-opacity-50 uiklu-font-sans", children: "No se encontraron resultados" }) : filteredOptions.map((option) => {
+            const isSelected = value === option.value;
+            return /* @__PURE__ */ jsxs24(
+              "div",
+              {
+                onClick: () => {
+                  onChange(option.value);
+                  setSearch(option.label);
+                  setOpen(false);
+                },
+                className: cn(
+                  "uiklu-relative uiklu-flex uiklu-w-full uiklu-box-border uiklu-cursor-pointer uiklu-select-none uiklu-items-center uiklu-py-2.5 uiklu-pl-10 uiklu-pr-4 uiklu-text-md uiklu-font-sans uiklu-outline-none uiklu-rounded-none focus:uiklu-bg-primary/10 focus:uiklu-text-primary hover:uiklu-bg-primary/10 hover:uiklu-text-primary uiklu-transition-colors",
+                  isSelected && "uiklu-bg-primary/5 uiklu-text-primary900 uiklu-font-medium"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx28("span", { className: "uiklu-absolute uiklu-left-2 uiklu-flex uiklu-h-3.5 uiklu-w-3.5 uiklu-items-center uiklu-justify-center", children: /* @__PURE__ */ jsx28(Check5, { className: cn(
+                    "uiklu-h-4 uiklu-w-4 uiklu-transition-opacity",
+                    isSelected ? "uiklu-opacity-100 uiklu-text-primary900" : "uiklu-opacity-0"
+                  ) }) }),
+                  /* @__PURE__ */ jsx28("span", { className: "uiklu-flex-1 uiklu-truncate uiklu-min-w-0 uiklu-inline-flex uiklu-items-center uiklu-h-full uiklu-leading-normal", children: option.label }),
+                  option.extra && /* @__PURE__ */ jsx28("span", { className: "uiklu-ml-2 uiklu-shrink-0 uiklu-flex uiklu-items-center", children: option.extra })
+                ]
+              },
+              option.value
+            );
+          }) })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx28("div", { className: cn("uiklu-min-h-[20px] uiklu-mb-[10px] uiklu-flex uiklu-items-center", errorSizes5[size]), children: error && /* @__PURE__ */ jsx28("p", { className: "uiklu-error-message uiklu-leading-tight uiklu-text-destructive uiklu-font-sans uiklu-m-0", children: error }) })
+  ] });
+};
 export {
   BackButton,
   BalanceInfo,
@@ -3042,7 +3402,13 @@ export {
   Modal,
   PromoBanner,
   SearchSelect,
+  SearchSelectField,
   Select,
+  SelectContent2 as SelectContent,
+  SelectField,
+  SelectGroup,
+  SelectItem2 as SelectItem,
+  SelectValue,
   SidebarTabs,
   TextField,
   ToastAction,