@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.
@@ -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;
@@ -1,3 +1,4 @@
1
+ export * from './components/input-addon';
1
2
  export { default as InputField } from './components/input-field';
2
3
  export * from './components/input-field';
3
4
  export { default as TextareaField } from './components/textarea';
@@ -0,0 +1,3 @@
1
+ import type { ComponentStyleConfig } from '@chakra-ui/theme';
2
+ declare const Badge: ComponentStyleConfig;
3
+ export default Badge;
@@ -1,4 +1,5 @@
1
1
  export { default as Alert } from './alert';
2
+ export { default as Badge } from './badge';
2
3
  export { default as Button } from './button';
3
4
  export { default as Card } from './card';
4
5
  export { default as Checkbox } from './checkbox';
@@ -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.Box, {
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.Box, {
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 && /*#__PURE__*/React__default.createElement(InputAddonLeft, null, addOnLeft), /*#__PURE__*/React__default.createElement(react.Input, Object.assign({
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
- })), "(", addOnRight && /*#__PURE__*/React__default.createElement(InputAddonRight, null, addOnRight))));
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;