@snowball-tech/fractal/dist/InputFile/InputFile.js

Fractal's (Snowball's design system) React component library based on RadixUI and TailwindCSS

"use client";import{a as e}from"../constants-CW2-utNH.js";import{n as t,r as n}from"../helpers-DBEwVIlX.js";import{Typography as r}from"../Typography/Typography.js";import{r as i}from"../utils-K22C_6qC.js";import{variantClassNames as a,variantDisabledClassNames as o}from"../Button/Button.constants.js";import{DEFAULT_VARIANT as s,GROUP_NAME as c}from"./InputFile.constants.js";import{forwardRef as l,useImperativeHandle as u,useRef as d}from"react";import f from"lodash/fp/isEmpty.js";import p from"lodash/fp/isFunction.js";import m from"lodash/fp/isString.js";import h from"lodash/fp/omit.js";import{Fragment as g,jsx as _,jsxs as v}from"react/jsx-runtime";const y=l(({disabled:l=!1,label:y,onChange:b,triggerProps:x={},variant:S=s,...C},w)=>{let T=d(null),E=d(null);u(w,()=>({get fileInput(){return E?.current??null},get trigger(){return T?.current??null}}));let D=e=>{p(x.onClick)&&x.onClick(e),E.current&&E.current.click()},O=e=>{if(p(x.onTouchStart)){x.onTouchStart(e);return}`ontouchstart`in document.documentElement&&D(e)},k=S===`text`,A=n(`${e}-${c}`,`${e}-${c}--${S}`,C.required?`${e}-${c}--required`:``,`flex max-h-6 max-w-full items-center justify-center gap-2 rounded-full outline-none transition-colors duration-300 ease-out active:transition-none px-unset appearance-none box-border`,k?``:`h-6 px-3 py-1`,x.fullWidth&&!x.iconOnly?`${e}-${c}--full-width w-full`:``,l?`${e}-${c}--disabled cursor-not-allowed ${o.light[S]}`:`${a.light[S]} cursor-pointer`,f(x.icon)?``:`${e}-${c}--with-addendum ${e}-${c}--with-addendum-${x.iconPosition}`,x.iconOnly?`${e}-${c}--icon-only w-6`:x.fullWidth?``:`w-fit`,C.className),j=_(`div`,{className:t(`${e}-${c}__icon--${x.iconPosition}`,`flex h-3 w-3 items-center [&>svg]:h-3`,k?`mt-0`:``),children:x.icon}),M=_(r,{className:t(`${e}-${c}__label`,`${e}-${c}__label--${S}`,`flex max-h-full max-w-full flex-1 items-center justify-center overflow-hidden text-ellipsis whitespace-nowrap text-center align-middle`,k?`pt-0`:``,C.required?`${e}-${c}__label--required after:text-feedback-danger-50 after:content-required`:``),element:`div`,variant:k?`body-1-link`:`body-1-median`,children:y}),N=!!x.icon,P=m(y)?y:i(y);return v(g,{children:[v(`button`,{...x.id===void 0?{}:{id:x.id},ref:T,"aria-label":P,className:A,disabled:l,title:P,type:`button`,onClick:D,onTouchStart:O,...h([`className`,`disabled`,`fullWidth`,`href`,`icon`,`iconOnly`,`iconPosition`,`id`,`label`,`onTouchStart`,`target`,`type`,`variant`],x),children:[N&&(x.iconPosition||`right`)===`left`&&j,!x.iconOnly&&M,N&&(x.iconPosition||`right`)===`right`&&j]}),_(`input`,{ref:E,disabled:l,hidden:!0,type:`file`,...p(b)?{onChange:e=>b(e.target.files)}:{},...h([`type`],C)})]})});y.displayName=`InputFile`;export{y as InputFile,y as default};
//# sourceMappingURL=InputFile.js.map