@ctlyst.id/internal-ui 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/dist/components/form/__stories__/input.stories.d.ts +1 -0
- package/dist/components/form/components/input-field.d.ts +0 -2
- package/dist/components/form/index.d.ts +1 -0
- package/dist/config/theme/components/badge.d.ts +3 -0
- package/dist/config/theme/components/index.d.ts +1 -0
- package/dist/internal-ui.cjs.development.js +112 -48
- package/dist/internal-ui.cjs.development.js.map +1 -1
- package/dist/internal-ui.cjs.production.min.js +9 -9
- package/dist/internal-ui.cjs.production.min.js.map +1 -1
- package/dist/internal-ui.esm.js +114 -52
- package/dist/internal-ui.esm.js.map +1 -1
- package/package.json +2 -2
@@ -11,4 +11,5 @@ export declare const Default: () => JSX.Element;
|
|
11
11
|
export declare const Variant: () => JSX.Element;
|
12
12
|
export declare const PasswordField: () => JSX.Element;
|
13
13
|
export declare const WithClear: () => JSX.Element;
|
14
|
+
export declare const WithElement: () => JSX.Element;
|
14
15
|
export declare const WithAddOn: () => JSX.Element;
|
@@ -5,8 +5,6 @@ import type { FieldProps } from '../../field/components/field';
|
|
5
5
|
export interface InputFieldProps extends ChakraInputProps, FieldProps {
|
6
6
|
addOnLeft?: ReactNode;
|
7
7
|
addOnRight?: ReactNode;
|
8
|
-
elementLeft?: ReactNode;
|
9
|
-
elementRight?: ReactNode;
|
10
8
|
withClear?: boolean;
|
11
9
|
isLoading?: boolean;
|
12
10
|
onClear?: () => void;
|
@@ -35,9 +35,7 @@ const Badge = props => {
|
|
35
35
|
} = props;
|
36
36
|
return /*#__PURE__*/React__default.createElement(react.Badge, Object.assign({
|
37
37
|
borderRadius: pill ? 10 : 4,
|
38
|
-
variant: "solid",
|
39
|
-
color: "white",
|
40
|
-
fontSize: "10px",
|
38
|
+
variant: "primary-solid",
|
41
39
|
padding: "0 8px",
|
42
40
|
height: "18px",
|
43
41
|
display: "flex",
|
@@ -482,6 +480,41 @@ DataTable.defaultProps = {
|
|
482
480
|
sortingState: []
|
483
481
|
};
|
484
482
|
|
483
|
+
const getProperties = props => {
|
484
|
+
const {
|
485
|
+
isError,
|
486
|
+
isDisabled,
|
487
|
+
isSuccess
|
488
|
+
} = props;
|
489
|
+
let outlineColor = 'neutral.400';
|
490
|
+
let focusColor = 'primary.500';
|
491
|
+
if (isError || isDisabled || isSuccess) {
|
492
|
+
if (isError) outlineColor = 'danger.500';else if (isSuccess) outlineColor = 'success.500';
|
493
|
+
focusColor = outlineColor;
|
494
|
+
}
|
495
|
+
return {
|
496
|
+
outlineColor,
|
497
|
+
focusColor
|
498
|
+
};
|
499
|
+
};
|
500
|
+
const getWrapperStyle = props => {
|
501
|
+
const {
|
502
|
+
outlineColor,
|
503
|
+
focusColor
|
504
|
+
} = getProperties(props);
|
505
|
+
const style = {
|
506
|
+
border: '1px solid',
|
507
|
+
borderColor: outlineColor,
|
508
|
+
borderRadius: 'md',
|
509
|
+
transition: 'all 0.15s',
|
510
|
+
boxShadow: 'none',
|
511
|
+
_focusWithin: {
|
512
|
+
borderColor: focusColor
|
513
|
+
}
|
514
|
+
};
|
515
|
+
return react.defineStyle(style);
|
516
|
+
};
|
517
|
+
|
485
518
|
const Styles = () => {
|
486
519
|
const {
|
487
520
|
colorMode
|
@@ -1353,6 +1386,7 @@ const Datepicker = ({
|
|
1353
1386
|
var _props$dateFormat;
|
1354
1387
|
const selected = value ? new Date(value) : undefined;
|
1355
1388
|
const dateFormat = ((_props$dateFormat = props.dateFormat) !== null && _props$dateFormat !== void 0 ? _props$dateFormat : withTime) ? 'yyyy-MM-dd HH:mm' : 'yyyy-MM-dd';
|
1389
|
+
const wrapperStyle = getWrapperStyle({});
|
1356
1390
|
const getTimeProps = () => {
|
1357
1391
|
if (!withTime) return {};
|
1358
1392
|
return {
|
@@ -1365,9 +1399,9 @@ const Datepicker = ({
|
|
1365
1399
|
id: id,
|
1366
1400
|
name: name,
|
1367
1401
|
selected: selected,
|
1368
|
-
customInput: /*#__PURE__*/React__default.createElement(react.Input, {
|
1402
|
+
customInput: /*#__PURE__*/React__default.createElement(react.Input, Object.assign({
|
1369
1403
|
autoComplete: "off"
|
1370
|
-
}),
|
1404
|
+
}, wrapperStyle)),
|
1371
1405
|
dateFormat: dateFormat,
|
1372
1406
|
showPopperArrow: false,
|
1373
1407
|
calendarClassName: classnames({
|
@@ -1916,45 +1950,10 @@ MultiDatePickerMonth.defaultProps = {
|
|
1916
1950
|
isError: false
|
1917
1951
|
};
|
1918
1952
|
|
1919
|
-
const getProperties = props => {
|
1920
|
-
const {
|
1921
|
-
isError,
|
1922
|
-
isDisabled,
|
1923
|
-
isSuccess
|
1924
|
-
} = props;
|
1925
|
-
let outlineColor = 'neutral.400';
|
1926
|
-
let focusColor = 'primary.500';
|
1927
|
-
if (isError || isDisabled || isSuccess) {
|
1928
|
-
if (isError) outlineColor = 'danger.500';else if (isSuccess) outlineColor = 'success.500';
|
1929
|
-
focusColor = outlineColor;
|
1930
|
-
}
|
1931
|
-
return {
|
1932
|
-
outlineColor,
|
1933
|
-
focusColor
|
1934
|
-
};
|
1935
|
-
};
|
1936
|
-
const getWrapperStyle = props => {
|
1937
|
-
const {
|
1938
|
-
outlineColor,
|
1939
|
-
focusColor
|
1940
|
-
} = getProperties(props);
|
1941
|
-
const style = {
|
1942
|
-
border: '1px solid',
|
1943
|
-
borderColor: outlineColor,
|
1944
|
-
borderRadius: 'md',
|
1945
|
-
transition: 'all 0.15s',
|
1946
|
-
boxShadow: 'none',
|
1947
|
-
_focusWithin: {
|
1948
|
-
borderColor: focusColor
|
1949
|
-
}
|
1950
|
-
};
|
1951
|
-
return react.defineStyle(style);
|
1952
|
-
};
|
1953
|
-
|
1954
1953
|
const InputAddonLeft = ({
|
1955
1954
|
children
|
1956
1955
|
}) => {
|
1957
|
-
return /*#__PURE__*/React__default.createElement(react.
|
1956
|
+
return /*#__PURE__*/React__default.createElement(react.InputLeftAddon, {
|
1958
1957
|
borderLeftRadius: "md",
|
1959
1958
|
backgroundColor: "neutral.200",
|
1960
1959
|
px: 3,
|
@@ -1964,7 +1963,7 @@ const InputAddonLeft = ({
|
|
1964
1963
|
const InputAddonRight = ({
|
1965
1964
|
children
|
1966
1965
|
}) => {
|
1967
|
-
return /*#__PURE__*/React__default.createElement(react.
|
1966
|
+
return /*#__PURE__*/React__default.createElement(react.InputRightAddon, {
|
1968
1967
|
borderRightRadius: "md",
|
1969
1968
|
backgroundColor: "neutral.200",
|
1970
1969
|
px: 3,
|
@@ -1978,8 +1977,6 @@ const InputField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
|
|
1978
1977
|
type,
|
1979
1978
|
addOnLeft,
|
1980
1979
|
addOnRight,
|
1981
|
-
elementLeft,
|
1982
|
-
elementRight,
|
1983
1980
|
size,
|
1984
1981
|
isRequired,
|
1985
1982
|
label,
|
@@ -2023,7 +2020,7 @@ const InputField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
|
|
2023
2020
|
borderRadius: "md",
|
2024
2021
|
backgroundColor: isDisabled ? 'neutral.300' : 'white.high',
|
2025
2022
|
cursor: isDisabled ? 'not-allowed' : 'default'
|
2026
|
-
}, addOnLeft
|
2023
|
+
}, addOnLeft, /*#__PURE__*/React__default.createElement(react.Input, Object.assign({
|
2027
2024
|
ref: ref,
|
2028
2025
|
type: inputType,
|
2029
2026
|
value: value,
|
@@ -2070,13 +2067,11 @@ const InputField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
|
|
2070
2067
|
color: iconColor
|
2071
2068
|
})), isLoading && /*#__PURE__*/React__default.createElement(Loader, {
|
2072
2069
|
size: "sm"
|
2073
|
-
})),
|
2070
|
+
})), addOnRight)));
|
2074
2071
|
});
|
2075
2072
|
InputField.defaultProps = {
|
2076
2073
|
addOnLeft: undefined,
|
2077
2074
|
addOnRight: undefined,
|
2078
|
-
elementLeft: undefined,
|
2079
|
-
elementRight: undefined,
|
2080
2075
|
withClear: undefined,
|
2081
2076
|
isLoading: undefined,
|
2082
2077
|
onClear: undefined
|
@@ -3267,6 +3262,72 @@ const alertTheme = /*#__PURE__*/defineMultiStyleConfig({
|
|
3267
3262
|
}
|
3268
3263
|
});
|
3269
3264
|
|
3265
|
+
const Badge$1 = {
|
3266
|
+
baseStyle: {
|
3267
|
+
display: 'inline-block',
|
3268
|
+
fontSize: 10,
|
3269
|
+
fontWeight: 600,
|
3270
|
+
lineHeight: '1.25',
|
3271
|
+
textTransform: 'none',
|
3272
|
+
px: 2,
|
3273
|
+
py: '0.5'
|
3274
|
+
},
|
3275
|
+
variants: {
|
3276
|
+
'primary-solid': {
|
3277
|
+
bg: 'primary.500',
|
3278
|
+
color: 'white'
|
3279
|
+
},
|
3280
|
+
'success-solid': {
|
3281
|
+
bg: 'success.500',
|
3282
|
+
color: 'white'
|
3283
|
+
},
|
3284
|
+
'info-solid': {
|
3285
|
+
bg: 'info.500',
|
3286
|
+
color: 'white'
|
3287
|
+
},
|
3288
|
+
'warning-solid': {
|
3289
|
+
bg: 'warning.500',
|
3290
|
+
color: 'white'
|
3291
|
+
},
|
3292
|
+
'danger-solid': {
|
3293
|
+
bg: 'danger.500',
|
3294
|
+
color: 'white'
|
3295
|
+
},
|
3296
|
+
'neutral-solid': {
|
3297
|
+
bg: 'neutral.600',
|
3298
|
+
color: 'white'
|
3299
|
+
},
|
3300
|
+
'primary-light': {
|
3301
|
+
bg: 'primary.50',
|
3302
|
+
color: 'primary.500'
|
3303
|
+
},
|
3304
|
+
'success-light': {
|
3305
|
+
bg: 'success.50',
|
3306
|
+
color: 'success.500'
|
3307
|
+
},
|
3308
|
+
'info-light': {
|
3309
|
+
bg: 'info.50',
|
3310
|
+
color: 'info.500'
|
3311
|
+
},
|
3312
|
+
'warning-light': {
|
3313
|
+
bg: 'warning.50',
|
3314
|
+
color: 'warning.500'
|
3315
|
+
},
|
3316
|
+
'danger-light': {
|
3317
|
+
bg: 'danger.50',
|
3318
|
+
color: 'danger.500'
|
3319
|
+
},
|
3320
|
+
'neutral-light': {
|
3321
|
+
bg: 'neutral.100',
|
3322
|
+
color: 'neutral.600'
|
3323
|
+
}
|
3324
|
+
},
|
3325
|
+
// The default size and variant values
|
3326
|
+
defaultProps: {
|
3327
|
+
variant: 'primary-solid'
|
3328
|
+
}
|
3329
|
+
};
|
3330
|
+
|
3270
3331
|
// You can also use the more specific type for
|
3271
3332
|
// a single part component: ComponentSingleStyleConfig
|
3272
3333
|
const Button$1 = /*#__PURE__*/styledSystem.defineStyleConfig({
|
@@ -4166,6 +4227,7 @@ const Textarea = /*#__PURE__*/react.defineStyleConfig({
|
|
4166
4227
|
var components = {
|
4167
4228
|
__proto__: null,
|
4168
4229
|
Alert: alertTheme,
|
4230
|
+
Badge: Badge$1,
|
4169
4231
|
Button: Button$1,
|
4170
4232
|
Card: CardStyle,
|
4171
4233
|
Checkbox: Checkbox,
|
@@ -4486,6 +4548,8 @@ exports.Field = Field;
|
|
4486
4548
|
exports.Flex = react.Flex;
|
4487
4549
|
exports.Grid = react.Grid;
|
4488
4550
|
exports.Header = Header;
|
4551
|
+
exports.InputAddonLeft = InputAddonLeft;
|
4552
|
+
exports.InputAddonRight = InputAddonRight;
|
4489
4553
|
exports.InputField = InputField;
|
4490
4554
|
exports.Loader = Loader;
|
4491
4555
|
exports.MainMenu = Navigation;
|