sate-lib 1.76.0 → 1.78.0
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 +1 -1
- package/lib/components/text-area/text-area.d.ts +3 -4
- package/lib/components/text-area/text-area.d.ts.map +1 -1
- package/lib/components/text-area/text-area.styles_module.css +1 -1
- package/lib/components/text-field/text-field.d.ts +5 -6
- package/lib/components/text-field/text-field.d.ts.map +1 -1
- package/lib/components/text-field/text-field.js +1 -1
- package/lib/components/text-field/text-field.styles_module.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
A lightweight and modular React component library designed for modern web interfaces.
|
|
4
4
|
**SATE Lib** powers the [sate.menu](https://sate.menu) platform with reusable, scalable, and themeable UI components.
|
|
5
5
|
|
|
6
|
-
- [Demo](https://
|
|
6
|
+
- [Demo](https://lib.sate.menu)
|
|
7
7
|
- [NPM](https://www.npmjs.com/package/sate-lib)
|
|
8
8
|
|
|
9
9
|
## Tech Stack
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
export declare const getCharCount: (value: string | undefined, maxLength: number) => string;
|
|
2
|
-
interface TextAreaProps {
|
|
2
|
+
export interface TextAreaProps {
|
|
3
|
+
name?: string;
|
|
3
4
|
label?: string;
|
|
4
|
-
|
|
5
|
-
error: boolean;
|
|
5
|
+
error?: boolean;
|
|
6
6
|
placeholder?: string;
|
|
7
7
|
className?: string;
|
|
8
8
|
supportingText?: string;
|
|
@@ -15,5 +15,4 @@ interface TextAreaProps {
|
|
|
15
15
|
resize?: boolean;
|
|
16
16
|
}
|
|
17
17
|
export declare function TextArea({ name, label, placeholder, error, className, supportingText, supportingIcon, disabled, defaultValue, autoComplete, onChange, maxLength, resize, ...rest }: TextAreaProps): import("react/jsx-runtime").JSX.Element;
|
|
18
|
-
export {};
|
|
19
18
|
//# sourceMappingURL=text-area.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-area.d.ts","sourceRoot":"","sources":["../../../src/components/text-area/text-area.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,GAAG,SAAS,EAAE,WAAW,MAAM,WAGxE,CAAC;AAEF,
|
|
1
|
+
{"version":3,"file":"text-area.d.ts","sourceRoot":"","sources":["../../../src/components/text-area/text-area.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,GAAG,SAAS,EAAE,WAAW,MAAM,WAGxE,CAAC;AAEF,MAAM,WAAW,aAAa;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAC;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,wBAAgB,QAAQ,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,KAAK,EACL,SAAS,EACT,cAAc,EACd,cAAqB,EACrB,QAAQ,EACR,YAAY,EACZ,YAAoB,EACpB,QAAQ,EACR,SAAe,EACf,MAAc,EACd,GAAG,IAAI,EACP,EAAE,aAAa,2CA+Ef"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root-T3Rwwi{gap:var(--spacing-size-8,.5rem);flex-direction:column;display:flex}.container-n5Qln_{display:flex;position:relative;overflow:hidden}.label-_mNs6L{top:.875rem;left:var(--spacing-size-12,.75rem);text-overflow:ellipsis;width:100%;font-family:var(--typescale-text-field-input-font,"Golos UI");font-size:var(--typescale-text-field-input-font-size,1rem);font-style:normal;font-weight:400;line-height:var(--typescale-text-field-input-line-height,1.25rem);color:var(--color-interactive-primary,#646464);letter-spacing:var(--typescale-text-field-input-letter-spacing,-.0125rem);text-wrap:nowrap;pointer-events:none;transform-origin:0 0;padding-right:1rem;transition:transform .2s ease-in-out,font-size .2s ease-in-out,line-height .2s ease-in-out,top .2s ease-in-out;position:absolute;overflow:hidden}.container-n5Qln_:focus-within .label-_mNs6L,.filled-VPuHVw .label-_mNs6L{font-size:var(--typescale-text-field-label-font-size,.75rem);line-height:var(--typescale-text-field-label-line-height,.875rem);top:.4375rem}.textArea-gndPPt{width:100%;min-height:6rem;padding:1.31rem var(--spacing-size-24,1.5rem).625rem var(--spacing-size-12,.75rem);font-family:var(--typescale-text-field-input-font,"Golos UI");font-size:var(--typescale-text-field-input-font-size,1rem);font-style:normal;font-weight:400;line-height:var(--typescale-text-field-input-line-height,1.25rem);color:var(--color-content-primary,#202020);letter-spacing:var(--typescale-text-field-input-letter-spacing,-.0125rem);resize:vertical;outline-offset:-2px;background:color-mix(in srgb,var(--color-background-input-secondary,#0000000a)4%,transparent);border-radius:var(--radius-radii-14,.875rem);box-shadow:inset 0 0 1px 0 color-mix(in srgb,var(--color-shadow-inner,#202020)14%,transparent);border:0;outline:2px solid #0000;flex-direction:column;justify-content:center;align-self:stretch;align-items:flex-start;gap:.5rem;transition:outline .2s ease-in-out;display:flex;&::-webkit-resizer{display:none}&:focus-visible{outline:2px solid var(--color-interactive-primary,#646464)}}.container-n5Qln_:not(:has(.label-_mNs6L)){& .textArea-gndPPt{padding:.875rem var(--spacing-size-24,1.5rem).625rem var(--spacing-size-12,.75rem)}}.handle-NwKya6{right:var(--spacing-size-4,.25rem);bottom:var(--spacing-size-4,.25rem);position:absolute}.resize-OoojW3{& textarea{resize:none}}.supportingTextContainer-Uc3rlw{gap:var(--spacing-size-8,.5rem);justify-content:space-between;align-items:flex-start;display:flex}.supportText-BUMRVx{gap:var(--spacing-size-8,.5rem);display:flex}.counter-QwHB4k{margin-left:auto}.disabled-ngZ0PN{pointer-events:none;opacity:.38}.error-_6v7UT{& .label-_mNs6L,& .supportText-BUMRVx{color:var(--color-sentiment-negative-primary,#c62a2f)}& .textArea-gndPPt{outline-color:var(--color-sentiment-negative-primary,#c62a2f);background:var(--color-sentiment-negative-secondary,#ffe5e5)}}
|
|
1
|
+
.root-T3Rwwi{gap:var(--spacing-size-8,.5rem);flex-direction:column;display:flex}.container-n5Qln_{display:flex;position:relative;overflow:hidden}.label-_mNs6L{top:.875rem;left:var(--spacing-size-12,.75rem);text-overflow:ellipsis;width:100%;font-family:var(--typescale-text-field-input-font,"Golos UI");font-size:var(--typescale-text-field-input-font-size,1rem);font-style:normal;font-weight:400;line-height:var(--typescale-text-field-input-line-height,1.25rem);color:var(--color-interactive-primary,#646464);letter-spacing:var(--typescale-text-field-input-letter-spacing,-.0125rem);text-wrap:nowrap;pointer-events:none;transform-origin:0 0;padding-right:1rem;transition:transform .2s ease-in-out,font-size .2s ease-in-out,line-height .2s ease-in-out,top .2s ease-in-out,color .2s ease-in-out;position:absolute;overflow:hidden}.container-n5Qln_:focus-within .label-_mNs6L,.filled-VPuHVw .label-_mNs6L{font-size:var(--typescale-text-field-label-font-size,.75rem);line-height:var(--typescale-text-field-label-line-height,.875rem);top:.4375rem}.textArea-gndPPt{width:100%;min-height:6rem;padding:1.31rem var(--spacing-size-24,1.5rem).625rem var(--spacing-size-12,.75rem);font-family:var(--typescale-text-field-input-font,"Golos UI");font-size:var(--typescale-text-field-input-font-size,1rem);font-style:normal;font-weight:400;line-height:var(--typescale-text-field-input-line-height,1.25rem);color:var(--color-content-primary,#202020);letter-spacing:var(--typescale-text-field-input-letter-spacing,-.0125rem);resize:vertical;outline-offset:-2px;background-color:color-mix(in srgb,var(--color-background-input-secondary,#0000000a)4%,transparent);border-radius:var(--radius-radii-14,.875rem);box-shadow:inset 0 0 1px 0 color-mix(in srgb,var(--color-shadow-inner,#202020)14%,transparent);border:0;outline:2px solid #0000;flex-direction:column;justify-content:center;align-self:stretch;align-items:flex-start;gap:.5rem;transition:outline-color .2s ease-in-out,background-color .2s ease-in-out,color .2s ease-in-out;display:flex;&::-webkit-resizer{display:none}&:focus-visible{outline:2px solid var(--color-interactive-primary,#646464)}}.container-n5Qln_:not(:has(.label-_mNs6L)){& .textArea-gndPPt{padding:.875rem var(--spacing-size-24,1.5rem).625rem var(--spacing-size-12,.75rem)}}.handle-NwKya6{right:var(--spacing-size-4,.25rem);bottom:var(--spacing-size-4,.25rem);position:absolute}.resize-OoojW3{& textarea{resize:none}}.supportingTextContainer-Uc3rlw{gap:var(--spacing-size-8,.5rem);justify-content:space-between;align-items:flex-start;display:flex}.supportText-BUMRVx{gap:var(--spacing-size-8,.5rem);display:flex}.counter-QwHB4k{margin-left:auto}.disabled-ngZ0PN{pointer-events:none;opacity:.38}.error-_6v7UT{& .label-_mNs6L,& .supportText-BUMRVx{color:var(--color-sentiment-negative-primary,#c62a2f)}& .textArea-gndPPt{outline-color:var(--color-sentiment-negative-primary,#c62a2f);background-color:var(--color-sentiment-negative-secondary,#ffe5e5)}}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
interface TextFieldProps {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
export interface TextFieldProps {
|
|
2
|
+
name?: string;
|
|
3
|
+
type?: "text" | "password";
|
|
4
|
+
variant?: "default" | "currency";
|
|
5
|
+
label?: string;
|
|
6
6
|
error?: boolean;
|
|
7
7
|
placeholder?: string;
|
|
8
8
|
className?: string;
|
|
@@ -16,5 +16,4 @@ interface TextFieldProps {
|
|
|
16
16
|
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
17
17
|
}
|
|
18
18
|
export declare function TextField({ type, variant, name, label, placeholder, error, className, supportingText, supportingIcon, tailingIcon, tailingIconHandle, disabled, defaultValue, autoComplete, onChange, ...rest }: TextFieldProps): import("react/jsx-runtime").JSX.Element;
|
|
19
|
-
export {};
|
|
20
19
|
//# sourceMappingURL=text-field.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../../src/components/text-field/text-field.tsx"],"names":[],"mappings":"AAMA,
|
|
1
|
+
{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../../src/components/text-field/text-field.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,cAAc;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC3B,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC5D;AAED,wBAAgB,SAAS,CAAC,EACzB,IAAa,EACb,OAAmB,EACnB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,KAAK,EACL,SAAS,EACT,cAAc,EACd,cAAqB,EACrB,WAAmB,EACnB,iBAAiB,EACjB,QAAQ,EACR,YAAY,EACZ,YAAoB,EACpB,QAAQ,EACR,GAAG,IAAI,EACP,EAAE,cAAc,2CAmGhB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useId as
|
|
1
|
+
import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useId as l,useState as r}from"react";import{ButtonIcon as i}from"../button/button-icon.js";import{Icon as o}from"../icon/icon.js";import{Typography as t}from"../typography/typography.js";import n from"./text-field.styles.module.js";function s({type:s="text",variant:d="default",name:c,label:p,placeholder:m,error:f,className:u,supportingText:h,supportingIcon:y=!0,tailingIcon:b=!1,tailingIconHandle:x,disabled:g,defaultValue:v,autoComplete:j="off",onChange:w,...C}){let[N,k]=r(v??""),[z,I]=r(!1),S=l(),B=N.length>0,E=[n.root,g&&n.disabled,f&&n.error,u].filter(Boolean).join(" "),F=[n.container,(B||!!m)&&n.filled].filter(Boolean).join(" "),M="password"===s?z?"text":"password":s,T="password"!==s&&b&&!!x,H="password"===s?e(i,{"aria-label":z?"Hide password":"Show password","aria-pressed":z,disabled:g,icon:z?"EyeSlash":"Eye",onClick:()=>I(e=>!e),size:"small",variant:"text"}):T?e(i,{"aria-label":"More information",disabled:g,icon:"Info",onClick:x,size:"small",variant:"text"}):null;return a("div",{className:E,children:[a("div",{className:F,children:[e("label",{className:n.label,htmlFor:S,children:p}),"currency"===d&&e("span",{className:n.currency,children:"\xa3"}),e("input",{autoComplete:j,className:n.input,disabled:g,id:S,inputMode:"currency"===d?"decimal":"text",name:c,onChange:e=>{k(e.target.value),w?.(e)},placeholder:m,spellCheck:"false",type:M,value:N,...C}),H&&e("div",{className:n.tailingIcon,children:H})]}),h&&a(t,{as:"span",className:n.supportingTextContainer,palette:"grey",variant:"bodySmall",children:[y&&e("span",{children:e(o,{"aria-hidden":"true",name:f?"WarningCircle-fill":"Info",size:16})}),h]})]})}export{s as TextField};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root-b_WUZD{gap:var(--spacing-size-8,.5rem);flex-direction:column;display:flex}.container-QdDXv1{display:flex;position:relative;overflow:hidden}.label-SxSg48{top:.88rem;left:var(--spacing-size-12,.75rem);text-overflow:ellipsis;width:100%;font-family:var(--typescale-text-field-input-font,"Golos UI");font-size:var(--typescale-text-field-input-font-size,1rem);font-style:normal;font-weight:400;line-height:var(--typescale-text-field-input-line-height,1.25rem);color:var(--color-interactive-primary,#646464);letter-spacing:var(--typescale-text-field-input-letter-spacing,-.0125rem);text-wrap:nowrap;pointer-events:none;transform-origin:0 0;padding-right:1rem;transition:transform .2s ease-in-out,font-size .2s ease-in-out,line-height .2s ease-in-out,top .2s ease-in-out;position:absolute;overflow:hidden}.currency-atzAmT{top:1.3rem;left:var(--spacing-size-12,.75rem);visibility:hidden;color:var(--color-interactive-primary,#646464);opacity:0;transition:opacity .2s ease-in-out;position:absolute}.container-QdDXv1:focus-within .label-SxSg48,.filled-mQaws2 .label-SxSg48{font-size:var(--typescale-text-field-label-font-size,.75rem);line-height:var(--typescale-text-field-label-line-height,.875rem);top:.44rem}.container-QdDXv1:focus-within .currency-atzAmT,.filled-mQaws2 .currency-atzAmT{visibility:visible;opacity:1;transition-delay:.1s}.input-xq2uyS{width:100%;height:3rem;padding:1.31rem var(--spacing-size-8,.5rem).44rem var(--spacing-size-12,.75rem);color:var(--color-content-primary,#202020);outline-offset:-2px;background:color-mix(in srgb,var(--color-background-input-secondary,#0000000a)4%,transparent);border-radius:var(--radius-radii-14,.875rem);box-shadow:inset 0 0 1px 0 color-mix(in srgb,var(--color-shadow-inner,#202020)14%,transparent);border:0;outline:2px solid #0000;flex-direction:column;justify-content:center;align-self:stretch;align-items:flex-start;gap:.5rem;transition:outline .2s ease-in-out;display:flex;&::-webkit-resizer{display:none}&:focus-visible{outline:2px solid var(--color-interactive-primary,#646464)}}.input-xq2uyS,.currency-atzAmT{font-family:var(--typescale-text-field-input-font,"Golos UI");font-size:var(--typescale-text-field-input-font-size,1rem);font-style:normal;font-weight:400;line-height:var(--typescale-text-field-input-line-height,1.25rem);letter-spacing:var(--typescale-text-field-input-letter-spacing,-.0125rem)}.tailingIcon-huRyq6{top:50%;right:calc(var(--spacing-size-8,.5rem) + .31rem);background-color:#0000;display:flex;position:absolute;transform:translateY(-50%)}.container-QdDXv1:has(.tailingIcon-huRyq6){& .input-xq2uyS{padding-right:2.75rem}}.container-QdDXv1:has(.currency-atzAmT){& .input-xq2uyS{padding-left:1.56rem}}.supportingTextContainer-KGtwwo{gap:var(--spacing-size-8,.5rem);display:flex}.disabled-KXxWok{pointer-events:none;opacity:.38}.error-O6jLhD{& .label-SxSg48,& .supportingTextContainer-KGtwwo{color:var(--color-sentiment-negative-primary,#c62a2f)}& .input-xq2uyS{outline-color:var(--color-sentiment-negative-primary,#c62a2f);background:var(--color-sentiment-negative-secondary,#ffe5e5)}}
|
|
1
|
+
.root-b_WUZD{gap:var(--spacing-size-8,.5rem);flex-direction:column;display:flex}.container-QdDXv1{display:flex;position:relative;overflow:hidden}.label-SxSg48{top:.88rem;left:var(--spacing-size-12,.75rem);text-overflow:ellipsis;width:100%;font-family:var(--typescale-text-field-input-font,"Golos UI");font-size:var(--typescale-text-field-input-font-size,1rem);font-style:normal;font-weight:400;line-height:var(--typescale-text-field-input-line-height,1.25rem);color:var(--color-interactive-primary,#646464);letter-spacing:var(--typescale-text-field-input-letter-spacing,-.0125rem);text-wrap:nowrap;pointer-events:none;transform-origin:0 0;padding-right:1rem;transition:transform .2s ease-in-out,font-size .2s ease-in-out,line-height .2s ease-in-out,top .2s ease-in-out,color .2s ease-in-out;position:absolute;overflow:hidden}.currency-atzAmT{top:1.3rem;left:var(--spacing-size-12,.75rem);visibility:hidden;color:var(--color-interactive-primary,#646464);opacity:0;transition:opacity .2s ease-in-out;position:absolute}.container-QdDXv1:focus-within .label-SxSg48,.filled-mQaws2 .label-SxSg48{font-size:var(--typescale-text-field-label-font-size,.75rem);line-height:var(--typescale-text-field-label-line-height,.875rem);top:.44rem}.container-QdDXv1:focus-within .currency-atzAmT,.filled-mQaws2 .currency-atzAmT{visibility:visible;opacity:1;transition-delay:.1s}.input-xq2uyS{width:100%;height:3rem;padding:1.31rem var(--spacing-size-8,.5rem).44rem var(--spacing-size-12,.75rem);color:var(--color-content-primary,#202020);outline-offset:-2px;background-color:color-mix(in srgb,var(--color-background-input-secondary,#0000000a)4%,transparent);border-radius:var(--radius-radii-14,.875rem);box-shadow:inset 0 0 1px 0 color-mix(in srgb,var(--color-shadow-inner,#202020)14%,transparent);border:0;outline:2px solid #0000;flex-direction:column;justify-content:center;align-self:stretch;align-items:flex-start;gap:.5rem;transition:outline-color .2s ease-in-out,background-color .2s ease-in-out,color .2s ease-in-out;display:flex;&::-webkit-resizer{display:none}&:focus-visible{outline:2px solid var(--color-interactive-primary,#646464)}}.input-xq2uyS,.currency-atzAmT{font-family:var(--typescale-text-field-input-font,"Golos UI");font-size:var(--typescale-text-field-input-font-size,1rem);font-style:normal;font-weight:400;line-height:var(--typescale-text-field-input-line-height,1.25rem);letter-spacing:var(--typescale-text-field-input-letter-spacing,-.0125rem)}.tailingIcon-huRyq6{top:50%;right:calc(var(--spacing-size-8,.5rem) + .31rem);background-color:#0000;display:flex;position:absolute;transform:translateY(-50%)}.container-QdDXv1:has(.tailingIcon-huRyq6){& .input-xq2uyS{padding-right:2.75rem}}.container-QdDXv1:has(.currency-atzAmT){& .input-xq2uyS{padding-left:1.56rem}}.supportingTextContainer-KGtwwo{gap:var(--spacing-size-8,.5rem);display:flex}.disabled-KXxWok{pointer-events:none;opacity:.38}.error-O6jLhD{& .label-SxSg48,& .supportingTextContainer-KGtwwo{color:var(--color-sentiment-negative-primary,#c62a2f)}& .input-xq2uyS{outline-color:var(--color-sentiment-negative-primary,#c62a2f);background-color:var(--color-sentiment-negative-secondary,#ffe5e5)}}
|