@granto-umbrella/umbrella-components 1.2.2 → 1.2.3

package/storybook-static/assets/Input.stories-BvmatAPw.js

@@ -0,0 +1,62 @@
+import{j as d}from"./jsx-runtime-C6qLVRqm.js";import{d as p,s as o,c as Qe,b as He}from"./borders-DvGIQc_9.js";import{s as _}from"./shadows-DG4qMo_W.js";import{p as u,s as Xe}from"./sizes-DbxqJKgv.js";import{R as c}from"./index-C2WPW1L7.js";const Ye=p.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${u["size-4"]};
+`,Ze=p.label`
+  font-size: ${u["size-4"]};
+  color: ${o.neutral["--neutral-350"]};
+  font-weight: 500;
+`,er=p.span`
+  font-size: ${u["size-3"]};
+  color: ${({$error:e})=>e?o.danger["--danger-400"]:o.neutral["--neutral-350"]};
+`,rr=p.div`
+  display: flex;
+  align-items: center;
+  padding: ${u["size-4"]};
+  gap: ${u["size-2"]};
+  height: ${({$size:e})=>Xe[e||"md"]};
+  border-radius: ${({$radius:e})=>Qe[e||"--border-1"]};
+  box-shadow: ${({$shadow:e})=>_[e||"shadow"]};
+  border: 1px solid
+    ${({$error:e})=>e?o.danger["--danger-100"]:o.neutral["--neutral-300"]};
+  background-color: ${({$disabled:e})=>e?o.neutral["--neutral-100"]:o.base["--background"]};
+  transition: border-color 0.2s, box-shadow 0.2s;
+
+  &:focus-within {
+    box-shadow: ${({$shadow:e})=>_[e||"shadow-md"]};
+    border-color: ${({$error:e})=>e?o.danger["--danger-500"]:o.branding["--branding-300"]};
+  }
+`,ar=p.input`
+  flex: 1;
+  border: none;
+  outline: none;
+  font-size: ${u["size-3.5"]};
+  color: ${o.neutral["--neutral-600"]};
+
+  &::placeholder {
+    color: ${o.neutral["--neutral-300"]};
+  }
+
+  &:disabled {
+    background-color: transparent;
+    cursor: not-allowed;
+  }
+`,tr=p.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${o.neutral["--neutral-400"]};
+`,q=({type:e="text",placeholder:r="Placeholder",value:a,onChange:t,error:n=!1,disabled:l=!1,icon:C,label:m,supportText:i,size:Ge="md",radius:Ke="--border-1",shadow:Ue="shadow",style:Je})=>d.jsxs(Ye,{children:[m&&d.jsx(Ze,{children:m}),d.jsxs(rr,{$error:n,$disabled:l,$size:Ge,$radius:Ke,$shadow:Ue,children:[C&&d.jsx(tr,{children:C}),d.jsx(ar,{style:Je,type:e,placeholder:r,value:a,onChange:t,disabled:l})]}),i&&d.jsx(er,{$error:n,children:i})]});q.__docgenInfo={description:"",methods:[],displayName:"Input",props:{type:{required:!1,tsType:{name:"union",raw:'"text" | "password" | "email"',elements:[{name:"literal",value:'"text"'},{name:"literal",value:'"password"'},{name:"literal",value:'"email"'}]},description:"",defaultValue:{value:'"text"',computed:!1}},placeholder:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:'"Placeholder"',computed:!1}},value:{required:!1,tsType:{name:"string"},description:""},onChange:{required:!1,tsType:{name:"signature",type:"function",raw:"(e: React.ChangeEvent<HTMLInputElement>) => void",signature:{arguments:[{type:{name:"ReactChangeEvent",raw:"React.ChangeEvent<HTMLInputElement>",elements:[{name:"HTMLInputElement"}]},name:"e"}],return:{name:"void"}}},description:""},error:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},disabled:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},icon:{required:!1,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:""},label:{required:!1,tsType:{name:"string"},description:""},supportText:{required:!1,tsType:{name:"string"},description:""},radius:{required:!1,tsType:{name:"union",raw:`| "--border-0"\r
+| "--border-1"\r
+| "--border-2"\r
+| "--border-3"\r
+| "--border-4"\r
+| "--border-5"`,elements:[{name:"literal",value:'"--border-0"'},{name:"literal",value:'"--border-1"'},{name:"literal",value:'"--border-2"'},{name:"literal",value:'"--border-3"'},{name:"literal",value:'"--border-4"'},{name:"literal",value:'"--border-5"'}]},description:"",defaultValue:{value:'"--border-1"',computed:!1}},shadow:{required:!1,tsType:{name:"union",raw:'"shadow" | "shadow-md" | "shadow-lg"',elements:[{name:"literal",value:'"shadow"'},{name:"literal",value:'"shadow-md"'},{name:"literal",value:'"shadow-lg"'}]},description:"",defaultValue:{value:'"shadow"',computed:!1}},size:{required:!1,tsType:{name:"union",raw:`| "xs"\r
+| "sm"\r
+| "md"\r
+| "lg"\r
+| "xl"\r
+| "2xl"\r
+| "3xl"\r
+| "4xl"\r
+| "full"`,elements:[{name:"literal",value:'"xs"'},{name:"literal",value:'"sm"'},{name:"literal",value:'"md"'},{name:"literal",value:'"lg"'},{name:"literal",value:'"xl"'},{name:"literal",value:'"2xl"'},{name:"literal",value:'"3xl"'},{name:"literal",value:'"4xl"'},{name:"literal",value:'"full"'}]},description:"",defaultValue:{value:'"md"',computed:!1}},style:{required:!1,tsType:{name:"ReactCSSProperties",raw:"React.CSSProperties"},description:""},register:{required:!1,tsType:{name:"UseFormRegisterReturn"},description:""}}};var ke={color:void 0,size:void 0,className:void 0,style:void 0,attr:void 0},N=c.createContext&&c.createContext(ke),sr=["attr","size","title"];function or(e,r){if(e==null)return{};var a=nr(e,r),t,n;if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n<l.length;n++)t=l[n],!(r.indexOf(t)>=0)&&Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}function nr(e,r){if(e==null)return{};var a={};for(var t in e)if(Object.prototype.hasOwnProperty.call(e,t)){if(r.indexOf(t)>=0)continue;a[t]=e[t]}return a}function D(){return D=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var a=arguments[r];for(var t in a)Object.prototype.hasOwnProperty.call(a,t)&&(e[t]=a[t])}return e},D.apply(this,arguments)}function W(e,r){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r&&(t=t.filter(function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable})),a.push.apply(a,t)}return a}function L(e){for(var r=1;r<arguments.length;r++){var a=arguments[r]!=null?arguments[r]:{};r%2?W(Object(a),!0).forEach(function(t){lr(e,t,a[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):W(Object(a)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))})}return e}function lr(e,r,a){return r=ir(r),r in e?Object.defineProperty(e,r,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[r]=a,e}function ir(e){var r=dr(e,"string");return typeof r=="symbol"?r:r+""}function dr(e,r){if(typeof e!="object"||!e)return e;var a=e[Symbol.toPrimitive];if(a!==void 0){var t=a.call(e,r||"default");if(typeof t!="object")return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return(r==="string"?String:Number)(e)}function Ae(e){return e&&e.map((r,a)=>c.createElement(r.tag,L({key:a},r.attr),Ae(r.child)))}function cr(e){return r=>c.createElement(ur,D({attr:L({},e.attr)},r),Ae(e.child))}function ur(e){var r=a=>{var{attr:t,size:n,title:l}=e,C=or(e,sr),m=n||a.size||"1em",i;return a.className&&(i=a.className),e.className&&(i=(i?i+" ":"")+e.className),c.createElement("svg",D({stroke:"currentColor",fill:"currentColor",strokeWidth:"0"},a.attr,t,C,{className:i,style:L(L({color:e.color||a.color},a.style),e.style),height:m,width:m,xmlns:"http://www.w3.org/2000/svg"}),l&&c.createElement("title",null,l),e.children)};return N!==void 0?c.createElement(N.Consumer,null,a=>r(a)):r(ke)}function pr(e){return cr({tag:"svg",attr:{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},child:[{tag:"circle",attr:{cx:"11",cy:"11",r:"8"},child:[]},{tag:"line",attr:{x1:"21",y1:"21",x2:"16.65",y2:"16.65"},child:[]}]})(e)}const vr={title:"Atoms/Input",component:q,argTypes:{type:{control:"select",options:["text","password","email"]},error:{control:"boolean"},disabled:{control:"boolean"},placeholder:{control:"text"}}},s=e=>d.jsx(q,{...e}),g=s.bind({});g.args={placeholder:"Placeholder",type:"text"};const f=s.bind({});f.args={placeholder:"Search...",icon:d.jsx(pr,{})};const b=s.bind({});b.args={placeholder:"Error",error:!0};const h=s.bind({});h.args={placeholder:"Disabled",disabled:!0};const v=s.bind({});v.args={placeholder:"Success",style:{border:`1px solid ${o.success["--success-400"]}`}};const w=s.bind({});w.args={placeholder:"Default Border"};const y=s.bind({});y.args={placeholder:"Strong Border",style:{border:`${He["border-1"]} solid ${o.branding["--branding-400"]}`}};const S=s.bind({});S.args={placeholder:"Error Border",error:!0};const x=s.bind({});x.args={placeholder:"Heavy Border",style:{border:`${He["border-4"]} solid ${o.neutral["--neutral-400"]}`}};const I=s.bind({});I.args={placeholder:"Small Radius",radius:"--border-1"};const j=s.bind({});j.args={placeholder:"Large Radius",radius:"--border-2"};const O=s.bind({});O.args={placeholder:"Full Radius",radius:"--border-4"};const $=s.bind({});$.args={placeholder:"Default Shadow",shadow:"shadow"};const P=s.bind({});P.args={placeholder:"Medium Shadow",shadow:"shadow-md"};const z=s.bind({});z.args={placeholder:"Large Shadow",shadow:"shadow-lg"};const E=s.bind({});E.args={placeholder:"Small Size",size:"sm"};const R=s.bind({});R.args={placeholder:"Medium Size",size:"md"};const T=s.bind({});T.args={placeholder:"Large Size",size:"lg"};const B=s.bind({});B.args={placeholder:"Full Width",size:"full"};var M,F,V;g.parameters={...g.parameters,docs:{...(M=g.parameters)==null?void 0:M.docs,source:{originalSource:"args => <Input {...args} />",...(V=(F=g.parameters)==null?void 0:F.docs)==null?void 0:V.source}}};var H,k,A;f.parameters={...f.parameters,docs:{...(H=f.parameters)==null?void 0:H.docs,source:{originalSource:"args => <Input {...args} />",...(A=(k=f.parameters)==null?void 0:k.docs)==null?void 0:A.source}}};var G,K,U;b.parameters={...b.parameters,docs:{...(G=b.parameters)==null?void 0:G.docs,source:{originalSource:"args => <Input {...args} />",...(U=(K=b.parameters)==null?void 0:K.docs)==null?void 0:U.source}}};var J,Q,X;h.parameters={...h.parameters,docs:{...(J=h.parameters)==null?void 0:J.docs,source:{originalSource:"args => <Input {...args} />",...(X=(Q=h.parameters)==null?void 0:Q.docs)==null?void 0:X.source}}};var Y,Z,ee;v.parameters={...v.parameters,docs:{...(Y=v.parameters)==null?void 0:Y.docs,source:{originalSource:"args => <Input {...args} />",...(ee=(Z=v.parameters)==null?void 0:Z.docs)==null?void 0:ee.source}}};var re,ae,te;w.parameters={...w.parameters,docs:{...(re=w.parameters)==null?void 0:re.docs,source:{originalSource:"args => <Input {...args} />",...(te=(ae=w.parameters)==null?void 0:ae.docs)==null?void 0:te.source}}};var se,oe,ne;y.parameters={...y.parameters,docs:{...(se=y.parameters)==null?void 0:se.docs,source:{originalSource:"args => <Input {...args} />",...(ne=(oe=y.parameters)==null?void 0:oe.docs)==null?void 0:ne.source}}};var le,ie,de;S.parameters={...S.parameters,docs:{...(le=S.parameters)==null?void 0:le.docs,source:{originalSource:"args => <Input {...args} />",...(de=(ie=S.parameters)==null?void 0:ie.docs)==null?void 0:de.source}}};var ce,ue,pe;x.parameters={...x.parameters,docs:{...(ce=x.parameters)==null?void 0:ce.docs,source:{originalSource:"args => <Input {...args} />",...(pe=(ue=x.parameters)==null?void 0:ue.docs)==null?void 0:pe.source}}};var me,ge,fe;I.parameters={...I.parameters,docs:{...(me=I.parameters)==null?void 0:me.docs,source:{originalSource:"args => <Input {...args} />",...(fe=(ge=I.parameters)==null?void 0:ge.docs)==null?void 0:fe.source}}};var be,he,ve;j.parameters={...j.parameters,docs:{...(be=j.parameters)==null?void 0:be.docs,source:{originalSource:"args => <Input {...args} />",...(ve=(he=j.parameters)==null?void 0:he.docs)==null?void 0:ve.source}}};var we,ye,Se;O.parameters={...O.parameters,docs:{...(we=O.parameters)==null?void 0:we.docs,source:{originalSource:"args => <Input {...args} />",...(Se=(ye=O.parameters)==null?void 0:ye.docs)==null?void 0:Se.source}}};var xe,Ie,je;$.parameters={...$.parameters,docs:{...(xe=$.parameters)==null?void 0:xe.docs,source:{originalSource:"args => <Input {...args} />",...(je=(Ie=$.parameters)==null?void 0:Ie.docs)==null?void 0:je.source}}};var Oe,$e,Pe;P.parameters={...P.parameters,docs:{...(Oe=P.parameters)==null?void 0:Oe.docs,source:{originalSource:"args => <Input {...args} />",...(Pe=($e=P.parameters)==null?void 0:$e.docs)==null?void 0:Pe.source}}};var ze,Ee,Re;z.parameters={...z.parameters,docs:{...(ze=z.parameters)==null?void 0:ze.docs,source:{originalSource:"args => <Input {...args} />",...(Re=(Ee=z.parameters)==null?void 0:Ee.docs)==null?void 0:Re.source}}};var Te,Be,Ce;E.parameters={...E.parameters,docs:{...(Te=E.parameters)==null?void 0:Te.docs,source:{originalSource:"args => <Input {...args} />",...(Ce=(Be=E.parameters)==null?void 0:Be.docs)==null?void 0:Ce.source}}};var De,Le,qe;R.parameters={...R.parameters,docs:{...(De=R.parameters)==null?void 0:De.docs,source:{originalSource:"args => <Input {...args} />",...(qe=(Le=R.parameters)==null?void 0:Le.docs)==null?void 0:qe.source}}};var _e,Ne,We;T.parameters={...T.parameters,docs:{...(_e=T.parameters)==null?void 0:_e.docs,source:{originalSource:"args => <Input {...args} />",...(We=(Ne=T.parameters)==null?void 0:Ne.docs)==null?void 0:We.source}}};var Me,Fe,Ve;B.parameters={...B.parameters,docs:{...(Me=B.parameters)==null?void 0:Me.docs,source:{originalSource:"args => <Input {...args} />",...(Ve=(Fe=B.parameters)==null?void 0:Fe.docs)==null?void 0:Ve.source}}};const wr=["Default","WithIcon","Error","Disabled","WithSuccess","DefaultBorder","StrongBorder","ErrorBorder","HeavyBorder","RoundedSmall","RoundedLarge","RoundedFull","DefaultShadow","MediumShadow","LargeShadow","Small","Medium","Large","Full"];export{g as Default,w as DefaultBorder,$ as DefaultShadow,h as Disabled,b as Error,S as ErrorBorder,B as Full,x as HeavyBorder,T as Large,z as LargeShadow,R as Medium,P as MediumShadow,O as RoundedFull,j as RoundedLarge,I as RoundedSmall,E as Small,y as StrongBorder,f as WithIcon,v as WithSuccess,wr as __namedExportsOrder,vr as default};