@arthurzakharov/ui-kit 1.9.3 → 1.9.5
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/dist/assets/form-row-BIcA2L8w.css +1 -0
- package/dist/assets/{main-BS096FVm.css → main-t833jgg_.css} +1 -1
- package/dist/components/form-row/form-row.component.d.ts +18 -1
- package/dist/components/form-row/form-row.component.js +66 -31
- package/dist/main.d.ts +1 -1
- package/dist/main.js +1 -1
- package/package.json +1 -1
- package/dist/assets/form-row-C_CTS-Xj.css +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._FormRow_qe4e4_1{display:flex;flex-direction:column;align-items:stretch}._XXS_qe4e4_7{gap:var(--rm-ui-padding-xxs)}._XS_qe4e4_11{gap:var(--rm-ui-padding-xs)}._SM_qe4e4_15{gap:var(--rm-ui-padding-sm)}._MD_qe4e4_19{gap:var(--rm-ui-padding-md)}._LG_qe4e4_23,._XL_qe4e4_27{gap:var(--rm-ui-padding-xl)}._XXL_qe4e4_31{gap:var(--rm-ui-padding-xxl)}._XXXL_qe4e4_35{gap:var(--rm-ui-padding-xxxl)}._Child_qe4e4_39{flex-grow:1}@media screen and (min-width:768px){._FormRow_qe4e4_1{flex-direction:row}._Child_qe4e4_39[data-children-quantity="1"]{width:100%}._Child_qe4e4_39[data-children-quantity="2"]{width:50%}._Child_qe4e4_39[data-children-quantity="3"]{width:calc(100% / 3)}._Child_qe4e4_39[data-children-quantity="4"]{width:25%}._Child_qe4e4_39[data-width="1"]{width:100%}._Child_qe4e4_39[data-width="1/2"]{width:50%}._Child_qe4e4_39[data-width="1/3"]{width:calc(100% / 3)}._Child_qe4e4_39[data-width="2/3"]{width:calc(200% / 3)}._Child_qe4e4_39[data-width="1/4"]{width:25%}._Child_qe4e4_39[data-width="2/4"]{width:50%}._Child_qe4e4_39[data-width="3/4"]{width:75%}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}body{background-color:var(--rm-ui-body-bg)}body,input,textarea{font-family:Lato,sans-serif;font-weight:var(--rm-ui-font-weight-regular);font-size:16px;line-height:24px;-webkit-hyphens:manual;hyphens:manual;white-space:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}ul,ol{list-style:none;margin:0;padding:0}h1,h2,h3,h4,h5,h6,b,strong{font-weight:var(--rm-ui-font-weight-medium)}h1{font-size:var(--rm-ui-font-size-hl1);line-height:var(--rm-ui-line-height-hl1)}h2{font-size:var(--rm-ui-font-size-hl2);line-height:var(--rm-ui-line-height-hl2)}h3{font-size:var(--rm-ui-font-size-hl3);line-height:var(--rm-ui-line-height-hl3)}h4{font-size:var(--rm-ui-font-size-hl4);line-height:var(--rm-ui-line-height-hl4)}h5,h6{font-size:var(--rm-ui-font-size-hl5);line-height:var(--rm-ui-line-height-hl5)}a{text-decoration:none;color:inherit;border-radius:var(--rm-ui-border-radius-sm);outline:2px solid transparent}button,*[role=button]{border:none;border-radius:0;background-color:transparent;font-family:inherit;font-weight:inherit;font-size:inherit;line-height:inherit;color:inherit;-webkit-hyphens:inherit;hyphens:inherit;white-space:inherit;outline-offset:-2px;outline:2px solid transparent}a:hover,button:hover,*[role=button]:hover{cursor:pointer}a:active,button:active,*[role=button]:active{outline:none}a:focus-visible,button:focus-visible,*[role=button]:focus-visible{outline-color:var(--rm-ui-color-focus);outline-offset:-2px;transition:outline-color var(--rm-ui-amimation-speed-primary) ease-in-out;transition-delay:calc(var(--rm-ui-amimation-speed-primary) / 2)}.text-primary{color:var(--rm-ui-color-text-primary)}.text-secondary{color:var(--rm-ui-color-text-secondary)}.fw-light{font-weight:var(--rm-ui-font-weight-light)}.fw-regular{font-weight:var(--rm-ui-font-weight-regular)}.fw-medium{font-weight:var(--rm-ui-font-weight-medium)}.fw-bold{font-weight:var(--rm-ui-font-weight-bold)}:root{--rm-ui-padding-xxs: 4px;--rm-ui-padding-xs: 8px;--rm-ui-padding-sm: 12px;--rm-ui-padding-md: 16px;--rm-ui-padding-lg: 24px;--rm-ui-padding-xl: 32px;--rm-ui-padding-xxl: 40px;--rm-ui-padding-xxxl: 48px;--rm-ui-border-radius-sm: 8px;--rm-ui-border-radius-md: 12px;--rm-ui-border-radius-lg: 16px;--rm-ui-border-radius-xl: 24px;--rm-ui-font-size-body-extra-small: 12px;--rm-ui-line-height-body-extra-small: 16px;--rm-ui-font-size-body-small: 14px;--rm-ui-line-height-body-small: 20px;--rm-ui-font-size-body: 16px;--rm-ui-line-height-body: 24px;--rm-ui-font-size-body-large: 20px;--rm-ui-line-height-body-large: 30px;--rm-ui-font-size-hl5: 14px;--rm-ui-line-height-hl5: 22px;--rm-ui-font-size-hl4: 18px;--rm-ui-line-height-hl4: 24px;--rm-ui-font-size-hl3: 20px;--rm-ui-line-height-hl3:
|
|
1
|
+
*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}body{background-color:var(--rm-ui-body-bg)}body,input,textarea{font-family:Lato,sans-serif;font-weight:var(--rm-ui-font-weight-regular);font-size:16px;line-height:24px;-webkit-hyphens:manual;hyphens:manual;white-space:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}ul,ol{list-style:none;margin:0;padding:0}h1,h2,h3,h4,h5,h6,b,strong{font-weight:var(--rm-ui-font-weight-medium)}h1{font-size:var(--rm-ui-font-size-hl1);line-height:var(--rm-ui-line-height-hl1)}h2{font-size:var(--rm-ui-font-size-hl2);line-height:var(--rm-ui-line-height-hl2)}h3{font-size:var(--rm-ui-font-size-hl3);line-height:var(--rm-ui-line-height-hl3)}h4{font-size:var(--rm-ui-font-size-hl4);line-height:var(--rm-ui-line-height-hl4)}h5,h6{font-size:var(--rm-ui-font-size-hl5);line-height:var(--rm-ui-line-height-hl5)}a{text-decoration:none;color:inherit;border-radius:var(--rm-ui-border-radius-sm);outline:2px solid transparent}button,*[role=button]{border:none;border-radius:0;background-color:transparent;font-family:inherit;font-weight:inherit;font-size:inherit;line-height:inherit;color:inherit;-webkit-hyphens:inherit;hyphens:inherit;white-space:inherit;outline-offset:-2px;outline:2px solid transparent}a:hover,button:hover,*[role=button]:hover{cursor:pointer}a:active,button:active,*[role=button]:active{outline:none}a:focus-visible,button:focus-visible,*[role=button]:focus-visible{outline-color:var(--rm-ui-color-focus);outline-offset:-2px;transition:outline-color var(--rm-ui-amimation-speed-primary) ease-in-out;transition-delay:calc(var(--rm-ui-amimation-speed-primary) / 2)}.text-primary{color:var(--rm-ui-color-text-primary)}.text-secondary{color:var(--rm-ui-color-text-secondary)}.fw-light{font-weight:var(--rm-ui-font-weight-light)}.fw-regular{font-weight:var(--rm-ui-font-weight-regular)}.fw-medium{font-weight:var(--rm-ui-font-weight-medium)}.fw-bold{font-weight:var(--rm-ui-font-weight-bold)}:root{--rm-ui-padding-xxs: 4px;--rm-ui-padding-xs: 8px;--rm-ui-padding-sm: 12px;--rm-ui-padding-md: 16px;--rm-ui-padding-lg: 24px;--rm-ui-padding-xl: 32px;--rm-ui-padding-xxl: 40px;--rm-ui-padding-xxxl: 48px;--rm-ui-border-radius-sm: 8px;--rm-ui-border-radius-md: 12px;--rm-ui-border-radius-lg: 16px;--rm-ui-border-radius-xl: 24px;--rm-ui-font-size-body-extra-small: 12px;--rm-ui-line-height-body-extra-small: 16px;--rm-ui-font-size-body-small: 14px;--rm-ui-line-height-body-small: 20px;--rm-ui-font-size-body: 16px;--rm-ui-line-height-body: 24px;--rm-ui-font-size-body-large: 20px;--rm-ui-line-height-body-large: 30px;--rm-ui-font-size-hl5: 14px;--rm-ui-line-height-hl5: 22px;--rm-ui-font-size-hl4: 18px;--rm-ui-line-height-hl4: 24px;--rm-ui-font-size-hl3: 20px;--rm-ui-line-height-hl3: 28px;--rm-ui-font-size-hl2: 24px;--rm-ui-line-height-hl2: 32px;--rm-ui-font-size-hl1: 28px;--rm-ui-line-height-hl1: 36px;--rm-ui-font-weight-light: 300;--rm-ui-font-weight-regular: 400;--rm-ui-font-weight-medium: 700;--rm-ui-font-weight-bold: 900;--rm-ui-grey-950: #0a0a0a;--rm-ui-grey-900: #171717;--rm-ui-grey-800: #262626;--rm-ui-grey-700: #404040;--rm-ui-grey-600: #525252;--rm-ui-grey-500: #737373;--rm-ui-grey-400: #a3a3a3;--rm-ui-grey-300: #d4d4d4;--rm-ui-grey-200: #e5e5e5;--rm-ui-grey-100: #f5f5f5;--rm-ui-grey-50: #fafafa;--rm-ui-color-text-primary: var(--rm-ui-grey-800);--rm-ui-color-text-secondary: var(--rm-ui-grey-500);--rm-ui-color-accent-primary: #23bf96;--rm-ui-color-accent-secondary: #ff9900;--rm-ui-color-accent-tertiary: #f5a623;--rm-ui-color-theme-primary: #302677;--rm-ui-color-theme-secondary: #302677;--rm-ui-color-action: #006cff;--rm-ui-color-inverted: #ffffff;--rm-ui-color-error: #dc2626;--rm-ui-color-success: #00b649;--rm-ui-color-focus: #ff8d02;--rm-ui-color-link: #ff8206;--rm-ui-body-color: #f0faff;--rm-ui-box-border-radius: 10px;--rm-ui-header-logo-height: 30px;--rm-ui-header-phone: #ff9900;--rm-ui-header-phone-size: 22px;--rm-ui-header-text: var(--rm-ui-color-text-primary);--rm-ui-header-check-icon: var(--rm-ui-color-text-primary);--rm-ui-certifications-color: #b1b4c7;--rm-ui-certifications-size: 20px;--rm-ui-message-success-primary: #29c667;--rm-ui-message-success-secondary: #f1fdf4;--rm-ui-message-question-primary: #a76000;--rm-ui-message-question-secondary: #fefce8;--rm-ui-message-error-primary: var(--rm-ui-color-error);--rm-ui-message-error-secondary: #fef3f3;--rm-ui-message-info-primary: #3289c4;--rm-ui-message-info-secondary: #f3f7fe;--rm-ui-payment-info-bg: #edf9f6;--rm-ui-payment-sidebar-bg: #f8fcff;--rm-ui-payment-text-blocks-gap: var(--rm-ui-padding-lg);--rm-ui-data-protected-label-icon: var(--rm-ui-next-btn-bg);--rm-ui-data-protected-label-text: var(--rm-ui-color-text-primary);--rm-ui-status-idle-color: #82868f;--rm-ui-status-success-color: var(--rm-ui-color-accent-primary);--rm-ui-status-error-color: var(--rm-ui-color-error);--rm-ui-not-found-color: var(--rm-ui-color-text-primary);--rm-ui-not-found-border: var(--rm-ui-grey-300);--rm-ui-card-background: #ffffff;--rm-ui-next-btn-bg: rgba(35, 191, 150, 1);--rm-ui-next-btn-bg-hover: rgba(35, 191, 150, .9);--rm-ui-info-panel-bg: var(--rm-ui-body-color);--rm-ui-sidebar-bg: #f6f6f6;--rm-ui-sidebar-line-color: var(--rm-ui-grey-200);--rm-ui-loading-screen-height: 400px;--rm-ui-body-bg: #f9fcff;--rm-ui-content-bg: #ffffff;--rm-ui-amimation-speed-primary: .15s;--rm-ui-amimation-speed-secondary: .3s;--rm-ui-amimation-speed-tertiary: .45s;--rm-ui-amimation-cubic-primary: cubic-bezier(.3, 0, 0, 1);--rm-ui-amimation-cubic-secondary: cubic-bezier(.65, 0, .35, 1);--rm-ui-amimation-cubic-tertiary: cubic-bezier(.68, -.6, .32, 1.6);--rm-ui-warranty-bg: #f9fcff}
|
|
@@ -1,6 +1,23 @@
|
|
|
1
1
|
import { PropsWithChildren } from 'react';
|
|
2
2
|
import { Base, Size } from '../../utils/types';
|
|
3
|
+
export type FormRowWidth = '1/2' | '1/3' | '2/3' | '1/4' | '2/4' | '3/4' | '1';
|
|
3
4
|
export interface FormRowProps extends PropsWithChildren<Base> {
|
|
4
5
|
gap: Size;
|
|
6
|
+
/**
|
|
7
|
+
* Force the desktop width of each child individually.
|
|
8
|
+
*
|
|
9
|
+
* Pass an array of fractions, one per valid child, in order. Supported values
|
|
10
|
+
* cover every valid fraction of a four-column grid:
|
|
11
|
+
* `'1/2'`, `'1/3'`, `'2/3'`, `'1/4'`, `'2/4'`, `'3/4'` and `'1'`.
|
|
12
|
+
*
|
|
13
|
+
* If the array length does not match the number of valid children, the array
|
|
14
|
+
* contains an unknown value, or the fractions sum to more than 1, a warning
|
|
15
|
+
* is logged and the prop is ignored — the row falls back to the default
|
|
16
|
+
* behaviour where all children share the row width equally.
|
|
17
|
+
*
|
|
18
|
+
* On mobile (< 768px) the row stacks vertically as usual; this prop only
|
|
19
|
+
* affects the desktop layout.
|
|
20
|
+
*/
|
|
21
|
+
widths?: FormRowWidth[];
|
|
5
22
|
}
|
|
6
|
-
export declare const FormRow: ({ children, gap, ...base }: FormRowProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
23
|
+
export declare const FormRow: ({ children, gap, widths, ...base }: FormRowProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -1,35 +1,70 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { Children as
|
|
3
|
-
import
|
|
4
|
-
import { baseProps as
|
|
5
|
-
import '../../assets/form-row-
|
|
6
|
-
FormRow:
|
|
7
|
-
XXS:
|
|
8
|
-
XS:
|
|
9
|
-
SM:
|
|
10
|
-
MD:
|
|
1
|
+
import { jsx as X } from "react/jsx-runtime";
|
|
2
|
+
import { Children as d, isValidElement as u } from "react";
|
|
3
|
+
import f from "clsx";
|
|
4
|
+
import { baseProps as _ } from "../../utils/functions/functions.util.js";
|
|
5
|
+
import '../../assets/form-row-BIcA2L8w.css';const L = "_FormRow_qe4e4_1", w = "_XXS_qe4e4_7", q = "_XS_qe4e4_11", S = "_SM_qe4e4_15", F = "_MD_qe4e4_19", x = "_LG_qe4e4_23", v = "_XL_qe4e4_27", b = "_XXL_qe4e4_31", M = "_XXXL_qe4e4_35", R = "_Child_qe4e4_39", e = {
|
|
6
|
+
FormRow: L,
|
|
7
|
+
XXS: w,
|
|
8
|
+
XS: q,
|
|
9
|
+
SM: S,
|
|
10
|
+
MD: F,
|
|
11
11
|
LG: x,
|
|
12
|
-
XL:
|
|
12
|
+
XL: v,
|
|
13
13
|
XXL: b,
|
|
14
|
-
XXXL:
|
|
15
|
-
Child:
|
|
16
|
-
},
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
);
|
|
14
|
+
XXXL: M,
|
|
15
|
+
Child: R
|
|
16
|
+
}, r = {
|
|
17
|
+
1: 12,
|
|
18
|
+
"1/2": 6,
|
|
19
|
+
"1/3": 4,
|
|
20
|
+
"2/3": 8,
|
|
21
|
+
"1/4": 3,
|
|
22
|
+
"2/4": 6,
|
|
23
|
+
"3/4": 9
|
|
24
|
+
}, k = r[1], j = ({ children: i, gap: o = "sm", widths: t, ...a }) => {
|
|
25
|
+
if (d.count(i) === 0) return null;
|
|
26
|
+
const l = d.toArray(i).filter(u);
|
|
27
|
+
let c = !1;
|
|
28
|
+
if (t)
|
|
29
|
+
if (t.length !== l.length)
|
|
30
|
+
console.warn(
|
|
31
|
+
`[FormRow] \`widths\` length (${t.length}) does not match the number of children (${l.length}). Falling back to default equal-width behaviour.`
|
|
32
|
+
);
|
|
33
|
+
else {
|
|
34
|
+
const s = t.find((n) => !(n in r));
|
|
35
|
+
s !== void 0 ? console.warn(
|
|
36
|
+
`[FormRow] \`widths\` contains unknown value "${s}". Supported values are: ${Object.keys(r).join(", ")}. Falling back to default equal-width behaviour.`
|
|
37
|
+
) : t.reduce((m, h) => m + r[h], 0) > k ? console.warn(
|
|
38
|
+
`[FormRow] \`widths\` total (${t.join(" + ")}) exceeds 1. Falling back to default equal-width behaviour.`
|
|
39
|
+
) : c = !0;
|
|
40
|
+
}
|
|
41
|
+
return /* @__PURE__ */ X(
|
|
42
|
+
"div",
|
|
43
|
+
{
|
|
44
|
+
"data-testid": _(a, "data-testid", "form-row"),
|
|
45
|
+
className: f(e.FormRow, _(a, "className"), {
|
|
46
|
+
[e.XXS]: o === "xxs",
|
|
47
|
+
[e.XS]: o === "xs",
|
|
48
|
+
[e.SM]: o === "sm",
|
|
49
|
+
[e.MD]: o === "md",
|
|
50
|
+
[e.LG]: o === "lg",
|
|
51
|
+
[e.XL]: o === "xl",
|
|
52
|
+
[e.XXL]: o === "xxl",
|
|
53
|
+
[e.XXXL]: o === "xxxl"
|
|
54
|
+
}),
|
|
55
|
+
children: l.map((s, n) => /* @__PURE__ */ X(
|
|
56
|
+
"div",
|
|
57
|
+
{
|
|
58
|
+
"data-children-quantity": l.length,
|
|
59
|
+
"data-width": c ? t[n] : void 0,
|
|
60
|
+
className: e.Child,
|
|
61
|
+
children: s
|
|
62
|
+
},
|
|
63
|
+
n
|
|
64
|
+
))
|
|
65
|
+
}
|
|
66
|
+
);
|
|
67
|
+
};
|
|
33
68
|
export {
|
|
34
|
-
|
|
69
|
+
j as FormRow
|
|
35
70
|
};
|
package/dist/main.d.ts
CHANGED
|
@@ -31,7 +31,7 @@ export { Dialog, type DialogProps, type DialogSize, type DialogPosition } from '
|
|
|
31
31
|
export { DialogArticle } from './components/dialog-article';
|
|
32
32
|
export { Expenses, type ExpensesProps } from './components/expenses';
|
|
33
33
|
export { Footer, type FooterProps } from './components/footer';
|
|
34
|
-
export { FormRow, type FormRowProps } from './components/form-row/form-row.component';
|
|
34
|
+
export { FormRow, type FormRowProps, type FormRowWidth } from './components/form-row/form-row.component';
|
|
35
35
|
export { Header, type HeaderProps, type HeaderDescription } from './components/header/header.component';
|
|
36
36
|
export { InfoPanel, type InfoPanelProps } from './components/info-panel';
|
|
37
37
|
export { Information } from './components/information';
|
package/dist/main.js
CHANGED
|
@@ -49,7 +49,7 @@ import { Svg as qo } from "./utils/svg/svg.component.js";
|
|
|
49
49
|
import { Text as Jo } from "./components/text/text.component.js";
|
|
50
50
|
import { UserPanel as Oo } from "./components/user-panel/user-panel.component.js";
|
|
51
51
|
import { Warranty as Vo } from "./components/warranty/warranty.component.js";
|
|
52
|
-
import './assets/main-
|
|
52
|
+
import './assets/main-t833jgg_.css';export {
|
|
53
53
|
Z as AccordionTable,
|
|
54
54
|
$ as BottomBar,
|
|
55
55
|
H as Box,
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
._FormRow_v16lb_1{display:flex;flex-direction:column;align-items:stretch}._XXS_v16lb_7{gap:var(--rm-ui-padding-xxs)}._XS_v16lb_11{gap:var(--rm-ui-padding-xs)}._SM_v16lb_15{gap:var(--rm-ui-padding-sm)}._MD_v16lb_19{gap:var(--rm-ui-padding-md)}._LG_v16lb_23,._XL_v16lb_27{gap:var(--rm-ui-padding-xl)}._XXL_v16lb_31{gap:var(--rm-ui-padding-xxl)}._XXXL_v16lb_35{gap:var(--rm-ui-padding-xxxl)}._Child_v16lb_39{flex-grow:1}@media screen and (min-width:768px){._FormRow_v16lb_1{flex-direction:row}._Child_v16lb_39[data-children-quantity="1"]{width:100%}._Child_v16lb_39[data-children-quantity="2"]{width:50%}._Child_v16lb_39[data-children-quantity="3"]{width:calc(100% / 3)}._Child_v16lb_39[data-children-quantity="4"]{width:25%}}
|