@infinityfx/fluid/dist/components/input/file-field.js

React UI library, using zero-runtime CSS-in-JS.

"use client";
import{jsxs as r,jsx as e}from"react/jsx-runtime";import{useState as o,useRef as a}from"react";import l from"./button.js";import i from"../../hooks/use-input-props.js";import{combineClasses as t,classes as n,combineRefs as d}from"../../core/utils.js";import{createStyles as c}from"../../core/style.js";import{Icon as s}from"../../core/icons.js";const f=c("file-field",{".input":{position:"absolute",opacity:0},".placeholder":{color:"var(--f-clr-text-100)",userSelect:"none",flexGrow:1,background:"none",border:"none",width:0,pointerEvents:"none"},".field":{backgroundColor:"var(--f-clr-fg-100)",borderRadius:"var(--f-radius-sml)",color:"var(--f-clr-grey-200)",transition:"background-color .2s, border-color .2s, color .2s, outline-color .2s",display:"flex",alignItems:"center",overflow:"hidden",outline:"solid 3px transparent",minWidth:"min(var(--width, 100vw), 12em)"},".v__default":{border:"solid 1px var(--f-clr-fg-200)"},".v__minimal":{backgroundColor:"var(--f-clr-fg-100)"},".content":{display:"flex",alignItems:"center",gap:"var(--f-spacing-xsm)",padding:".675em",flexGrow:1},".v__default:focus-within":{borderColor:"var(--f-clr-primary-100)",color:"var(--f-clr-primary-100)",outlineColor:"var(--f-clr-primary-500)"},".v__minimal:focus-within":{backgroundColor:"var(--f-clr-fg-200)"},'.field[data-error="true"]':{borderColor:"var(--f-clr-error-100)"},'.field[data-error="true"]:focus-within':{outlineColor:"var(--f-clr-error-400)"},'.field[data-error="true"] .content':{color:"var(--f-clr-error-200)"},'.field[data-error="true"] .placeholder':{color:"var(--f-clr-error-200)"},'.field[data-disabled="true"]':{backgroundColor:"var(--f-clr-grey-100)",borderColor:"var(--f-clr-grey-200)"},'.field[data-disabled="true"] .placeholder':{color:"var(--f-clr-grey-500)"},".s__xsm":{fontSize:"var(--f-font-size-xxs)"},".s__sml":{fontSize:"var(--f-font-size-xsm)"},".s__med":{fontSize:"var(--f-font-size-sml)"},".s__lrg":{fontSize:"var(--f-font-size-med)"},".field.round":{borderRadius:"999px"},".button":{marginRight:".25em"}});function u({cc:c={},size:u="med",variant:m="default",round:p,icon:b,error:v,loading:g=!1,inputRef:h,..._}){const y=t(f,c),[x,C]=o([]),z=a(null),[k,w]=i(_);return r("label",{...w,className:n(y.field,y[`s__${u}`],y[`v__${m}`],p&&y.round,_.className),"data-error":!!v,"data-disabled":_.disabled,children:[r("div",{className:y.content,children:[b,e("input",{...k,ref:d(z,h),type:"file",className:y.input,disabled:_.disabled||g,"aria-invalid":!!v,onChange:r=>{C?.(Array.from(r.target.files||[])),_.onChange?.(r)}}),e("input",{readOnly:!0,role:"none",tabIndex:-1,className:y.placeholder,placeholder:k.placeholder,value:x.map((r=>r.name))})]}),e(l,{compact:!0,"aria-label":k["aria-label"],"aria-labelledby":k["aria-labelledby"],disabled:_.disabled,round:p,size:u,loading:g,cc:{button:y.button,...c},onClick:()=>z.current?.click(),children:e(s,{type:"upload"})})]})}export{u as default};
//# sourceMappingURL=file-field.js.map