@adamosuiteservices/ui 2.15.0 → 2.16.0

package/dist/file-upload.cjs

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./jsx-runtime-BB_1_6y_.cjs"),z=require("./button-DVrteFz9.cjs"),k=require("./icon-DPMQJBkA.cjs"),v=require("./typography-Bj8oEDuE.cjs"),h=require("./index-DoxiiusW.cjs"),D=require("react");function K({isDragging:a,isMultiple:o,invalid:r,disabled:t,accept:d,acceptedExtensions:l,maxSizeInMB:c,maxFiles:u,labels:x,onDragOver:N,onDragLeave:R,onDrop:C,onFileChange:w}){return e.jsxRuntimeExports.jsxs("div",{onDragOver:t?void 0:N,onDragLeave:t?void 0:R,onDrop:t?void 0:C,className:h.cn(`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./jsx-runtime-BB_1_6y_.cjs"),I=require("./button-DVrteFz9.cjs"),z=require("./icon-DPMQJBkA.cjs"),R=require("./typography-Bj8oEDuE.cjs"),g=require("./index-DoxiiusW.cjs"),N=require("react");function Q({isDragging:a,isMultiple:i,invalid:s,disabled:t,accept:m,acceptedExtensions:l,maxSizeInMB:c,maxFiles:f,labels:u,input:y,onDragOver:b,onDragLeave:$,onDrop:w,onFileChange:C}){const p=y?.id||`file-upload-${Math.random().toString(36).substring(2,11)}`;return e.jsxRuntimeExports.jsxs("div",{onDragOver:t?void 0:b,onDragLeave:t?void 0:$,onDrop:t?void 0:w,className:g.cn(`
           adm:flex adm:flex-col adm:items-center adm:gap-6 adm:rounded-2xl
           adm:border-2
-        `,"adm:border-dashed adm:bg-background adm:p-6 adm:transition-colors",{"adm:border-primary":a&&!r&&!t,"adm:border-destructive":r&&!t,"adm:border-input":!a&&!r,"adm:cursor-not-allowed adm:opacity-50":t}),children:[e.jsxRuntimeExports.jsx("div",{className:h.cn("adm:flex adm:items-center adm:justify-center adm:rounded-xl adm:p-2.5",r&&!t?"adm:bg-destructive/10":"adm:bg-primary-50"),children:e.jsxRuntimeExports.jsx(k.Icon,{symbol:"text_snippet",className:r&&!t?"adm:text-destructive":"adm:text-primary"})}),e.jsxRuntimeExports.jsxs("div",{className:"adm:flex adm:flex-col adm:items-center adm:gap-2",children:[e.jsxRuntimeExports.jsx(v.Typography,{color:r&&!t?"destructive":void 0,children:x?.dragDrop||(o?"Drag and drop your files here or":"Drag and drop your file here or")}),e.jsxRuntimeExports.jsxs("label",{htmlFor:"file-upload",children:[e.jsxRuntimeExports.jsx("input",{id:"file-upload",type:"file",accept:d,multiple:o,onChange:w,disabled:t,className:"adm:hidden"}),e.jsxRuntimeExports.jsx(z.Button,{asChild:!0,type:"button",variant:"link",className:h.cn("adm:cursor-pointer",t&&`
+        `,"adm:border-dashed adm:bg-background adm:p-6 adm:transition-colors",{"adm:border-primary":a&&!s&&!t,"adm:border-destructive":s&&!t,"adm:border-input":!a&&!s,"adm:cursor-not-allowed adm:opacity-50":t}),children:[e.jsxRuntimeExports.jsx("div",{className:g.cn("adm:flex adm:items-center adm:justify-center adm:rounded-xl adm:p-2.5",s&&!t?"adm:bg-destructive/10":"adm:bg-primary-50"),children:e.jsxRuntimeExports.jsx(z.Icon,{symbol:"text_snippet",className:s&&!t?"adm:text-destructive":"adm:text-primary"})}),e.jsxRuntimeExports.jsxs("div",{className:"adm:flex adm:flex-col adm:items-center adm:gap-2",children:[e.jsxRuntimeExports.jsx(R.Typography,{color:s&&!t?"destructive":void 0,children:u?.dragDrop||(i?"Drag and drop your files here or":"Drag and drop your file here or")}),e.jsxRuntimeExports.jsxs("label",{htmlFor:p,children:[e.jsxRuntimeExports.jsx("input",{...y,id:p,type:"file",accept:m,multiple:i,onChange:C,disabled:t,className:"adm:hidden"}),e.jsxRuntimeExports.jsx(I.Button,{asChild:!0,type:"button",variant:"link",className:g.cn("adm:cursor-pointer",t&&`
               adm:pointer-events-none
-            `),disabled:t,children:e.jsxRuntimeExports.jsx("span",{children:x?.selectFile||(o?"Select files":"Select the file")})})]})]}),e.jsxRuntimeExports.jsx(v.Typography,{className:"adm:text-center",color:r&&!t?"destructive":"muted",children:x?.fileRequirements||`Allowed files: ${l.join(", ")}. Maximum size ${c} MB${o?`. Up to ${u} files`:""}.`})]})}function P({file:a,invalid:o,onRemove:r}){return e.jsxRuntimeExports.jsxs("div",{className:h.cn("adm:flex adm:items-center adm:gap-4 adm:rounded-2xl adm:border adm:p-6",o?"adm:border-destructive adm:bg-destructive/5":"adm:border-input adm:bg-muted"),children:[e.jsxRuntimeExports.jsx("div",{className:h.cn("adm:flex adm:items-center adm:justify-center adm:rounded-xl adm:p-2.5",o?"adm:bg-destructive/10":"adm:bg-primary-50"),children:e.jsxRuntimeExports.jsx(k.Icon,{symbol:"text_snippet",className:o?"adm:text-destructive":"adm:text-primary"})}),e.jsxRuntimeExports.jsxs("div",{className:`
+            `),disabled:t,children:e.jsxRuntimeExports.jsx("span",{children:u?.selectFile||(i?"Select files":"Select the file")})})]})]}),e.jsxRuntimeExports.jsx(R.Typography,{className:"adm:text-center",color:s&&!t?"destructive":"muted",children:u?.fileRequirements||(l&&l.length>0?`Allowed files: ${l.join(", ")}. Maximum size ${c} MB${i?`. Up to ${f} files`:""}.`:`Maximum size ${c} MB${i?`. Up to ${f} files`:""}.`)})]})}function W({file:a,invalid:i,disabled:s,onRemove:t}){return e.jsxRuntimeExports.jsxs("div",{className:g.cn("adm:flex adm:items-center adm:gap-4 adm:rounded-2xl adm:border adm:p-6",i&&!s?"adm:border-destructive adm:bg-destructive/5":"adm:border-input adm:bg-muted",s&&"adm:cursor-not-allowed adm:opacity-50"),children:[e.jsxRuntimeExports.jsx("div",{className:g.cn("adm:flex adm:items-center adm:justify-center adm:rounded-xl adm:p-2.5",i&&!s?"adm:bg-destructive/10":"adm:bg-primary-50"),children:e.jsxRuntimeExports.jsx(z.Icon,{symbol:"text_snippet",className:i&&!s?"adm:text-destructive":"adm:text-primary"})}),e.jsxRuntimeExports.jsxs("div",{className:`
         adm:flex adm:min-w-0 adm:flex-1 adm:items-start adm:gap-3
-      `,children:[e.jsxRuntimeExports.jsx("div",{className:"adm:min-w-0 adm:flex-1",children:e.jsxRuntimeExports.jsx(v.Typography,{className:"adm:truncate adm:font-semibold",children:a.name})}),e.jsxRuntimeExports.jsxs(v.Typography,{className:"adm:shrink-0",color:"muted",children:[(a.size/1024/1024).toFixed(1)," MB"]})]}),e.jsxRuntimeExports.jsx(z.Button,{variant:"destructive-medium",onClick:r,type:"button",children:e.jsxRuntimeExports.jsx(k.Icon,{symbol:"delete",className:"adm:text-destructive"})})]})}function q({files:a,isMultiple:o,invalid:r,labels:t,onRemoveFile:d,onClearAll:l}){return a.length===0?null:e.jsxRuntimeExports.jsxs("div",{className:"adm:flex adm:flex-col adm:gap-3",children:[o&&a.length>1&&e.jsxRuntimeExports.jsxs("div",{className:"adm:flex adm:items-center adm:justify-between",children:[e.jsxRuntimeExports.jsx(v.Typography,{className:"adm:text-sm adm:font-medium",color:r?"destructive":void 0,children:t?.filesSelected?.(a.length)||`${a.length} file${a.length!==1?"s":""} selected`}),e.jsxRuntimeExports.jsx(z.Button,{variant:"ghost",size:"sm",onClick:l,type:"button",children:"Clear all"})]}),a.map((c,u)=>e.jsxRuntimeExports.jsx(P,{file:c,invalid:r,onRemove:()=>d(u)},`${c.name}-${u}`))]})}function Q({className:a,selectedFile:o,selectedFiles:r,onFileSelect:t,onFilesSelect:d,onInvalidFile:l,acceptedExtensions:c=[".xls",".xlsx",".numbers"],maxSizeInMB:u=50,maxFiles:x=10,multiple:N=!1,filesPosition:R="below",invalid:C=!1,disabled:w=!1,"aria-invalid":I,labels:y,...O}){const[B,A]=D.useState(!1),[L,U]=D.useState(!1),g=D.useRef(null);D.useEffect(()=>{const s=()=>{if(g.current){const i=g.current.closest("fieldset");U(i?.disabled??!1)}};s();const n=new MutationObserver(s);if(g.current){const i=g.current.closest("fieldset");i&&n.observe(i,{attributes:!0,attributeFilter:["disabled"]})}return()=>n.disconnect()},[]);const V=c.join(","),_=u*1024*1024,m=N||r!==void 0||d!==void 0,f=m?r||[]:o?[o]:[],E=C||I,p=w||L,M=s=>{p||(s.preventDefault(),A(!0))},G=s=>{p||(s.preventDefault(),A(!1))},H=s=>{if(!p)if(s.preventDefault(),A(!1),m){const i=Array.from(s.dataTransfer.files).filter(b);if(i.length>0){const $=[...r||[],...i].slice(0,x);d&&d($)}}else{const n=s.dataTransfer.files[0];n&&b(n)&&t&&t(n)}},J=s=>{if(!p){if(m){const i=(s.target.files?Array.from(s.target.files):[]).filter(b);if(i.length>0){const $=[...r||[],...i].slice(0,x);d&&d($)}}else{const n=s.target.files?.[0];n&&b(n)&&t&&t(n)}s.target.value=""}},F=s=>{if(!p)if(m){const n=f.filter((i,j)=>j!==s);d&&d(n)}else t&&t(null)},b=s=>{const n=s.name.substring(s.name.lastIndexOf(".")),i=c.includes(n.toLowerCase()),j=s.size<=_;return!i&&l?l(s,"extension"):!j&&l&&l(s,"size"),i&&j},T=()=>{p||(m?d&&d([]):t&&t(null))};return e.jsxRuntimeExports.jsxs("div",{ref:g,className:h.cn("adm:flex adm:flex-col adm:gap-4",a),...O,children:[m&&R==="above"&&e.jsxRuntimeExports.jsx(q,{files:f,isMultiple:m,invalid:E,labels:y,onRemoveFile:F,onClearAll:T}),(m||f.length===0)&&e.jsxRuntimeExports.jsx(K,{isDragging:B,isMultiple:m,invalid:E,disabled:p,accept:V,acceptedExtensions:c,maxSizeInMB:u,maxFiles:x,labels:y,onDragOver:M,onDragLeave:G,onDrop:H,onFileChange:J}),!m&&f.length>0&&e.jsxRuntimeExports.jsx(q,{files:f,isMultiple:m,invalid:E,labels:y,onRemoveFile:F,onClearAll:T}),m&&R==="below"&&e.jsxRuntimeExports.jsx(q,{files:f,isMultiple:m,invalid:E,labels:y,onRemoveFile:F,onClearAll:T})]})}exports.FileUpload=Q;
+      `,children:[e.jsxRuntimeExports.jsx("div",{className:"adm:min-w-0 adm:flex-1",children:e.jsxRuntimeExports.jsx(R.Typography,{className:"adm:truncate adm:font-semibold",children:a.name})}),e.jsxRuntimeExports.jsxs(R.Typography,{className:"adm:shrink-0",color:"muted",children:[(a.size/1024/1024).toFixed(1)," MB"]})]}),e.jsxRuntimeExports.jsx(I.Button,{variant:"destructive-medium",onClick:t,type:"button",disabled:s,children:e.jsxRuntimeExports.jsx(z.Icon,{symbol:"delete",className:"adm:text-destructive"})})]})}function k({files:a,isMultiple:i,invalid:s,disabled:t,labels:m,onRemoveFile:l,onClearAll:c}){return a.length===0?null:e.jsxRuntimeExports.jsxs("div",{className:"adm:flex adm:flex-col adm:gap-3",children:[i&&a.length>1&&e.jsxRuntimeExports.jsxs("div",{className:"adm:flex adm:items-center adm:justify-between",children:[e.jsxRuntimeExports.jsx(R.Typography,{className:"adm:text-sm adm:font-medium",color:s&&!t?"destructive":void 0,children:m?.filesSelected?.(a.length)||`${a.length} file${a.length!==1?"s":""} selected`}),e.jsxRuntimeExports.jsx(I.Button,{variant:"ghost",size:"sm",onClick:c,type:"button",disabled:t,children:"Clear all"})]}),a.map((f,u)=>e.jsxRuntimeExports.jsx(W,{file:f,invalid:s,disabled:t,onRemove:()=>l(u)},`${f.name}-${u}`))]})}function X({className:a,selectedFile:i,selectedFiles:s,onFileSelect:t,onFilesSelect:m,onInvalidFile:l,acceptedExtensions:c,maxSizeInMB:f=50,maxFiles:u=10,multiple:y=!1,filesPosition:b="below",invalid:$=!1,disabled:w=!1,"aria-invalid":C,labels:p,input:O,...B}){const[L,A]=N.useState(!1),[U,M]=N.useState(!1),v=N.useRef(null);N.useEffect(()=>{const r=()=>{if(v.current){const o=v.current.closest("fieldset");M(o?.disabled??!1)}};r();const n=new MutationObserver(r);if(v.current){const o=v.current.closest("fieldset");o&&n.observe(o,{attributes:!0,attributeFilter:["disabled"]})}return()=>n.disconnect()},[]);const V=c?.join(",")||"",_=f*1024*1024,d=y||s!==void 0||m!==void 0,j=d?s||[]:i?[i]:[],E=$||C,x=w||U,G=r=>{x||(r.preventDefault(),A(!0))},H=r=>{x||(r.preventDefault(),A(!1))},J=r=>{if(!x)if(r.preventDefault(),A(!1),d){const o=Array.from(r.dataTransfer.files).filter(D);if(o.length>0){const F=[...s||[],...o].slice(0,u);m&&m(F)}}else{const n=r.dataTransfer.files[0];n&&D(n)&&t&&t(n)}},K=r=>{if(!x){if(d){const o=(r.target.files?Array.from(r.target.files):[]).filter(D);if(o.length>0){const F=[...s||[],...o].slice(0,u);m&&m(F)}}else{const n=r.target.files?.[0];n&&D(n)&&t&&t(n)}r.target.value=""}},T=r=>{if(!x)if(d){const n=j.filter((o,h)=>h!==r);m&&m(n)}else t&&t(null)},D=r=>{const n=r.name.substring(r.name.lastIndexOf(".")),o=!c||c.length===0||c.includes(n.toLowerCase()),h=r.size<=_;return!o&&l?l(r,"extension"):!h&&l&&l(r,"size"),o&&h},q=()=>{x||(d?m&&m([]):t&&t(null))};return e.jsxRuntimeExports.jsxs("div",{ref:v,className:g.cn("adm:flex adm:flex-col adm:gap-4",a),...B,children:[d&&b==="above"&&e.jsxRuntimeExports.jsx(k,{files:j,isMultiple:d,invalid:E,disabled:x,labels:p,onRemoveFile:T,onClearAll:q}),(d||j.length===0)&&e.jsxRuntimeExports.jsx(Q,{isDragging:L,isMultiple:d,invalid:E,disabled:x,accept:V,acceptedExtensions:c,maxSizeInMB:f,maxFiles:u,labels:p,input:O,onDragOver:G,onDragLeave:H,onDrop:J,onFileChange:K}),!d&&j.length>0&&e.jsxRuntimeExports.jsx(k,{files:j,isMultiple:d,invalid:E,disabled:x,labels:p,onRemoveFile:T,onClearAll:q}),d&&b==="below"&&e.jsxRuntimeExports.jsx(k,{files:j,isMultiple:d,invalid:E,disabled:x,labels:p,onRemoveFile:T,onClearAll:q})]})}exports.FileUpload=X;

package/dist/file-upload.js

@@ -1,30 +1,32 @@
 import { j as e } from "./jsx-runtime-BzflLqGi.js";
-import { B as L } from "./button-B0lWuG-D.js";
-import { I } from "./icon-DKAhvlX_.js";
-import { T as j } from "./typography-MnY0LQoZ.js";
+import { B as O } from "./button-B0lWuG-D.js";
+import { I as L } from "./icon-DKAhvlX_.js";
+import { T as y } from "./typography-MnY0LQoZ.js";
 import { c as v } from "./index-CRiPKpXj.js";
-import { useState as O, useRef as K, useEffect as Q } from "react";
-function W({
+import { useState as B, useRef as W, useEffect as X } from "react";
+function Y({
   isDragging: n,
-  isMultiple: i,
-  invalid: s,
-  disabled: t,
+  isMultiple: d,
+  invalid: a,
+  disabled: r,
   accept: m,
   acceptedExtensions: l,
   maxSizeInMB: c,
-  maxFiles: f,
-  labels: u,
-  onDragOver: C,
-  onDragLeave: b,
-  onDrop: w,
+  maxFiles: x,
+  labels: f,
+  input: b,
+  onDragOver: D,
+  onDragLeave: w,
+  onDrop: C,
   onFileChange: A
 }) {
+  const p = b?.id || `file-upload-${Math.random().toString(36).substring(2, 11)}`;
   return /* @__PURE__ */ e.jsxs(
     "div",
     {
-      onDragOver: t ? void 0 : C,
-      onDragLeave: t ? void 0 : b,
-      onDrop: t ? void 0 : w,
+      onDragOver: r ? void 0 : D,
+      onDragLeave: r ? void 0 : w,
+      onDrop: r ? void 0 : C,
       className: v(
         `
           adm:flex adm:flex-col adm:items-center adm:gap-6 adm:rounded-2xl
@@ -32,10 +34,10 @@ function W({
         `,
         "adm:border-dashed adm:bg-background adm:p-6 adm:transition-colors",
         {
-          "adm:border-primary": n && !s && !t,
-          "adm:border-destructive": s && !t,
-          "adm:border-input": !n && !s,
-          "adm:cursor-not-allowed adm:opacity-50": t
+          "adm:border-primary": n && !a && !r,
+          "adm:border-destructive": a && !r,
+          "adm:border-input": !n && !a,
+          "adm:cursor-not-allowed adm:opacity-50": r
         }
       ),
       children: [
@@ -44,59 +46,61 @@ function W({
           {
             className: v(
               "adm:flex adm:items-center adm:justify-center adm:rounded-xl adm:p-2.5",
-              s && !t ? "adm:bg-destructive/10" : "adm:bg-primary-50"
+              a && !r ? "adm:bg-destructive/10" : "adm:bg-primary-50"
             ),
             children: /* @__PURE__ */ e.jsx(
-              I,
+              L,
               {
                 symbol: "text_snippet",
-                className: s && !t ? "adm:text-destructive" : "adm:text-primary"
+                className: a && !r ? "adm:text-destructive" : "adm:text-primary"
               }
             )
           }
         ),
         /* @__PURE__ */ e.jsxs("div", { className: "adm:flex adm:flex-col adm:items-center adm:gap-2", children: [
-          /* @__PURE__ */ e.jsx(j, { color: s && !t ? "destructive" : void 0, children: u?.dragDrop || (i ? "Drag and drop your files here or" : "Drag and drop your file here or") }),
-          /* @__PURE__ */ e.jsxs("label", { htmlFor: "file-upload", children: [
+          /* @__PURE__ */ e.jsx(y, { color: a && !r ? "destructive" : void 0, children: f?.dragDrop || (d ? "Drag and drop your files here or" : "Drag and drop your file here or") }),
+          /* @__PURE__ */ e.jsxs("label", { htmlFor: p, children: [
             /* @__PURE__ */ e.jsx(
               "input",
               {
-                id: "file-upload",
+                ...b,
+                id: p,
                 type: "file",
                 accept: m,
-                multiple: i,
+                multiple: d,
                 onChange: A,
-                disabled: t,
+                disabled: r,
                 className: "adm:hidden"
               }
             ),
             /* @__PURE__ */ e.jsx(
-              L,
+              O,
               {
                 asChild: !0,
                 type: "button",
                 variant: "link",
-                className: v("adm:cursor-pointer", t && `
+                className: v("adm:cursor-pointer", r && `
               adm:pointer-events-none
             `),
-                disabled: t,
-                children: /* @__PURE__ */ e.jsx("span", { children: u?.selectFile || (i ? "Select files" : "Select the file") })
+                disabled: r,
+                children: /* @__PURE__ */ e.jsx("span", { children: f?.selectFile || (d ? "Select files" : "Select the file") })
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ e.jsx(j, { className: "adm:text-center", color: s && !t ? "destructive" : "muted", children: u?.fileRequirements || `Allowed files: ${l.join(", ")}. Maximum size ${c} MB${i ? `. Up to ${f} files` : ""}.` })
+        /* @__PURE__ */ e.jsx(y, { className: "adm:text-center", color: a && !r ? "destructive" : "muted", children: f?.fileRequirements || (l && l.length > 0 ? `Allowed files: ${l.join(", ")}. Maximum size ${c} MB${d ? `. Up to ${x} files` : ""}.` : `Maximum size ${c} MB${d ? `. Up to ${x} files` : ""}.`) })
       ]
     }
   );
 }
