sate-lib 1.80.0 → 1.82.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/lib/assets/styles/reset.css +1 -1
- package/lib/components/button/button.styles_module.css +1 -1
- package/lib/components/filter-chip/filter-chip.styles_module.css +1 -1
- package/lib/components/segmented-control/segmented-control.styles_module.css +1 -1
- package/lib/components/tabs/tabs.styles_module.css +1 -1
- package/lib/components/text-field/text-field.d.ts +3 -1
- 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.js +1 -1
- package/lib/components/text-field/text-field.styles_module.css +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
*,:before,:after{box-sizing:border-box}*{scrollbar-width:thin;margin:0;padding:0}@supports (scrollbar-color:auto){*{scrollbar-color:#d0d0d0 #f9f9f6}}html{scroll-behavior:smooth}
|
|
1
|
+
*,:before,:after{box-sizing:border-box}*{scrollbar-width:thin;margin:0;padding:0}@supports (scrollbar-color:auto){*{scrollbar-color:#d0d0d0 #f9f9f6}}html{scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Golos UI,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}button{cursor:pointer;border-color:#0000}a{text-decoration:none}button,a{color:inherit;outline:none;transition:box-shadow .2s ease-in-out;&:focus-visible{box-shadow:0 0 0 2px var(--color-background-screen,#fff0),0 0 0 4px var(--color-content-primary,#202020)}}fieldset{border-color:#0000}img{max-width:100%;display:block}h1,h2,h3,h4,h5,h6{text-wrap:balance}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.button-dWV52U{
|
|
1
|
+
.button-dWV52U{border-radius:var(--radius-radii-14,.875rem);will-change:transform;border:0;justify-content:center;align-items:center;text-decoration:none;transition:transform .2s ease-in-out,color .2s ease-in-out,outline .2s ease-in-out,background-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out;display:flex;position:relative;transform:scale(1);&:focus-visible{box-shadow:0 0 0 2px var(--color-background-screen,#fff0),0 0 0 4px var(--color-content-primary,#202020)}}.buttonIcon-oaPhS4{border-radius:50%}.directionRight-kW0Joo{flex-direction:row-reverse}.button-dWV52U.disabled-or6BkM{pointer-events:none;opacity:.38}.filled-FpNFjd{color:var(--color-interactive-control,#fff);background-color:var(--color-interactive-accent,#202020);position:relative;overflow:hidden}.filled-FpNFjd .noise-pBMZ6I{z-index:-1;pointer-events:none;width:100%;min-width:170px;transition:opacity .2s ease-in-out;position:absolute;top:0;left:0}.filled-FpNFjd:hover{background-color:var(--color-interactive-accent-hover,#000)}.filled-FpNFjd:hover .noise-pBMZ6I,.filled-FpNFjd:active .noise-pBMZ6I{opacity:.9}.filled-FpNFjd:active{background-color:var(--color-interactive-accent-active,#202020)}.outlined-QtvRsh{color:var(--color-interactive-primary,#646464);outline:1px solid color-mix(in srgb,var(--color-interactive-secondary,#0000002b)17%,transparent);outline-offset:-1px;background-color:#0000;&:hover{background-color:color-mix(in srgb,var(--color-background-screen-hover,#0000000a)4%,transparent)}&:active{background-color:color-mix(in srgb,var(--color-background-screen-active,#0000000a)4%,transparent)}}.text-qf5rbY{color:var(--color-interactive-primary,#646464);background-color:#0000;&:hover,&:active{background-color:color-mix(in srgb,var(--color-background-screen-hover,#0000000a)4%,transparent)}}.toned-yMdhhl{color:var(--color-interactive-primary,#646464);background-color:color-mix(in srgb,var(--color-background-neutral,#0000000a)4%,transparent);&:hover,&:active{background-color:color-mix(in srgb,var(--color-background-neutral-hover,#00000014)8%,transparent)}&:focus-visible{background-color:#fff0}}.lightOnContent-ZxiAH4{color:var(--color-fixed-content-on-light,#202020);background-color:color-mix(in srgb,var(--color-fixed-elevated-light,#ffffffe0)88%,transparent);backdrop-filter:blur(8px);&:hover{background-color:color-mix(in srgb,var(--color-fixed-elevated-light-hover,#fffffff5)96%,transparent)}&:active{background-color:color-mix(in srgb,var(--color-fixed-elevated-light-active,#ffffffe0)88%,transparent)}}.darkOnContent-gXMY2B{color:var(--color-fixed-content-on-dark,#fff);background-color:color-mix(in srgb,var(--color-fixed-elevated-dark,#0000009e)62%,transparent);backdrop-filter:blur(8px);&:hover{background-color:color-mix(in srgb,var(--color-fixed-elevated-dark-hover,#000000bd)74%,transparent)}&:active{background-color:color-mix(in srgb,var(--color-fixed-elevated-dark-active,#0000009e)62%,transparent)}}.small-uxUptY{gap:var(--spacing-size-4,.25rem);padding:var(--spacing-size-6,.375rem)var(--spacing-size-12,.75rem);&:active{transform:scale(.92)}}.small-uxUptY.icon-EPzHvF{padding:var(--spacing-size-6,.375rem)var(--spacing-size-12,.75rem)var(--spacing-size-6,.375rem)var(--spacing-size-8,.5rem)}.small-uxUptY.directionRight-kW0Joo{padding:var(--spacing-size-6,.375rem)var(--spacing-size-8,.5rem)var(--spacing-size-6,.375rem)var(--spacing-size-12,.75rem)}.medium-iwhjuP{gap:var(--spacing-size-4,.25rem);padding:var(--spacing-size-8,.5rem)var(--spacing-size-16,1rem);&:active{transform:scale(.96)}}.medium-iwhjuP.icon-EPzHvF{padding:var(--spacing-size-8,.5rem)var(--spacing-size-16,1rem)var(--spacing-size-8,.5rem)var(--spacing-size-8,.5rem)}.medium-iwhjuP.directionRight-kW0Joo{padding:var(--spacing-size-8,.5rem)var(--spacing-size-8,.5rem)var(--spacing-size-8,.5rem)var(--spacing-size-16,1rem)}.large-N1qL9e{gap:var(--spacing-size-8,.5rem);padding:var(--spacing-size-12,.75rem)var(--spacing-size-24,1.5rem);&:active{transform:scale(.96)}}.large-N1qL9e.icon-EPzHvF{padding:var(--spacing-size-12,.75rem)var(--spacing-size-24,1.5rem)var(--spacing-size-12,.75rem)var(--spacing-size-16,1rem)}.large-N1qL9e.directionRight-kW0Joo{padding:var(--spacing-size-12,.75rem)var(--spacing-size-16,1rem)var(--spacing-size-12,.75rem)var(--spacing-size-24,1.5rem);padding-inline-end:var(--spacing-size-16,1rem)}.icon-xSmall-m4F4Zf{width:1.5rem;height:1.5rem;&:active{transform:scale(.92)}}.icon-small-XGYMxY{width:2rem;height:2rem;&:active{transform:scale(.92)}}.icon-medium-UoYPBj{width:2.5rem;height:2.5rem;&:active{transform:scale(.96)}}.indicator-XuVE2f{visibility:hidden;opacity:0;transition:opacity .3s ease-in-out;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.label-ju16m4,.icon-EPzHvF{visibility:visible;opacity:1;transition:opacity .3s ease-in-out}.loading-BHYlLw{pointer-events:none;& .indicator-XuVE2f{visibility:visible;opacity:1}& .label-ju16m4,& .icon-EPzHvF{visibility:hidden;opacity:0}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root-uRpYCn{flex-wrap:wrap;gap:.5rem;display:flex}.item-jeQt6W{all:unset;color:var(--color-content-primary,#202020);cursor:pointer;user-select:none;outline-offset:-2px;border-radius:var(--radius-radii-full,62.5rem);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-interactive-secondary)17%,transparent);justify-content:center;align-items:center;transition:transform .2s ease-in-out,outline .
|
|
1
|
+
.root-uRpYCn{flex-wrap:wrap;gap:.5rem;display:flex}.item-jeQt6W{all:unset;color:var(--color-content-primary,#202020);cursor:pointer;user-select:none;outline-offset:-2px;border-radius:var(--radius-radii-full,62.5rem);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-interactive-secondary)17%,transparent);will-change:transform;outline:2px solid #0000;justify-content:center;align-items:center;transition:transform .2s ease-in-out,outline .2s ease-in-out,border .2s ease-in-out,box-shadow .2s ease-in-out,background-color .2s ease-in-out,opacity .2s ease-in-out;display:flex;transform:scale(1);&:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-interactive-secondary-hover)45%,transparent)}&:active{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-interactive-secondary-active)88%,transparent)}&:focus-visible{background-color:var(--color-background-screen,#fdfdf9);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-interactive-secondary)17%,transparent),0 0 0 2px var(--color-background-screen,#fdfdf9),0 0 0 4px var(--color-content-primary,#202020)}&:disabled{pointer-events:none;opacity:.38}}.medium-BI_kmg{gap:var(--spacing-size-8,.5rem);padding:var(--spacing-size-8,.5rem)var(--spacing-size-16,1rem)}.medium-BI_kmg:active{transform:scale(.96)}.small-kECRMe{gap:var(--spacing-size-4,.25rem);padding:var(--spacing-size-6,.375rem)var(--spacing-size-12,.75rem)}.small-kECRMe:active{transform:scale(.96)}.medium-BI_kmg.hasIcon-TvpyCQ{padding-inline-start:var(--spacing-size-12,.75rem)}.small-kECRMe.hasIcon-TvpyCQ{padding-inline-start:var(--spacing-size-8,.5rem)}.selected-qNAROD{outline-color:color-mix(in srgb,var(--color-interactive-secondary-active)88%,transparent);background-color:color-mix(in srgb,var(--color-background-neutral)4%,transparent);&:hover{background-color:color-mix(in srgb,var(--color-background-neutral-hover)8%,transparent)}&:active{background-color:color-mix(in srgb,var(--color-background-neutral-active)8%,transparent)}&:focus-visible{background-color:color-mix(in srgb,var(--color-background-neutral)4%,transparent)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root-ZurdY9{padding:var(--spacing-size-4,.25rem);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;align-items:center;display:flex}.item-KyXK8s{color:var(--color-interactive-primary,#646464);cursor:pointer;border-radius:var(--radius-radii-10,.625rem);border:none;position:relative}.item-KyXK8s:not(:first-child):before{content:"";background-color:color-mix(in srgb,var(--color-border-overlay)11%,transparent);border-radius:var(--radius-radii-full,62.5rem);width:.0625rem;height:1rem;transition:opacity .2s ease-in-out;position:absolute;top:50%;left:0;transform:translateY(-50%)}.item-KyXK8s:has(.itemInput-qor_CK:checked):before,.item-KyXK8s:has(.itemInput-qor_CK:checked)+.item-KyXK8s:before{opacity:0}.itemLabel-hLhyLk{cursor:pointer;border-radius:var(--radius-radii-10,.625rem);background-color:#0000;
|
|
1
|
+
.root-ZurdY9{padding:var(--spacing-size-4,.25rem);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;align-items:center;display:flex}.item-KyXK8s{color:var(--color-interactive-primary,#646464);cursor:pointer;border-radius:var(--radius-radii-10,.625rem);border:none;position:relative}.item-KyXK8s:not(:first-child):before{content:"";background-color:color-mix(in srgb,var(--color-border-overlay)11%,transparent);border-radius:var(--radius-radii-full,62.5rem);width:.0625rem;height:1rem;transition:opacity .2s ease-in-out;position:absolute;top:50%;left:0;transform:translateY(-50%)}.item-KyXK8s:has(.itemInput-qor_CK:checked):before,.item-KyXK8s:has(.itemInput-qor_CK:checked)+.item-KyXK8s:before{opacity:0}.itemLabel-hLhyLk{cursor:pointer;border-radius:var(--radius-radii-10,.625rem);background-color:#0000;align-items:center;gap:.25rem;padding-block:.375rem;padding-inline:1rem;transition:color .2s ease-in-out,background-color .2s ease-in-out,box-shadow .2s ease-in-out;display:flex;position:relative;&:hover{color:var(--color-interactive-primary-hover,#202020)}}.itemLabel-hLhyLk:after{pointer-events:none;content:"";border:2px solid var(--color-content-primary,#202020);border-radius:inherit;opacity:0;transition:opacity .2s ease-in-out,transform .2s ease-in-out;position:absolute;inset:-2px;transform:scale(.98)}.withIcon-bg61Z_{padding-left:.5rem}.itemInput-qor_CK:checked+.itemLabel-hLhyLk{color:var(--color-interactive-accent,#202020);background-color:var(--color-background-elevated,#fdfdf9);box-shadow:var(--box-shadow-2);font-weight:500}.itemInput-qor_CK:focus-visible+.itemLabel-hLhyLk:after{opacity:1;transform:scale(1)}.itemInput-qor_CK{white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.disabled-enBWjG{pointer-events:none;opacity:.38}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root-wFb9L4{border:0;display:flex;position:relative}.legend-t_QXe1{clip:rect(0 0 0 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.input-s2hjvj{pointer-events:none;opacity:0;position:absolute}.item-gtuTCb{all:unset;padding:var(--spacing-size-8,.5rem);color:var(--color-content-tertiary,gray);white-space:nowrap;cursor:pointer;user-select:none;border-radius:0;transition:font-weight .1s ease-in-out,color .2s ease-in-out,background-color .2s ease-in-out,opacity .2s ease-in-out,transform .2s ease-in-out}.item-gtuTCb:hover{color:var(--color-content-primary,#202020)}.itemWrap-irLkGn{box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--color-border-overlay,#000)15%,transparent);transition:box-shadow .2s ease-in-out;display:flex}.input-s2hjvj:checked+.item-gtuTCb{color:var(--color-content-primary,#202020);font-weight:500}.itemWrap-irLkGn:has(.input-s2hjvj:checked){box-shadow:inset 0 -2px 0 var(--color-content-primary,#202020)}.itemWrap-irLkGn:has(.input-s2hjvj:focus-visible){box-shadow:inset 0 0 0 2px var(--color-background-screen,#fdfdf9),0 0 0 2px var(--color-content-primary,#202020)}.input-s2hjvj:disabled+.item-gtuTCb{pointer-events:none;opacity:.38}.root-wFb9L4[data-size=medium] .item-gtuTCb{padding:var(--spacing-size-10,.625rem)var(--spacing-size-16,1rem)}.root-wFb9L4[data-size=small] .item-gtuTCb{padding:var(--spacing-size-8,.5rem)}.root-wFb9L4[data-size=medium] .item-gtuTCb:active{transform:scale(.96)}.root-wFb9L4[data-size=small] .item-gtuTCb:active{transform:scale(.92)}
|
|
1
|
+
.root-wFb9L4{border:0;display:flex;position:relative}.legend-t_QXe1{clip:rect(0 0 0 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.input-s2hjvj{pointer-events:none;opacity:0;position:absolute}.item-gtuTCb{all:unset;padding:var(--spacing-size-8,.5rem);color:var(--color-content-tertiary,gray);white-space:nowrap;cursor:pointer;user-select:none;will-change:transform;border-radius:0;transition:font-weight .1s ease-in-out,color .2s ease-in-out,background-color .2s ease-in-out,opacity .2s ease-in-out,transform .2s ease-in-out}.item-gtuTCb:hover{color:var(--color-content-primary,#202020)}.itemWrap-irLkGn{box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--color-border-overlay,#000)15%,transparent);transition:box-shadow .2s ease-in-out;display:flex}.input-s2hjvj:checked+.item-gtuTCb{color:var(--color-content-primary,#202020);font-weight:500}.itemWrap-irLkGn:has(.input-s2hjvj:checked){box-shadow:inset 0 -2px 0 var(--color-content-primary,#202020)}.itemWrap-irLkGn:has(.input-s2hjvj:focus-visible){box-shadow:inset 0 0 0 2px var(--color-background-screen,#fdfdf9),0 0 0 2px var(--color-content-primary,#202020)}.input-s2hjvj:disabled+.item-gtuTCb{pointer-events:none;opacity:.38}.root-wFb9L4[data-size=medium] .item-gtuTCb{padding:var(--spacing-size-10,.625rem)var(--spacing-size-16,1rem)}.root-wFb9L4[data-size=small] .item-gtuTCb{padding:var(--spacing-size-8,.5rem)}.root-wFb9L4[data-size=medium] .item-gtuTCb:active{transform:scale(.96)}.root-wFb9L4[data-size=small] .item-gtuTCb:active{transform:scale(.92)}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
export type FieldShape = "all" | "none" | "top" | "bottom" | "left" | "right" | "top_left" | "top_right" | "bottom_left" | "bottom_right";
|
|
1
2
|
export interface TextFieldProps {
|
|
2
3
|
name?: string;
|
|
3
4
|
type?: "text" | "password";
|
|
@@ -14,6 +15,7 @@ export interface TextFieldProps {
|
|
|
14
15
|
defaultValue?: string;
|
|
15
16
|
autoComplete?: "on" | "off";
|
|
16
17
|
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
18
|
+
shape?: FieldShape;
|
|
17
19
|
}
|
|
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;
|
|
20
|
+
export declare function TextField({ type, variant, name, label, placeholder, error, className, supportingText, supportingIcon, tailingIcon, tailingIconHandle, disabled, defaultValue, autoComplete, onChange, shape, ...rest }: TextFieldProps): import("react/jsx-runtime").JSX.Element;
|
|
19
21
|
//# 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,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;
|
|
1
|
+
{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../../src/components/text-field/text-field.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,UAAU,GACnB,KAAK,GACL,MAAM,GACN,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,CAAC;AAElB,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;IAC5D,KAAK,CAAC,EAAE,UAAU,CAAC;CACnB;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,KAAa,EACb,GAAG,IAAI,EACP,EAAE,cAAc,2CAqGhB"}
|
|
@@ -1 +1 @@
|
|
|
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,...
|
|
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,shape:C="all",...N}){let[k,z]=r(v??""),[I,S]=r(!1),$=l(),B=k.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?I?"text":"password":s,T="password"!==s&&b&&!!x,H="password"===s?e(i,{"aria-label":I?"Hide password":"Show password","aria-pressed":I,disabled:g,icon:I?"EyeSlash":"Eye",onClick:()=>S(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:[p&&e("label",{className:n.label,htmlFor:$,children:p}),"currency"===d&&e("span",{className:n.currency,children:"\xa3"}),e("input",{autoComplete:j,className:`${n.input} ${n[`shape-${C}`]}`,disabled:g,id:$,inputMode:"currency"===d?"decimal":"text",name:c,onChange:e=>{z(e.target.value),w?.(e)},placeholder:m,spellCheck:"false",type:M,value:k,...N}),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
|
-
import"./text-field.styles_module.css";let e={root:"root-b_WUZD",container:"container-QdDXv1",label:"label-SxSg48",currency:"currency-atzAmT",filled:"filled-mQaws2",input:"input-xq2uyS",tailingIcon:"tailingIcon-huRyq6",supportingTextContainer:"supportingTextContainer-KGtwwo",disabled:"disabled-KXxWok",error:"error-O6jLhD"};export{e as default};
|
|
1
|
+
import"./text-field.styles_module.css";let e={root:"root-b_WUZD",container:"container-QdDXv1",label:"label-SxSg48",currency:"currency-atzAmT",filled:"filled-mQaws2",input:"input-xq2uyS",tailingIcon:"tailingIcon-huRyq6",supportingTextContainer:"supportingTextContainer-KGtwwo",disabled:"disabled-KXxWok",error:"error-O6jLhD","shape-all":"shape-all-joZoe_",shapeAll:"shape-all-joZoe_","shape-none":"shape-none-XTJ9oh",shapeNone:"shape-none-XTJ9oh","shape-top":"shape-top-EeRKOf",shapeTop:"shape-top-EeRKOf","shape-bottom":"shape-bottom-OkBYlk",shapeBottom:"shape-bottom-OkBYlk","shape-left":"shape-left-KAUAg3",shapeLeft:"shape-left-KAUAg3","shape-right":"shape-right-Cp3obn",shapeRight:"shape-right-Cp3obn","shape-top_left":"shape-top_left-Yjjnxs",shapeTopLeft:"shape-top_left-Yjjnxs","shape-top_right":"shape-top_right-FZd6d5",shapeTopRight:"shape-top_right-FZd6d5","shape-bottom_left":"shape-bottom_left-OTZF7_",shapeBottomLeft:"shape-bottom_left-OTZF7_","shape-bottom_right":"shape-bottom_right-93OhnN",shapeBottomRight:"shape-bottom_right-93OhnN"};export{e as default};
|
|
@@ -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,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);
|
|
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{--r:var(--radius-radii-14,.875rem);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);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)}}.shape-all-joZoe_{border-radius:var(--r)}.shape-none-XTJ9oh{border-radius:0}.shape-top-EeRKOf{border-top-left-radius:var(--r);border-top-right-radius:var(--r)}.shape-bottom-OkBYlk{border-bottom-right-radius:var(--r);border-bottom-left-radius:var(--r)}.shape-left-KAUAg3{border-top-left-radius:var(--r);border-bottom-left-radius:var(--r)}.shape-right-Cp3obn{border-top-right-radius:var(--r);border-bottom-right-radius:var(--r)}.shape-top_left-Yjjnxs{border-top-left-radius:var(--r)}.shape-top_right-FZd6d5{border-top-right-radius:var(--r)}.shape-bottom_left-OTZF7_{border-bottom-left-radius:var(--r)}.shape-bottom_right-93OhnN{border-bottom-right-radius:var(--r)}
|