@starasia/input 2.0.1 → 2.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -3
- package/dist/input.es.js +27 -5
- package/dist/input.umd.js +23 -1
- package/dist/types.d.ts +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -88,9 +88,10 @@ the underlying element.
|
|
|
88
88
|
## Variants
|
|
89
89
|
|
|
90
90
|
```tsx
|
|
91
|
-
<Input variant="standard"
|
|
92
|
-
<Input variant="outline"
|
|
93
|
-
<Input variant="flushed"
|
|
91
|
+
<Input variant="standard" label="Standard" /> {/* filled gray box, no border */}
|
|
92
|
+
<Input variant="outline" label="Outline" /> {/* white box, 0.8px border */}
|
|
93
|
+
<Input variant="flushed" label="Flushed" /> {/* bottom border only */}
|
|
94
|
+
<Input variant="borderless" label="Borderless" /> {/* transparent, no border */}
|
|
94
95
|
```
|
|
95
96
|
|
|
96
97
|
## Sizes
|
package/dist/input.es.js
CHANGED
|
@@ -184,6 +184,23 @@ const Sn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@3
|
|
|
184
184
|
border-bottom: 0.8px solid var(--sa-input-border-subtle);
|
|
185
185
|
border-radius: 0;
|
|
186
186
|
}
|
|
187
|
+
.sa-tf-variant-borderless .sa-tf-box {
|
|
188
|
+
background: transparent;
|
|
189
|
+
border: 0;
|
|
190
|
+
}
|
|
191
|
+
.sa-tf-variant-borderless.sa-tf-status-error .sa-tf-box {
|
|
192
|
+
border: 0;
|
|
193
|
+
background: var(--sa-input-bg-error-subtlest);
|
|
194
|
+
}
|
|
195
|
+
.sa-tf-variant-borderless.sa-tf-status-success .sa-tf-box {
|
|
196
|
+
border: 0;
|
|
197
|
+
background: var(--sa-input-bg-success-subtlest);
|
|
198
|
+
}
|
|
199
|
+
.sa-tf-variant-borderless.sa-tf-status-disable .sa-tf-box,
|
|
200
|
+
.sa-tf-variant-borderless.sa-tf-disabled .sa-tf-box {
|
|
201
|
+
border: 0;
|
|
202
|
+
background: transparent;
|
|
203
|
+
}
|
|
187
204
|
|
|
188
205
|
/* state: focused */
|
|
189
206
|
.sa-tf-focused.sa-tf-status-default .sa-tf-box,
|
|
@@ -219,6 +236,11 @@ const Sn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@3
|
|
|
219
236
|
.sa-tf-variant-flushed .sa-tf-box {
|
|
220
237
|
box-shadow: none !important;
|
|
221
238
|
}
|
|
239
|
+
/* Borderless must never render any border or ring — flat in every state. */
|
|
240
|
+
.sa-tf-variant-borderless .sa-tf-box {
|
|
241
|
+
border: 0 !important;
|
|
242
|
+
box-shadow: none !important;
|
|
243
|
+
}
|
|
222
244
|
.sa-tf-variant-standard.sa-tf-status-error .sa-tf-box {
|
|
223
245
|
background: var(--sa-input-bg-error-subtlest);
|
|
224
246
|
}
|
|
@@ -545,9 +567,9 @@ const Sn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@3
|
|
|
545
567
|
min-height: 80px;
|
|
546
568
|
}
|
|
547
569
|
`, k = (n) => n === "lg" || n === "xl" ? 18 : 16, G = {
|
|
548
|
-
default: "#505258",
|
|
549
|
-
error: "#a4133c",
|
|
550
|
-
success: "#208958",
|
|
570
|
+
default: "var(--sa-color-gray-800, #505258)",
|
|
571
|
+
error: "var(--sa-text-error, #a4133c)",
|
|
572
|
+
success: "var(--sa-text-success, #208958)",
|
|
551
573
|
disable: "rgba(24, 26, 25, 0.56)"
|
|
552
574
|
}, pn = (n, s) => s ? G.disable : G[n] ?? G.default;
|
|
553
575
|
function En(n) {
|
|
@@ -611,7 +633,7 @@ const Fn = hn(
|
|
|
611
633
|
{
|
|
612
634
|
style: {
|
|
613
635
|
fontFamily: "Poppins",
|
|
614
|
-
color: "#
|
|
636
|
+
color: "var(--sa-color-gray-400, #b7b9be)",
|
|
615
637
|
fontWeight: 500,
|
|
616
638
|
padding: "8px 14px",
|
|
617
639
|
cursor: "pointer"
|
|
@@ -621,7 +643,7 @@ const Fn = hn(
|
|
|
621
643
|
},
|
|
622
644
|
children: [
|
|
623
645
|
n.slice(0, d),
|
|
624
|
-
/* @__PURE__ */ a("span", { style: { color: "#
|
|
646
|
+
/* @__PURE__ */ a("span", { style: { color: "var(--sa-text-primary, #292a2e)" }, children: n.slice(d, d + s.length) }),
|
|
625
647
|
n.slice(d + s.length)
|
|
626
648
|
]
|
|
627
649
|
}
|
package/dist/input.umd.js
CHANGED
|
@@ -182,6 +182,23 @@
|
|
|
182
182
|
border-bottom: 0.8px solid var(--sa-input-border-subtle);
|
|
183
183
|
border-radius: 0;
|
|
184
184
|
}
|
|
185
|
+
.sa-tf-variant-borderless .sa-tf-box {
|
|
186
|
+
background: transparent;
|
|
187
|
+
border: 0;
|
|
188
|
+
}
|
|
189
|
+
.sa-tf-variant-borderless.sa-tf-status-error .sa-tf-box {
|
|
190
|
+
border: 0;
|
|
191
|
+
background: var(--sa-input-bg-error-subtlest);
|
|
192
|
+
}
|
|
193
|
+
.sa-tf-variant-borderless.sa-tf-status-success .sa-tf-box {
|
|
194
|
+
border: 0;
|
|
195
|
+
background: var(--sa-input-bg-success-subtlest);
|
|
196
|
+
}
|
|
197
|
+
.sa-tf-variant-borderless.sa-tf-status-disable .sa-tf-box,
|
|
198
|
+
.sa-tf-variant-borderless.sa-tf-disabled .sa-tf-box {
|
|
199
|
+
border: 0;
|
|
200
|
+
background: transparent;
|
|
201
|
+
}
|
|
185
202
|
|
|
186
203
|
/* state: focused */
|
|
187
204
|
.sa-tf-focused.sa-tf-status-default .sa-tf-box,
|
|
@@ -217,6 +234,11 @@
|
|
|
217
234
|
.sa-tf-variant-flushed .sa-tf-box {
|
|
218
235
|
box-shadow: none !important;
|
|
219
236
|
}
|
|
237
|
+
/* Borderless must never render any border or ring — flat in every state. */
|
|
238
|
+
.sa-tf-variant-borderless .sa-tf-box {
|
|
239
|
+
border: 0 !important;
|
|
240
|
+
box-shadow: none !important;
|
|
241
|
+
}
|
|
220
242
|
.sa-tf-variant-standard.sa-tf-status-error .sa-tf-box {
|
|
221
243
|
background: var(--sa-input-bg-error-subtlest);
|
|
222
244
|
}
|
|
@@ -542,4 +564,4 @@
|
|
|
542
564
|
.sa-tf-label-inside.sa-tf-floating.sa-tf-size-xl .sa-tf-box {
|
|
543
565
|
min-height: 80px;
|
|
544
566
|
}
|
|
545
|
-
`,y=t=>t==="lg"||t==="xl"?18:16,j={default:"#505258",error:"#a4133c",success:"#208958",disable:"rgba(24, 26, 25, 0.56)"},J=(t,a)=>a?j.disable:j[t]??j.default;function bn(t){return Number(t.replace(/\./g,""))}function O(t){let a=t.replace(/[^\d]/g,"");return a=a.replace(/^0+(?=\d)/,""),a.replace(/\B(?=(\d{3})+(?!\d))/g,".")}function hn(t,a){if(a<=0)return 0;let r=0;for(let l=0;l<t.length;l++)if(/\d/.test(t[l])&&(r+=1,r===a))return l+1;return t.length}const gn=o.forwardRef(({options:t,value:a,setValue:r,isComponentVisible:l,onOptionChange:d},f)=>{const[
|
|
567
|
+
`,y=t=>t==="lg"||t==="xl"?18:16,j={default:"var(--sa-color-gray-800, #505258)",error:"var(--sa-text-error, #a4133c)",success:"var(--sa-text-success, #208958)",disable:"rgba(24, 26, 25, 0.56)"},J=(t,a)=>a?j.disable:j[t]??j.default;function bn(t){return Number(t.replace(/\./g,""))}function O(t){let a=t.replace(/[^\d]/g,"");return a=a.replace(/^0+(?=\d)/,""),a.replace(/\B(?=(\d{3})+(?!\d))/g,".")}function hn(t,a){if(a<=0)return 0;let r=0;for(let l=0;l<t.length;l++)if(/\d/.test(t[l])&&(r+=1,r===a))return l+1;return t.length}const gn=o.forwardRef(({options:t,value:a,setValue:r,isComponentVisible:l,onOptionChange:d},f)=>{const[v,V]=o.useState([]),c=o.useRef(null),u=()=>{if(f!=null&&f.current&&c.current){const g=window.innerHeight,p=f==null?void 0:f.current.getBoundingClientRect(),m=c.current.getBoundingClientRect(),z=p.bottom+m.height;c.current.style.left=`${p.left}px`,c.current.style.width=`${p.width}px`,z>=g-10?c.current.style.top=`${p.top-m.height-5}px`:c.current.style.top=`${p.top+p.height}px`}};return o.useEffect(()=>(window.addEventListener("scroll",u),window.addEventListener("resize",u),()=>{window.removeEventListener("scroll",u),window.removeEventListener("resize",u)}),[f,c]),o.useEffect(()=>{u()},[l]),o.useEffect(()=>{V((t==null?void 0:t.filter(g=>g.toLowerCase().startsWith(a.toLowerCase())))||[])},[a,t]),n.jsx("div",{ref:c,style:{position:"fixed",padding:"8px",boxSizing:"border-box",boxShadow:"0px 8px 12px 0px rgba(0, 0, 0, 0.08)",borderRadius:"8px",background:"white",overflow:"auto",zIndex:5e4},children:v==null?void 0:v.map(g=>xn(g,a,r,d))})}),xn=(t,a,r,l)=>{const d=t.toLowerCase().indexOf(a.toLowerCase());return n.jsxs("p",{style:{fontFamily:"Poppins",color:"var(--sa-color-gray-400, #b7b9be)",fontWeight:500,padding:"8px 14px",cursor:"pointer"},onClick:()=>{r(t),l&&l(t)},children:[t.slice(0,d),n.jsx("span",{style:{color:"var(--sa-text-primary, #292a2e)"},children:t.slice(d,d+a.length)}),t.slice(d+a.length)]})};function vn(t){const[a,r]=o.useState(t),l=o.useRef(null),d=f=>{l.current&&!l.current.contains(f.target)&&r(!1)};return o.useEffect(()=>(document.addEventListener("click",d,!0),()=>{document.removeEventListener("click",d,!0)}),[]),{ref:l,isComponentVisible:a,setIsComponentVisible:r}}const Q="starasia-input-styles";(t=>{if(!(typeof document>"u")&&!document.getElementById(Q)){const a=document.createElement("style");a.id=Q,a.textContent=t,document.head.appendChild(a)}})(pn);const mn=t=>n.jsxs("svg",{viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[n.jsx("circle",{cx:"8",cy:"8",r:"6.5",stroke:"currentColor",strokeWidth:"1.2"}),n.jsx("path",{d:"M5.2 8.2l1.8 1.8 3.8-4.2",stroke:"currentColor",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"})]}),wn=t=>n.jsxs("svg",{viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[n.jsx("circle",{cx:"8",cy:"8",r:"7",fill:"currentColor",opacity:"0.2"}),n.jsx("path",{d:"M5.5 5.5l5 5M10.5 5.5l-5 5",stroke:"currentColor",strokeWidth:"1.4",strokeLinecap:"round"})]}),Z=o.forwardRef((t,a)=>{const{size:r="md",variant:l="outline",status:d="default",label:f,labelPosition:v="outside-top",required:V,optional:c,description:u,helperText:g,errorText:p,leftIcon:m,rightIcon:z,leftAddons:S,rightAddons:B,onClickLeftIcon:R,onClickRightIcon:nn,fullWidth:zn=!1,highlightPlaceholder:$,currency:L,options:E,onOptionChange:Y,clearable:kn=!0,onClear:M,...s}=t,P=s.value!==void 0,[W,k]=o.useState(()=>{const e=s.value!==void 0?String(s.value??""):String(s.defaultValue??"");return L?O(e):e}),[tn,en]=o.useState(!1),[Cn,sn]=o.useState(""),C=o.useRef(null),N=o.useRef(null);o.useImperativeHandle(a,()=>N.current);const an=o.useRef(s.id??`sa-input-${Math.random().toString(36).slice(2,9)}`),{isComponentVisible:rn,ref:q,setIsComponentVisible:Nn}=vn(!1);o.useLayoutEffect(()=>{if(!P)return;const e=s.value===void 0||s.value===null?"":String(s.value),i=L?O(e):e;k(b=>b===i?b:i)},[s.value,L,P]),o.useLayoutEffect(()=>{if(C.current===null)return;const e=N.current,i=C.current;if(C.current=null,!!e)try{e.setSelectionRange(i,i)}catch{}},[W]);const I=W,D=I!==""&&I!==void 0,w=d==="disable"||s.disabled,A=w?"disable":d,H=v==="inside",In=H&&(D||tn),K=["sa-tf",`sa-tf-variant-${l}`,`sa-tf-size-${r}`,`sa-tf-status-${A}`,`sa-tf-label-${v}`,tn?"sa-tf-focused":"",w?"sa-tf-disabled":"",In?"sa-tf-floating":"",f?"":"sa-tf-no-label",zn?"sa-tf-fullwidth":""].filter(Boolean).join(" "),Sn=()=>{var e;return(e=N.current)==null?void 0:e.focus()},Bn=e=>{var cn,un;if(!L){const T=e.target.selectionStart;T!==null&&(C.current=T),k(e.target.value),(cn=s.onChange)==null||cn.call(s,e);return}const i=e.target.value;let b=i,x=e.target.selectionStart??i.length;if(Cn==="Backspace"){const T=W.replace(/\D/g,""),Tn=i.replace(/\D/g,"");T.length===Tn.length&&x>0&&(b=i.slice(0,x-1)+i.slice(x),x-=1)}const G=O(b),Dn=b.slice(0,x).replace(/\D/g,"").length,Fn=hn(G,Dn);C.current=Fn,k(G),(un=s.onChange)==null||un.call(s,{...e,target:{...e.target,value:String(bn(G)),name:e.target.name}}),sn("")},_=e=>f?n.jsxs("div",{className:e,children:[n.jsx("label",{htmlFor:an.current,style:{cursor:w?"not-allowed":"pointer"},children:f}),c?n.jsx("span",{className:"sa-tf-optional",children:"Optional"}):null,V?n.jsx("span",{className:"sa-tf-required","aria-hidden":"true",children:"*"}):null]}):null,U=n.jsxs(n.Fragment,{children:[g?n.jsx("p",{className:"sa-tf-helper",children:g}):null,p&&d==="error"?n.jsx("p",{className:"sa-tf-error",children:p}):null]}),F=(e,i)=>n.jsx("span",{className:`sa-tf-icon${i?" sa-tf-icon-clickable":""}`,onClick:i,children:o.cloneElement(e,{width:y(r),height:y(r),color:J(A,w),style:{color:J(A,w)}})}),on=d==="success"?n.jsx("span",{className:"sa-tf-icon sa-tf-success-mark","aria-hidden":"true",children:n.jsx(mn,{width:y(r),height:y(r)})}):null,Ln=e=>{var b;e.stopPropagation(),P||k("");const i={target:{value:"",name:s.name},currentTarget:{value:"",name:s.name}};(b=s.onChange)==null||b.call(s,i),M==null||M(),C.current=0,requestAnimationFrame(()=>{var x;return(x=N.current)==null?void 0:x.focus()})},ln=kn&&!w?n.jsx("button",{type:"button",className:`sa-tf-icon sa-tf-clear${D?"":" sa-tf-clear-hidden"}`,"aria-label":"Clear input","aria-hidden":!D,tabIndex:-1,onClick:Ln,onMouseDown:e=>e.preventDefault(),children:n.jsx(wn,{width:y(r),height:y(r)})}):null,En=!D&&!!s.placeholder&&!!$,dn=n.jsxs("div",{className:"sa-tf-field-wrap",children:[n.jsx("input",{...s,id:an.current,ref:N,className:"sa-tf-input",disabled:w,placeholder:$?"":s.placeholder,value:I,onFocus:e=>{var i;en(!0),Nn(!0),(i=s.onFocus)==null||i.call(s,e)},onBlur:e=>{var i;en(!1),(i=s.onBlur)==null||i.call(s,e)},onKeyDown:e=>{var i;e.key==="Backspace"&&sn(e.key),(i=s.onKeyDown)==null||i.call(s,e)},onChange:Bn}),En?yn(s.placeholder,$):null]}),fn=I&&rn&&(E!=null&&E.length)?n.jsx(gn,{options:E,value:I,setValue:k,ref:q,isComponentVisible:rn,onOptionChange:e=>{Y==null||Y(e),k(e)}}):null,X=H?n.jsxs("div",{className:"sa-tf-box",ref:q,onClick:Sn,children:[S?n.jsx("div",{className:"sa-tf-addon sa-tf-addon-left",children:S}):null,n.jsxs("div",{className:"sa-tf-box-content",children:[m?F(m,R):null,n.jsxs("div",{className:"sa-tf-inside-stack",children:[_("sa-tf-inside-label-row"),n.jsx("div",{className:"sa-tf-inside-row",children:dn})]}),ln,on,z?F(z,nn):null]}),B?n.jsx("div",{className:"sa-tf-addon sa-tf-addon-right",children:B}):null,fn]}):n.jsxs("div",{className:"sa-tf-box",ref:q,children:[S?n.jsx("div",{className:"sa-tf-addon sa-tf-addon-left",children:S}):null,n.jsxs("div",{className:"sa-tf-box-content",children:[m?F(m,R):null,dn,ln,on,z?F(z,nn):null]}),B?n.jsx("div",{className:"sa-tf-addon sa-tf-addon-right",children:B}):null,fn]});return v==="outside-left"?n.jsxs("div",{className:K,children:[n.jsxs("div",{className:"sa-tf-label-col",children:[_("sa-tf-label"),u?n.jsx("p",{className:"sa-tf-desc-top",children:u}):null]}),n.jsxs("div",{className:"sa-tf-input-col",children:[X,U]})]}):H?n.jsxs("div",{className:K,children:[X,U]}):n.jsxs("div",{className:K,children:[_("sa-tf-label"),u?n.jsx("p",{className:"sa-tf-desc-top",children:u}):null,X,U]})}),yn=(t,a)=>{if(!t)return null;if(!a)return n.jsx("p",{className:"sa-tf-placeholder",children:t});const r=t.toLowerCase().indexOf(a.toLowerCase());return r===-1?n.jsx("p",{className:"sa-tf-placeholder",children:t}):n.jsxs("p",{className:"sa-tf-placeholder",children:[t.slice(0,r),n.jsx("span",{className:"sa-tf-placeholder-highlight",children:t.slice(r,r+a.length)}),t.slice(r+a.length)]})};Z.displayName="Input",h.Input=Z,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})});
|
package/dist/types.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import { ReactElement, ReactNode } from "react";
|
|
|
2
2
|
export interface IconInputProps extends React.SVGProps<SVGSVGElement> {
|
|
3
3
|
}
|
|
4
4
|
export type InputSize = "sm" | "md" | "lg" | "xl";
|
|
5
|
-
export type InputVariant = "standard" | "outline" | "flushed";
|
|
5
|
+
export type InputVariant = "standard" | "outline" | "flushed" | "borderless";
|
|
6
6
|
export type InputStatus = "default" | "error" | "success" | "disable";
|
|
7
7
|
export type InputLabelPosition = "outside-top" | "outside-left" | "inside";
|
|
8
8
|
export interface IInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
|