components-input-input-web-stories.b1d41338.iframe.bundle.js

"use strict";(self.webpackChunk_leather_io_ui=self.webpackChunk_leather_io_ui||[]).push([[3714],{"./src/components/input/input.web.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,DefaultValue:()=>DefaultValue,Disabled:()=>Disabled,Error:()=>Error,InputNoLabel:()=>InputNoLabel,WithPlaceholder:()=>WithPlaceholder,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js"),_input_web__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/components/input/input.web.tsx");const __WEBPACK_DEFAULT_EXPORT__={component:_input_web__WEBPACK_IMPORTED_MODULE_1__.p.Root,tags:["autodocs"],title:"Input"},Default={render:()=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_input_web__WEBPACK_IMPORTED_MODULE_1__.p.Root,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_input_web__WEBPACK_IMPORTED_MODULE_1__.p.Label,{children:"Label"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_input_web__WEBPACK_IMPORTED_MODULE_1__.p.Field,{type:"text"})]})},Error={render:()=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_input_web__WEBPACK_IMPORTED_MODULE_1__.p.Root,{"data-has-error":"true",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_input_web__WEBPACK_IMPORTED_MODULE_1__.p.Label,{children:"Error field"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_input_web__WEBPACK_IMPORTED_MODULE_1__.p.Field,{type:"text"})]})},Disabled={render:()=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_input_web__WEBPACK_IMPORTED_MODULE_1__.p.Root,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_input_web__WEBPACK_IMPORTED_MODULE_1__.p.Label,{children:"Field is disabled"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_input_web__WEBPACK_IMPORTED_MODULE_1__.p.Field,{disabled:!0,type:"text"})]})},DefaultValue={render:()=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_input_web__WEBPACK_IMPORTED_MODULE_1__.p.Root,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_input_web__WEBPACK_IMPORTED_MODULE_1__.p.Label,{children:"Description"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_input_web__WEBPACK_IMPORTED_MODULE_1__.p.Field,{defaultValue:"This is a default value",type:"text"})]})},InputNoLabel={render:()=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_input_web__WEBPACK_IMPORTED_MODULE_1__.p.Root,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_input_web__WEBPACK_IMPORTED_MODULE_1__.p.Field,{defaultValue:"This is a default value",type:"text"})})},WithPlaceholder={render:()=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_input_web__WEBPACK_IMPORTED_MODULE_1__.p.Root,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_input_web__WEBPACK_IMPORTED_MODULE_1__.p.Field,{placeholder:"Demo placeholder",type:"text"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_input_web__WEBPACK_IMPORTED_MODULE_1__.p.Label,{children:"Error field"})]})},__namedExportsOrder=["Default","Error","Disabled","DefaultValue","InputNoLabel","WithPlaceholder"];try{InputNoLabel.displayName="InputNoLabel",InputNoLabel.__docgenInfo={description:"Layout needs to be adjusted in case where there's no label provided\nAn example of this is our Secret Key input form",displayName:"InputNoLabel",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/input/input.web.stories.tsx#InputNoLabel"]={docgenInfo:InputNoLabel.__docgenInfo,name:"InputNoLabel",path:"src/components/input/input.web.stories.tsx#InputNoLabel"})}catch(__react_docgen_typescript_loader_error){}try{WithPlaceholder.displayName="WithPlaceholder",WithPlaceholder.__docgenInfo={description:"When using a placeholder, the label *must* come after the `Input.Field`.",displayName:"WithPlaceholder",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/input/input.web.stories.tsx#WithPlaceholder"]={docgenInfo:WithPlaceholder.__docgenInfo,name:"WithPlaceholder",path:"src/components/input/input.web.stories.tsx#WithPlaceholder"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/input/input.web.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{p:()=>Input});var jsx_runtime=__webpack_require__("../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js"),react=__webpack_require__("../../node_modules/.pnpm/react@18.2.0/node_modules/react/index.js"),css=__webpack_require__("./leather-styles/css/index.js"),dist=__webpack_require__("../utils/dist/index.js"),jsx=__webpack_require__("./leather-styles/jsx/index.js");const createStyleContext=recipe=>{const StyleContext=(0,react.createContext)(null);return{withRootProvider:Component=>function StyledComponent(props){const[variantProps,otherProps]=recipe.splitVariantProps(props),slotStyles=recipe(variantProps);return(0,jsx_runtime.jsx)(StyleContext.Provider,{value:slotStyles,children:(0,jsx_runtime.jsx)(Component,{...otherProps})})},withProvider:(Component,slot,options)=>{const StyledComponent=(0,jsx.I4)(Component,{},{shouldForwardProp:(prop,variantKeys)=>((prop,variantKeys,options={})=>options.forwardProps?.includes(prop)||!variantKeys.includes(prop)&&!(0,jsx.Rq)(prop))(prop,variantKeys,options)}),StyledSlotProvider=(0,react.forwardRef)(((props,ref)=>{const[variantProps,otherProps]=recipe.splitVariantProps(props),slotStyles=recipe(variantProps);return(0,jsx_runtime.jsx)(StyleContext.Provider,{value:slotStyles,children:(0,jsx_runtime.jsx)(StyledComponent,{...otherProps,ref,className:(0,css.cx)(slotStyles?.[slot],props.className)})})}));return StyledSlotProvider.displayName=Component.displayName||Component.name,StyledSlotProvider},withContext:(Component,slot)=>{const StyledComponent=(0,jsx.I4)(Component),StyledSlotComponent=(0,react.forwardRef)(((props,ref)=>{const slotStyles=(0,react.useContext)(StyleContext);return(0,jsx_runtime.jsx)(StyledComponent,{...props,ref,className:(0,css.cx)(slotStyles?.[slot],props.className)})}));return StyledSlotComponent.displayName=Component.displayName||Component.name,StyledSlotComponent}}};try{createStyleContext.displayName="createStyleContext",createStyleContext.__docgenInfo={description:"",displayName:"createStyleContext",props:{splitVariantProps:{defaultValue:null,description:"",name:"splitVariantProps",required:!0,type:{name:"(props: Props) => [Props, Props]"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/utils/style-context.web.tsx#createStyleContext"]={docgenInfo:createStyleContext.__docgenInfo,name:"createStyleContext",path:"src/utils/style-context.web.tsx#createStyleContext"})}catch(__react_docgen_typescript_loader_error){}var use_on_mount_shared=__webpack_require__("./src/utils/use-on-mount.shared.ts");const transformedLabelStyles={textStyle:"label.03",transform:"translateY(-12px)",fontWeight:500,pointerEvents:"all"},input=(0,css.JB)({slots:["root","label","input"],base:{root:{display:"block",pos:"relative",minHeight:"64px",p:"space.04",ring:"none",textStyle:"body.02",zIndex:4,color:"ink.text-subdued",_before:{content:'""',rounded:"xs",pos:"absolute",top:"-1px",left:"-1px",right:"-1px",bottom:"-1px",border:"3px solid transparent",zIndex:9,pointerEvents:"none"},_focusWithin:{"& label":{color:"ink.text-primary",...transformedLabelStyles},_before:{border:"action",borderWidth:"2px"}},'&[data-has-error="true"]':{color:"red.action-primary-default",_before:{borderColor:"red.action-primary-default",borderWidth:"2px"}}},input:{background:"transparent",appearance:"none",rounded:"xs",pos:"absolute",px:"space.04",top:0,left:0,right:0,bottom:0,zIndex:5,textStyle:"body.02",color:"ink.text-primary",border:"1px solid",borderColor:"ink.border-transparent",_disabled:{bg:"ink.component-background-default",borderColor:"ink.text-non-interactive",cursor:"not-allowed"},_focus:{ring:"none"},_placeholder:{color:"ink.text-subdued"},"&:placeholder-shown + label":transformedLabelStyles,'[data-has-label="true"] &':{pt:"22px"}},label:{pos:"absolute",top:"38%",left:"space.04",zIndex:9,color:"inherit",pointerEvents:"none",textStyle:"body.02",transition:"font-size 100ms ease-in-out, transform 100ms ease-in-out",'[data-has-value="true"] &':transformedLabelStyles,'[data-shrink="true"] &':transformedLabelStyles}}}),{withProvider,withContext}=createStyleContext(input),InputContext=(0,react.createContext)(null);function useInputContext(){const context=(0,react.useContext)(InputContext);if(!context)throw new Error("useInputContext must be used within an Input.Root");return context}const RootBase=withProvider("div","root");const FieldBase=withContext("input","input"),Field=(0,react.forwardRef)((({type,...props},ref)=>{const{setHasValue}=useInputContext(),innerRef=(0,react.useRef)(null);(0,react.useImperativeHandle)(ref,(()=>innerRef.current)),(0,use_on_mount_shared.y)((()=>{setTimeout((()=>{""!==innerRef.current?.value&&setHasValue(!0)}),1)}));const inputTypeProps="number"===type?{type:"text",inputMode:"numeric",pattern:"[0-9]*"}:{type};return(0,jsx_runtime.jsx)(FieldBase,{ref:innerRef,...inputTypeProps,...props,onInput:e=>{e.target instanceof HTMLInputElement&&setHasValue(""!==e.target.value),props.onInput?.(e)}})})),LabelBase=withContext("label","label"),Input={Root:function Root({hasError,shrink,...props}){const[hasValue,setHasValue]=(0,react.useState)(!1),[children,setChildren]=(0,react.useState)(["root"]),dataAttrs={...(0,dist.au)("data-has-error",hasError),...(0,dist.au)("data-shrink",shrink),"data-has-label":children.includes("label")};return(0,jsx_runtime.jsx)(InputContext.Provider,{value:{hasValue,setHasValue,children,registerChild:function registerChild(child){setChildren((children=>[...children,child]))}},children:(0,jsx_runtime.jsx)(RootBase,{"data-has-value":hasValue,...dataAttrs,...props})})},Field,Label:(0,react.forwardRef)(((props,ref)=>{const{registerChild}=useInputContext();return(0,use_on_mount_shared.y)((()=>registerChild("label"))),(0,jsx_runtime.jsx)(LabelBase,{ref,...props})}))}},"./src/utils/use-on-mount.shared.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{y:()=>useOnMount});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/.pnpm/react@18.2.0/node_modules/react/index.js"),_leather_io_utils__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../utils/dist/index.js");function useOnMount(effect){(0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)((()=>{const fn=effect();return()=>(0,_leather_io_utils__WEBPACK_IMPORTED_MODULE_1__.Tn)(fn)?fn():void 0}),[])}}}]);