@team_yumi/ramen 0.4.0-next.20231206-6253219-dcdcb2fadbf4dcc8f2a3a4b8cc73f586 → 0.4.0-next.20231214-1c83c95-5b24f8e2770626b417f5d847d9f937fe
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/components/core/{xalert → x-alert}/root.d.ts +15 -0
- package/components/core/{xcheckbox → x-checkbox}/root.d.ts +21 -0
- package/components/web/xcheckbox-group/root.d.ts +1 -1
- package/index.core.d.ts +2 -2
- package/index.css +68 -53
- package/index.js +1 -1
- package/index.mobile.d.ts +2 -2
- package/index.web.d.ts +2 -2
- package/models/Collections/IAlertType.d.ts +1 -1
- package/models/Collections/IIconColor.d.ts +1 -1
- package/package.json +1 -1
- /package/components/core/{xalert → x-alert}/index.d.ts +0 -0
- /package/components/core/{xcheckbox → x-checkbox}/index.d.ts +0 -0
|
@@ -1,10 +1,25 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Collections } from '../../../models';
|
|
3
3
|
export interface IProps {
|
|
4
|
+
/**
|
|
5
|
+
* Child Elements
|
|
6
|
+
*/
|
|
4
7
|
children?: React.ReactNode;
|
|
8
|
+
/**
|
|
9
|
+
* Set title for alert
|
|
10
|
+
*/
|
|
5
11
|
title?: string;
|
|
12
|
+
/**
|
|
13
|
+
* Show or hide icon
|
|
14
|
+
*/
|
|
6
15
|
showIcon?: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* Set style for alert 'success', 'success-neutral', 'info', 'info-neutral', 'warning', 'warning-neutral', 'error' or 'error-neutral'
|
|
18
|
+
*/
|
|
7
19
|
type?: (typeof Collections.IAlertType)[number];
|
|
20
|
+
/**
|
|
21
|
+
* Set icon
|
|
22
|
+
*/
|
|
8
23
|
icon?: (typeof Collections.IIcon)[number];
|
|
9
24
|
}
|
|
10
25
|
declare const XAlert: React.FC<IProps>;
|
|
@@ -1,12 +1,33 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Collections } from './../../../models';
|
|
3
3
|
export interface IProps {
|
|
4
|
+
/**
|
|
5
|
+
* Checkbox selected or not
|
|
6
|
+
*/
|
|
4
7
|
selected?: boolean;
|
|
8
|
+
/**
|
|
9
|
+
* Set state indeterminate
|
|
10
|
+
*/
|
|
5
11
|
indeterminate?: boolean;
|
|
12
|
+
/**
|
|
13
|
+
* Set state disabled
|
|
14
|
+
*/
|
|
6
15
|
disabled?: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* Set error
|
|
18
|
+
*/
|
|
7
19
|
hasError?: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* Set text for checkbox option
|
|
22
|
+
*/
|
|
8
23
|
label?: string;
|
|
24
|
+
/**
|
|
25
|
+
* Set placement for checkbox, 'left' or 'right'
|
|
26
|
+
*/
|
|
9
27
|
placement?: (typeof Collections.IPlacement)[number];
|
|
28
|
+
/**
|
|
29
|
+
* Event fire when checkbox is selected or not
|
|
30
|
+
*/
|
|
10
31
|
onChange?: (value: boolean) => void;
|
|
11
32
|
}
|
|
12
33
|
declare const XCheckbox: React.FC<IProps>;
|
package/index.core.d.ts
CHANGED
|
@@ -23,10 +23,10 @@ declare const _default: {
|
|
|
23
23
|
XPhoneInput: import("react").FC<import("./components/core/xphone-input/root").IProps>;
|
|
24
24
|
XSearchInput: import("react").FC<import("./components/core/xsearch-input/root").IProps>;
|
|
25
25
|
XTextInput: import("react").FC<import("./components/core/xtext-input/root").IProps>;
|
|
26
|
-
XCheckbox: import("react").FC<import("./components/core/
|
|
26
|
+
XCheckbox: import("react").FC<import("./components/core/x-checkbox/root").IProps>;
|
|
27
27
|
XRadioButton: import("react").FC<import("./components/core/x-radio-button/root").IProps>;
|
|
28
28
|
XAvatar: import("react").FC<import("./components/core/xavatar/root").IProps>;
|
|
29
|
-
XAlert: import("react").FC<import("./components/core/
|
|
29
|
+
XAlert: import("react").FC<import("./components/core/x-alert/root").IProps>;
|
|
30
30
|
XTextArea: import("react").FC<import("./components/core/x-text-area/root").IProps>;
|
|
31
31
|
XFormItem: import("react").FC<import("./components/core/xform-item/root").IProps>;
|
|
32
32
|
XList: typeof XList;
|
package/index.css
CHANGED
|
@@ -731,6 +731,22 @@
|
|
|
731
731
|
color: var(--xicon-color-turquoise);
|
|
732
732
|
}
|
|
733
733
|
|
|
734
|
+
.root-module_x-icon--color-info-blue__7AESi {
|
|
735
|
+
color: var(--global-info-blue-60);
|
|
736
|
+
}
|
|
737
|
+
|
|
738
|
+
.root-module_x-icon--color-error-red__5JsnX {
|
|
739
|
+
color: var(--global-error-red-60);
|
|
740
|
+
}
|
|
741
|
+
|
|
742
|
+
.root-module_x-icon--color-success-green__iHsLc {
|
|
743
|
+
color: var(--global-success-green-60);
|
|
744
|
+
}
|
|
745
|
+
|
|
746
|
+
.root-module_x-icon--color-warning-orange__-W-6d {
|
|
747
|
+
color: var(--global-warning-orange-60);
|
|
748
|
+
}
|
|
749
|
+
|
|
734
750
|
.root-module_xbutton__isOXp {
|
|
735
751
|
display: flex;
|
|
736
752
|
align-items: center;
|
|
@@ -2061,26 +2077,26 @@
|
|
|
2061
2077
|
font-size: var(--xtext-size-11);
|
|
2062
2078
|
}
|
|
2063
2079
|
|
|
2064
|
-
.root-
|
|
2080
|
+
.root-module_x-checkbox__2YH9t {
|
|
2065
2081
|
display: flex;
|
|
2066
2082
|
align-items: center;
|
|
2067
2083
|
gap: var(--xbox-padding-xs);
|
|
2068
2084
|
cursor: pointer;
|
|
2069
2085
|
}
|
|
2070
2086
|
|
|
2071
|
-
.root-
|
|
2087
|
+
.root-module_x-checkbox--disabled__9V-Ji {
|
|
2072
2088
|
cursor: not-allowed;
|
|
2073
2089
|
}
|
|
2074
2090
|
|
|
2075
|
-
.root-
|
|
2091
|
+
.root-module_x-checkbox--placement_left__wNy2w {
|
|
2076
2092
|
flex-direction: row;
|
|
2077
2093
|
}
|
|
2078
2094
|
|
|
2079
|
-
.root-
|
|
2095
|
+
.root-module_x-checkbox--placement_right__U78AB {
|
|
2080
2096
|
flex-direction: row-reverse;
|
|
2081
2097
|
}
|
|
2082
2098
|
|
|
2083
|
-
.root-
|
|
2099
|
+
.root-module_x-checkbox__check__KRW8F {
|
|
2084
2100
|
border: 2px solid var(--color-neutral-dim);
|
|
2085
2101
|
border-radius: 4px;
|
|
2086
2102
|
width: var(--xbox-size-11);
|
|
@@ -2089,46 +2105,54 @@
|
|
|
2089
2105
|
box-sizing: content-box;
|
|
2090
2106
|
}
|
|
2091
2107
|
|
|
2092
|
-
.root-
|
|
2108
|
+
.root-module_x-checkbox__2YH9t > .root-module_x-checkbox__check__KRW8F > div {
|
|
2093
2109
|
color: var(--color-neutral-lightest);
|
|
2094
2110
|
}
|
|
2095
2111
|
|
|
2096
|
-
.root-
|
|
2112
|
+
.root-module_x-checkbox--has-error__5ixRs:not(.root-module_x-checkbox--disabled__9V-Ji) .root-module_x-checkbox__check__KRW8F {
|
|
2097
2113
|
border-color: var(--global-error-red-50);
|
|
2098
2114
|
}
|
|
2099
2115
|
|
|
2100
|
-
.root-
|
|
2116
|
+
.root-module_x-checkbox__2YH9t:hover:not(.root-module_x-checkbox--disabled__9V-Ji) .root-module_x-checkbox__check__KRW8F {
|
|
2101
2117
|
border-color: var(--color-neutral-darkest);
|
|
2102
2118
|
}
|
|
2103
2119
|
|
|
2104
|
-
.root-
|
|
2120
|
+
.root-module_x-checkbox--checked__nCcy2:not(.root-module_x-checkbox--disabled__9V-Ji) .root-module_x-checkbox__check__KRW8F {
|
|
2105
2121
|
background: var(--color-neutral-darkest);
|
|
2106
2122
|
color: var(--color-neutral-lightest);
|
|
2123
|
+
border-color: var(--color-neutral-darkest);
|
|
2107
2124
|
}
|
|
2108
2125
|
|
|
2109
|
-
.root-
|
|
2126
|
+
.root-module_x-checkbox--indeterminate__JUucw:not(.root-module_x-checkbox--disabled__9V-Ji) .root-module_x-checkbox__check__KRW8F {
|
|
2110
2127
|
background: var(--color-neutral-darkest);
|
|
2111
2128
|
color: var(--color-neutral-lightest);
|
|
2129
|
+
border-color: var(--color-neutral-darkest);
|
|
2112
2130
|
}
|
|
2113
2131
|
|
|
2114
|
-
.root-
|
|
2132
|
+
.root-module_x-checkbox--disabled__9V-Ji .root-module_x-checkbox__check__KRW8F {
|
|
2115
2133
|
border-color: var(--color-neutral-light);
|
|
2116
2134
|
}
|
|
2117
2135
|
|
|
2118
|
-
.root-
|
|
2136
|
+
.root-module_x-checkbox__label__QS6HR {
|
|
2119
2137
|
flex: 1;
|
|
2120
2138
|
min-width: 0;
|
|
2121
2139
|
text-align: left;
|
|
2140
|
+
font-size: 14px;
|
|
2141
|
+
font-weight: 600;
|
|
2142
|
+
line-height: 100%;
|
|
2143
|
+
letter-spacing: -0.7px;
|
|
2144
|
+
color: var(--neutral-dark-90);
|
|
2122
2145
|
}
|
|
2123
2146
|
|
|
2124
|
-
.root-
|
|
2147
|
+
.root-module_x-checkbox__label__QS6HR > div {
|
|
2125
2148
|
white-space: nowrap;
|
|
2126
2149
|
overflow: hidden;
|
|
2127
2150
|
text-overflow: ellipsis;
|
|
2128
2151
|
}
|
|
2129
2152
|
|
|
2130
|
-
.root-
|
|
2153
|
+
.root-module_x-checkbox--disabled__9V-Ji .root-module_x-checkbox__label__QS6HR {
|
|
2131
2154
|
color: var(--color-neutral-dim);
|
|
2155
|
+
cursor: not-allowed;
|
|
2132
2156
|
}
|
|
2133
2157
|
|
|
2134
2158
|
.root-module_x-radio-button__-Fh1j {
|
|
@@ -2231,65 +2255,56 @@
|
|
|
2231
2255
|
height: var(--xicon-size-xl);
|
|
2232
2256
|
width: var(--xicon-size-xl);
|
|
2233
2257
|
}
|
|
2234
|
-
.root-
|
|
2258
|
+
.root-module_x-alert__Y8VV3 {
|
|
2235
2259
|
border: 1px solid transparent;
|
|
2236
2260
|
display: flex;
|
|
2237
2261
|
align-items: center;
|
|
2238
2262
|
border-radius: var(--xbox-rounding-l);
|
|
2239
2263
|
}
|
|
2240
2264
|
|
|
2241
|
-
.root-
|
|
2242
|
-
border-color: var(--
|
|
2243
|
-
background-color: var(--
|
|
2244
|
-
}
|
|
2245
|
-
|
|
2246
|
-
.root-module_xalert__Vf7Mh.root-module_xalert-neutral__NrsGf > div:nth-child(1) > div {
|
|
2247
|
-
color: var(--color-neutral-medium);
|
|
2248
|
-
}
|
|
2249
|
-
|
|
2250
|
-
.root-module_xalert__Vf7Mh.root-module_xalert-success__jhm77 {
|
|
2251
|
-
border-color: var(--color-success-light);
|
|
2252
|
-
background-color: var(--color-success-lightest);
|
|
2265
|
+
.root-module_x-alert__Y8VV3.root-module_x-alert-success__Kwyp8 {
|
|
2266
|
+
border-color: var(--global-success-green-20);
|
|
2267
|
+
background-color: var(--global-success-green-10);
|
|
2253
2268
|
}
|
|
2254
2269
|
|
|
2255
|
-
.root-
|
|
2256
|
-
color: var(--
|
|
2270
|
+
.root-module_x-alert__Y8VV3.root-module_x-alert-success-neutral__UYcN2 {
|
|
2271
|
+
border-color: var(--global-success-green-20);
|
|
2257
2272
|
}
|
|
2258
2273
|
|
|
2259
|
-
.root-
|
|
2260
|
-
border-color: var(--
|
|
2261
|
-
background-color: var(--
|
|
2274
|
+
.root-module_x-alert__Y8VV3.root-module_x-alert-info__XTWF1 {
|
|
2275
|
+
border-color: var(--global-info-blue-20);
|
|
2276
|
+
background-color: var(--global-info-blue-10);
|
|
2262
2277
|
}
|
|
2263
2278
|
|
|
2264
|
-
.root-
|
|
2265
|
-
color: var(--
|
|
2279
|
+
.root-module_x-alert__Y8VV3.root-module_x-alert-info-neutral__rVGRp {
|
|
2280
|
+
border-color: var(--global-info-blue-20);
|
|
2266
2281
|
}
|
|
2267
2282
|
|
|
2268
|
-
.root-
|
|
2269
|
-
border-color: var(--
|
|
2270
|
-
background-color: var(--
|
|
2283
|
+
.root-module_x-alert__Y8VV3.root-module_x-alert-error__Pcrh9 {
|
|
2284
|
+
border-color: var(--global-error-red-20);
|
|
2285
|
+
background-color: var(--global-error-red-10);
|
|
2271
2286
|
}
|
|
2272
2287
|
|
|
2273
|
-
.root-
|
|
2274
|
-
color: var(--
|
|
2288
|
+
.root-module_x-alert__Y8VV3.root-module_x-alert-error-neutral__8onSX {
|
|
2289
|
+
border-color: var(--global-error-red-20);
|
|
2275
2290
|
}
|
|
2276
2291
|
|
|
2277
|
-
.root-
|
|
2278
|
-
border-color: var(--
|
|
2279
|
-
background-color: var(--
|
|
2292
|
+
.root-module_x-alert__Y8VV3.root-module_x-alert-warning__7so2C {
|
|
2293
|
+
border-color: var(--global-warning-orange-20);
|
|
2294
|
+
background-color: var(--global-warning-orange-10);
|
|
2280
2295
|
}
|
|
2281
2296
|
|
|
2282
|
-
.root-
|
|
2283
|
-
color: var(--
|
|
2297
|
+
.root-module_x-alert__Y8VV3.root-module_x-alert-warning-neutral__pZ4ni {
|
|
2298
|
+
border-color: var(--global-warning-orange-20);
|
|
2284
2299
|
}
|
|
2285
2300
|
|
|
2286
|
-
.root-
|
|
2301
|
+
.root-module_x-alert__Y8VV3 > div:nth-child(1) {
|
|
2287
2302
|
display: none;
|
|
2288
2303
|
padding-top: 3px;
|
|
2289
2304
|
padding-left: var(--xbox-padding-m);
|
|
2290
2305
|
}
|
|
2291
2306
|
|
|
2292
|
-
.root-
|
|
2307
|
+
.root-module_x-alert__Y8VV3 > div:nth-child(2) {
|
|
2293
2308
|
width: 100%;
|
|
2294
2309
|
display: block;
|
|
2295
2310
|
padding-top: 16px;
|
|
@@ -2298,32 +2313,32 @@
|
|
|
2298
2313
|
padding-bottom: var(--xbox-padding-m);
|
|
2299
2314
|
}
|
|
2300
2315
|
|
|
2301
|
-
.root-
|
|
2316
|
+
.root-module_x-alert-with_icon__Lrg-Q > div:nth-child(1) {
|
|
2302
2317
|
display: block;
|
|
2303
2318
|
}
|
|
2304
2319
|
|
|
2305
|
-
.root-
|
|
2320
|
+
.root-module_x-alert-with_icon__Lrg-Q > div:nth-child(2) {
|
|
2306
2321
|
width: 100%;
|
|
2307
2322
|
display: block;
|
|
2308
2323
|
padding-left: 6px;
|
|
2309
2324
|
padding-top: var(--xbox-padding-m);
|
|
2310
2325
|
}
|
|
2311
2326
|
|
|
2312
|
-
.root-
|
|
2327
|
+
.root-module_x-alert-with_title__ekM7l > div:nth-child(2) {
|
|
2313
2328
|
padding-top: 16px;
|
|
2314
2329
|
}
|
|
2315
2330
|
|
|
2316
|
-
.root-
|
|
2331
|
+
.root-module_x-alert-with_title__ekM7l .root-module_x-alert__header__BHK9n {
|
|
2317
2332
|
display: block;
|
|
2318
|
-
padding-bottom: var(--xbox-padding-
|
|
2333
|
+
padding-bottom: var(--xbox-padding-xxs);
|
|
2319
2334
|
padding-top: 2px;
|
|
2320
2335
|
}
|
|
2321
2336
|
|
|
2322
|
-
.root-
|
|
2337
|
+
.root-module_x-alert__header__BHK9n {
|
|
2323
2338
|
display: none;
|
|
2324
2339
|
}
|
|
2325
2340
|
|
|
2326
|
-
.root-
|
|
2341
|
+
.root-module_x-alert__body__hmKDK {
|
|
2327
2342
|
display: block;
|
|
2328
2343
|
}
|
|
2329
2344
|
|