-function X({ file: n, invalid: i, onRemove: s }) {
+function Z({ file: n, invalid: d, disabled: a, onRemove: r }) {
   return /* @__PURE__ */ e.jsxs(
     "div",
     {
       className: v(
         "adm:flex adm:items-center adm:gap-4 adm:rounded-2xl adm:border adm:p-6",
-        i ? "adm:border-destructive adm:bg-destructive/5" : "adm:border-input adm:bg-muted"
+        d && !a ? "adm:border-destructive adm:bg-destructive/5" : "adm:border-input adm:bg-muted",
+        a && "adm:cursor-not-allowed adm:opacity-50"
       ),
       children: [
         /* @__PURE__ */ e.jsx(
@@ -104,13 +108,13 @@ function X({ file: n, invalid: i, onRemove: s }) {
           {
             className: v(
               "adm:flex adm:items-center adm:justify-center adm:rounded-xl adm:p-2.5",
-              i ? "adm:bg-destructive/10" : "adm:bg-primary-50"
+              d && !a ? "adm:bg-destructive/10" : "adm:bg-primary-50"
             ),
             children: /* @__PURE__ */ e.jsx(
-              I,
+              L,
               {
                 symbol: "text_snippet",
-                className: i ? "adm:text-destructive" : "adm:text-primary"
+                className: d && !a ? "adm:text-destructive" : "adm:text-primary"
               }
             )
           }
@@ -122,8 +126,8 @@ function X({ file: n, invalid: i, onRemove: s }) {
         adm:flex adm:min-w-0 adm:flex-1 adm:items-start adm:gap-3
       `,
             children: [
-              /* @__PURE__ */ e.jsx("div", { className: "adm:min-w-0 adm:flex-1", children: /* @__PURE__ */ e.jsx(j, { className: "adm:truncate adm:font-semibold", children: n.name }) }),
-              /* @__PURE__ */ e.jsxs(j, { className: "adm:shrink-0", color: "muted", children: [
+              /* @__PURE__ */ e.jsx("div", { className: "adm:min-w-0 adm:flex-1", children: /* @__PURE__ */ e.jsx(y, { className: "adm:truncate adm:font-semibold", children: n.name }) }),
+              /* @__PURE__ */ e.jsxs(y, { className: "adm:shrink-0", color: "muted", children: [
                 (n.size / 1024 / 1024).toFixed(1),
                 " MB"
               ] })
@@ -131,175 +135,183 @@ function X({ file: n, invalid: i, onRemove: s }) {
           }
         ),
         /* @__PURE__ */ e.jsx(
-          L,
+          O,
           {
             variant: "destructive-medium",
-            onClick: s,
+            onClick: r,
             type: "button",
-            children: /* @__PURE__ */ e.jsx(I, { symbol: "delete", className: "adm:text-destructive" })
+            disabled: a,
+            children: /* @__PURE__ */ e.jsx(L, { symbol: "delete", className: "adm:text-destructive" })
           }
         )
       ]
     }
   );
 }
-function z({ files: n, isMultiple: i, invalid: s, labels: t, onRemoveFile: m, onClearAll: l }) {
+function I({ files: n, isMultiple: d, invalid: a, disabled: r, labels: m, onRemoveFile: l, onClearAll: c }) {
   return n.length === 0 ? null : /* @__PURE__ */ e.jsxs("div", { className: "adm:flex adm:flex-col adm:gap-3", children: [
-    i && n.length > 1 && /* @__PURE__ */ e.jsxs("div", { className: "adm:flex adm:items-center adm:justify-between", children: [
-      /* @__PURE__ */ e.jsx(j, { className: "adm:text-sm adm:font-medium", color: s ? "destructive" : void 0, children: t?.filesSelected?.(n.length) || `${n.length} file${n.length !== 1 ? "s" : ""} selected` }),
+    d && n.length > 1 && /* @__PURE__ */ e.jsxs("div", { className: "adm:flex adm:items-center adm:justify-between", children: [
+      /* @__PURE__ */ e.jsx(y, { className: "adm:text-sm adm:font-medium", color: a && !r ? "destructive" : void 0, children: m?.filesSelected?.(n.length) || `${n.length} file${n.length !== 1 ? "s" : ""} selected` }),
       /* @__PURE__ */ e.jsx(
-        L,
+        O,
         {
           variant: "ghost",
           size: "sm",
-          onClick: l,
+          onClick: c,
           type: "button",
+          disabled: r,
           children: "Clear all"
         }
       )
     ] }),
-    n.map((c, f) => /* @__PURE__ */ e.jsx(
-      X,
+    n.map((x, f) => /* @__PURE__ */ e.jsx(
+      Z,
       {
-        file: c,
-        invalid: s,
-        onRemove: () => m(f)
+        file: x,
+        invalid: a,
+        disabled: r,
+        onRemove: () => l(f)
       },
-      `${c.name}-${f}`
+      `${x.name}-${f}`
     ))
   ] });
 }
-function re({
+function ae({
   className: n,
-  selectedFile: i,
-  selectedFiles: s,
-  onFileSelect: t,
+  selectedFile: d,
+  selectedFiles: a,
+  onFileSelect: r,
   onFilesSelect: m,
   onInvalidFile: l,
-  acceptedExtensions: c = [".xls", ".xlsx", ".numbers"],
-  maxSizeInMB: f = 50,
-  maxFiles: u = 10,
-  multiple: C = !1,
-  filesPosition: b = "below",
+  acceptedExtensions: c,
+  maxSizeInMB: x = 50,
+  maxFiles: f = 10,
+  multiple: b = !1,
+  filesPosition: D = "below",
   invalid: w = !1,
-  disabled: A = !1,
-  "aria-invalid": B,
-  labels: y,
-  ...T
+  disabled: C = !1,
+  "aria-invalid": A,
+  labels: p,
+  input: T,
+  ...U
 }) {
-  const [V, R] = O(!1), [_, E] = O(!1), g = K(null);
-  Q(() => {
-    const r = () => {
-      if (g.current) {
-        const d = g.current.closest("fieldset");
-        E(d?.disabled ?? !1);
+  const [V, R] = B(!1), [_, M] = B(!1), j = W(null);
+  X(() => {
+    const t = () => {
+      if (j.current) {
+        const i = j.current.closest("fieldset");
+        M(i?.disabled ?? !1);
       }
     };
-    r();
-    const a = new MutationObserver(r);
-    if (g.current) {
-      const d = g.current.closest("fieldset");
-      d && a.observe(d, { attributes: !0, attributeFilter: ["disabled"] });
+    t();
+    const s = new MutationObserver(t);
+    if (j.current) {
+      const i = j.current.closest("fieldset");
+      i && s.observe(i, { attributes: !0, attributeFilter: ["disabled"] });
     }
-    return () => a.disconnect();
+    return () => s.disconnect();
   }, []);
-  const U = c.join(","), q = f * 1024 * 1024, o = C || s !== void 0 || m !== void 0, p = o ? s || [] : i ? [i] : [], D = w || B, x = A || _, M = (r) => {
-    x || (r.preventDefault(), R(!0));
-  }, G = (r) => {
-    x || (r.preventDefault(), R(!1));
-  }, H = (r) => {
-    if (!x)
-      if (r.preventDefault(), R(!1), o) {
-        const d = Array.from(r.dataTransfer.files).filter(N);
-        if (d.length > 0) {
-          const k = [...s || [], ...d].slice(0, u);
-          m && m(k);
+  const q = c?.join(",") || "", G = x * 1024 * 1024, o = b || a !== void 0 || m !== void 0, h = o ? a || [] : d ? [d] : [], N = w || A, u = C || _, H = (t) => {
+    u || (t.preventDefault(), R(!0));
+  }, J = (t) => {
+    u || (t.preventDefault(), R(!1));
+  }, K = (t) => {
+    if (!u)
+      if (t.preventDefault(), R(!1), o) {
+        const i = Array.from(t.dataTransfer.files).filter($);
+        if (i.length > 0) {
+          const F = [...a || [], ...i].slice(0, f);
+          m && m(F);
         }
       } else {
-        const a = r.dataTransfer.files[0];
-        a && N(a) && t && t(a);
+        const s = t.dataTransfer.files[0];
+        s && $(s) && r && r(s);
       }
-  }, J = (r) => {
-    if (!x) {
+  }, Q = (t) => {
+    if (!u) {
       if (o) {
-        const d = (r.target.files ? Array.from(r.target.files) : []).filter(N);
-        if (d.length > 0) {
-          const k = [...s || [], ...d].slice(0, u);
-          m && m(k);
+        const i = (t.target.files ? Array.from(t.target.files) : []).filter($);
+        if (i.length > 0) {
+          const F = [...a || [], ...i].slice(0, f);
+          m && m(F);
         }
       } else {
-        const a = r.target.files?.[0];
-        a && N(a) && t && t(a);
+        const s = t.target.files?.[0];
+        s && $(s) && r && r(s);
       }
-      r.target.value = "";
+      t.target.value = "";
     }
-  }, $ = (r) => {
-    if (!x)
+  }, k = (t) => {
+    if (!u)
       if (o) {
-        const a = p.filter((d, h) => h !== r);
-        m && m(a);
+        const s = h.filter((i, g) => g !== t);
+        m && m(s);
       } else
-        t && t(null);
-  }, N = (r) => {
-    const a = r.name.substring(r.name.lastIndexOf(".")), d = c.includes(a.toLowerCase()), h = r.size <= q;
-    return !d && l ? l(r, "extension") : !h && l && l(r, "size"), d && h;
-  }, F = () => {
-    x || (o ? m && m([]) : t && t(null));
+        r && r(null);
+  }, $ = (t) => {
+    const s = t.name.substring(t.name.lastIndexOf(".")), i = !c || c.length === 0 || c.includes(s.toLowerCase()), g = t.size <= G;
+    return !i && l ? l(t, "extension") : !g && l && l(t, "size"), i && g;
+  }, z = () => {
+    u || (o ? m && m([]) : r && r(null));
   };
-  return /* @__PURE__ */ e.jsxs("div", { ref: g, className: v("adm:flex adm:flex-col adm:gap-4", n), ...T, children: [
-    o && b === "above" && /* @__PURE__ */ e.jsx(
-      z,
+  return /* @__PURE__ */ e.jsxs("div", { ref: j, className: v("adm:flex adm:flex-col adm:gap-4", n), ...U, children: [
+    o && D === "above" && /* @__PURE__ */ e.jsx(
+      I,
       {
-        files: p,
+        files: h,
         isMultiple: o,
-        invalid: D,
-        labels: y,
-        onRemoveFile: $,
-        onClearAll: F
+        invalid: N,
+        disabled: u,
+        labels: p,
+        onRemoveFile: k,
+        onClearAll: z
       }
     ),
-    (o || p.length === 0) && /* @__PURE__ */ e.jsx(
-      W,
+    (o || h.length === 0) && /* @__PURE__ */ e.jsx(
+      Y,
       {
         isDragging: V,
         isMultiple: o,
-        invalid: D,
-        disabled: x,
-        accept: U,
+        invalid: N,
+        disabled: u,
+        accept: q,
         acceptedExtensions: c,
-        maxSizeInMB: f,
-        maxFiles: u,
-        labels: y,
-        onDragOver: M,
-        onDragLeave: G,
-        onDrop: H,
-        onFileChange: J
+        maxSizeInMB: x,
+        maxFiles: f,
+        labels: p,
+        input: T,
+        onDragOver: H,
+        onDragLeave: J,
+        onDrop: K,
+        onFileChange: Q
       }
     ),
-    !o && p.length > 0 && /* @__PURE__ */ e.jsx(
-      z,
+    !o && h.length > 0 && /* @__PURE__ */ e.jsx(
+      I,
       {
-        files: p,
+        files: h,
         isMultiple: o,
-        invalid: D,
-        labels: y,
-        onRemoveFile: $,
-        onClearAll: F
+        invalid: N,
+        disabled: u,
+        labels: p,
+        onRemoveFile: k,
+        onClearAll: z
       }
     ),
-    o && b === "below" && /* @__PURE__ */ e.jsx(
-      z,
+    o && D === "below" && /* @__PURE__ */ e.jsx(
+      I,
       {
-        files: p,
+        files: h,
         isMultiple: o,
-        invalid: D,
-        labels: y,
-        onRemoveFile: $,
-        onClearAll: F
+        invalid: N,
+        disabled: u,
+        labels: p,
+        onRemoveFile: k,
+        onClearAll: z
       }
     )
   ] });
 }
 export {
-  re as FileUpload
+  ae as FileUpload
 };

package/docs/components/ui/combobox.md

@@ -42,6 +42,8 @@ import { Combobox } from "@adamosuiteservices/ui/combobox";
 | `ref`                   | `React.Ref<HTMLButtonElement>`        | -            | Ref al botón trigger para posicionamiento externo           |
 | `aria-invalid`          | `"true" \| "false" \| boolean`        | -            | Indica estado inválido (borde rojo)                         |
 | `disabled`              | `boolean`                             | `false`      | Deshabilita el combobox                                     |
+| `searchBy`              | `"label" \| "value" \| "both"`        | `"both"`     | Define qué campos se usan para búsqueda                     |
+| `filter`                | `(value, search, keywords) => number` | -            | Función personalizada de filtrado para búsqueda avanzada    |
 
 ### ComboboxLabels
 
@@ -227,6 +229,90 @@ Cuando `alwaysShowPlaceholder` es true, puedes controlar dónde aparece el valor
 />
 ```
 
+**Comportamiento de búsqueda por defecto**:
+
+- La búsqueda es **case-insensitive** (sin distinguir mayúsculas/minúsculas)
+- Por defecto busca en **ambos campos**: `label` y `value` (`searchBy="both"`)
+- Ejemplo: Al buscar "nex" encuentra "Next.js" (por label), al buscar "ne" también lo encuentra (por value)
+
+### Personalizar Búsqueda
+
+Puedes controlar qué campos se usan para búsqueda con el prop `searchBy`:
+
+```tsx
+// Buscar solo por label (texto visible)
+<Combobox
+  searchable
+  searchBy="label"
+  options={frameworks}
+  labels={{ placeholder: "Select framework..." }}
+/>
+
+// Buscar solo por value (ID interno)
+<Combobox
+  searchable
+  searchBy="value"
+  options={frameworks}
+  labels={{ placeholder: "Select framework..." }}
+/>
+
+// Buscar por ambos (default)
+<Combobox
+  searchable
+  searchBy="both"
+  options={frameworks}
+  labels={{ placeholder: "Select framework..." }}
+/>
+```
+
+### Filtro Personalizado
+
+Para casos de búsqueda avanzada, puedes proporcionar tu propia función de filtrado:
+
+```tsx
+// Función de filtrado con ranking por calidad de coincidencia
+const customFilter = (value: string, search: string, keywords?: string[]) => {
+  const normalizedSearch = search.toLowerCase().trim();
+  const normalizedValue = value.toLowerCase().trim();
+  const normalizedLabel = keywords?.[0]?.toLowerCase().trim() ?? "";
+
+  // Coincidencia exacta = prioridad más alta
+  if (normalizedLabel === normalizedSearch || normalizedValue === normalizedSearch) {
+    return 10;
+  }
+
+  // Comienza con búsqueda = prioridad media
+  if (normalizedLabel.startsWith(normalizedSearch) || normalizedValue.startsWith(normalizedSearch)) {
+    return 5;
+  }
+
+  // Contiene búsqueda = prioridad baja
+  if (normalizedLabel.includes(normalizedSearch) || normalizedValue.includes(normalizedSearch)) {
+    return 1;
+  }
+
+  return 0; // Sin coincidencia
+};
+
+<Combobox
+  searchable
+  filter={customFilter}
+  options={frameworks}
+  labels={{ placeholder: "Select framework..." }}
+/>;
+```
+
+**Parámetros de la función filter**:
+
+- `value` (string): El valor interno de la opción (ej: "ne", "sv")
+- `search` (string): El texto que el usuario está escribiendo
+- `keywords` (string[] | undefined): Array con el label de la opción como primer elemento
+
+**Valor de retorno**:
+
+- `0`: Sin coincidencia (la opción se oculta)
+- `> 0`: Hay coincidencia, el número indica el ranking (mayor = más relevante)
+
 ### Selección Simple Controlada
 
 ```tsx
@@ -560,7 +646,7 @@ El prop `renders` permite personalizar completamente la UI usando el patrón ren
 
 ## Casos de Uso Comunes
 
-**Framework selector**: Selección de tecnología con búsqueda  
+**Framework selector**: Selección de tecnología con búsqueda case-insensitive  
 **Country/City picker**: Selección geográfica con opciones deshabilitadas  
 **Tags/Categories**: Selección múltiple de categorías  
 **Settings filters**: Filtros multi-selección en dashboards  
@@ -568,7 +654,9 @@ El prop `renders` permite personalizar completamente la UI usando el patrón ren
 **Language selector**: Selección de idioma con búsqueda  
 **Status selector con icono**: Usar `icon` + `alwaysShowPlaceholder` para selectores etiquetados  
 **Rich options**: Usar `renders.optionLabel` para mostrar avatares, badges, etc.  
-**Custom UI**: Usar `renders.trigger` para triggers completamente personalizados
+**Custom UI**: Usar `renders.trigger` para triggers completamente personalizados  
+**Search by ID**: Usar `searchBy="value"` cuando necesites buscar por IDs internos  
+**Smart search**: Usar función `filter` personalizada para implementar búsqueda fuzzy, ranking, o lógica compleja
 
 ## Estados Internos
 
@@ -599,7 +687,12 @@ El prop `renders` permite personalizar completamente la UI usando el patrón ren
 ## Notas de Implementación
 
 - **Composición**: Usa Popover + Command + Button + Checkbox internamente
-- **Búsqueda**: Command component maneja fuzzy search automáticamente
+- **Búsqueda**:
+  - Usa función de filtrado personalizada que busca por label y/o value
+  - Case-insensitive por defecto
+  - Configurable con `searchBy` prop (`"label"`, `"value"`, o `"both"`)
+  - Extensible con función `filter` personalizada para casos avanzados
+  - El label se pasa como keyword al CommandItem para que cmdk pueda filtrarlo
 - **Estado interno**: Soporta modo controlado y no controlado
 - **Tipo de value**: Cambia según `multiple` (string vs string[])
 - **selectedFeedback**:
@@ -650,6 +743,8 @@ Hereda estilos de Command component:
 
 **Value no cambia**: Verifica que uses `onValueChange` en modo controlado  
 **Búsqueda no funciona**: Asegúrate de pasar `searchable={true}`  
+**Búsqueda solo encuentra por código (value)**: El comportamiento por defecto busca por ambos, si usaste `searchBy="value"`, cámbialo a `searchBy="both"` o `searchBy="label"`  
+**Búsqueda distingue mayúsculas**: El filtro por defecto es case-insensitive, si usas función `filter` personalizada, asegúrate de normalizar con `.toLowerCase()`  
 **Multiple selection cierra popover**: Verifica que `multiple={true}` esté activo  
 **Labels incorrectas en multiple**: Usa función `multipleSelected` para pluralización  
 **Tipo de value incorrecto**: Single usa `string`, Multiple usa `string[]`