@itcase/ui 1.1.8 → 1.1.10

package/dist/cjs/components/Choice.js

@@ -1,346 +1,29 @@
 'use strict';
 
-var React = require('react');
-var PropTypes = require('prop-types');
-var clsx = require('clsx');
-var Text = require('../Text-D7Aq1i5R.js');
-var Icon = require('../Icon-UBahY607.js');
-var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-require('../jsx-runtime-BCmQOGxJ.js');
-require('../hooks/useStyles.js');
+var Choice = require('../Choice-CJqMvK5I.js');
+require('../jsx-runtime-BBxmckJR.js');
+require('react');
+require('clsx');
+require('../hooks/useDeviceTargetClass.js');
+require('lodash/castArray');
 require('lodash/camelCase');
-require('lodash/maxBy');
-require('lodash/upperFirst');
-require('../hooks/styleAttributes.js');
 require('../context/UIContext.js');
+require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
-require('../Link-BoShjCEw.js');
+require('../Icon-D1v73UhR.js');
+require('../_tslib-CKiUdo7p.js');
 require('react-inlinesvg');
-require('./Tooltip.js');
-require('./Title.js');
-require('../constants/componentProps/fill.js');
-require('../constants/componentProps/textAlign.js');
-require('../constants/componentProps/textColor.js');
-require('../constants/componentProps/textGradient.js');
-require('../constants/componentProps/textStyle.js');
-require('../constants/componentProps/textWeight.js');
-require('../constants/componentProps/titleSize.js');
-require('../constants/componentProps/type.js');
-require('../constants/componentProps/wrap.js');
-require('../constants/componentProps/size.js');
-require('../constants/componentProps/textSize.js');
-require('../constants/componentProps/shape.js');
-require('lodash/castArray');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+require('../hooks/useStyles.js');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+require('../Link-3qPujNn9.js');
+require('../Tooltip-DasmzIDY.js');
+require('../Text-CgYNdSwY.js');
+require('../Title-C3lN-EvU.js');
 
-var React__default = /*#__PURE__*/_interopDefault(React);
-var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
-var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
-const choiceConfig = {
-  appearance: {},
-  setAppearance: newComponent => {
-    choiceConfig.appearance = newComponent;
-  }
-};
-const Choice = /*#__PURE__*/React__default.default.forwardRef(function Choice(props, ref) {
-  const {
-    appearance,
-    name,
-    className,
-    type,
-    options,
-    active,
-    isDisabled,
-    set,
-    setActiveSegment,
-    size,
-    labelTextColor,
-    labelTextActiveColor,
-    labelTextSize,
-    before,
-    after,
-    icon,
-    iconFillDisabled,
-    iconStrokeDisabled,
-    activeIcon,
-    iconSize,
-    labelTextActiveColorDisabled,
-    labelTextColorDisabled,
-    activeIconItemFill,
-    iconItemFill,
-    iconStroke,
-    isMultiple
-  } = props;
-  const controlRef = React.useRef(null);
-  const optionsRefs = React.useMemo(() => new Map(options.map(item => [item.value, /*#__PURE__*/React.createRef()])), [options]);
-  const onChange = React.useCallback((event, item) => {
-    const isChecked = isMultiple ? event.target.checked : true;
-    setActiveSegment && setActiveSegment(item, isChecked);
-  }, [isMultiple, setActiveSegment]);
-  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'border-color_',
-    propsKey: 'borderColor'
-  });
-  const borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'border-width_',
-    propsKey: 'borderWidth'
-  });
-  const borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'border_type_',
-    propsKey: 'borderType'
-  });
-  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'choice_shape_',
-    propsKey: 'shape'
-  });
-  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'fill_',
-    propsKey: 'fill'
-  });
-  const fillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'fill_disabled_',
-    propsKey: 'fillDisabled'
-  });
-  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'fill_hover_',
-    propsKey: 'fillHover'
-  });
-  const fillActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'fill_active_',
-    propsKey: 'fillActive'
-  });
-  const fillActiveDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'fill_active_disabled_',
-    propsKey: 'fillActiveDisabled'
-  });
-  return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'choice', shapeClass || choiceConfig.appearance[appearance]?.shape && `choice_shape_${choiceConfig.appearance[appearance].shape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? fillClass || choiceConfig.appearance[appearance]?.fill && `fill_${choiceConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase() : fillDisabledClass, borderColorClass || choiceConfig.appearance[appearance]?.borderColor && `border-color_${choiceConfig.appearance[appearance].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderWidthClass, borderTypeClass, set && `choice_set_${set}`, size && `choice_size_${size}`, type && `choice_type_${type}`),
-    ref: controlRef
-  }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: "choice__wrapper"
-  }, options?.map((item, i) => /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('choice__item', !isDisabled && (fillHoverClass || choiceConfig.appearance[appearance]?.fillHover && `fill_active_${choiceConfig.appearance[appearance].fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase()), item.value !== active.value && isDisabled && 'choice__item_state_disabled', item.value === active.value ? !isDisabled ? fillActiveClass || choiceConfig.appearance[appearance]?.fillActive && `fill_active_${choiceConfig.appearance[appearance].fillActive}`.replace(/([A-Z])/g, '-$1').toLowerCase() : fillActiveDisabledClass : !isDisabled ? fillClass : fillDisabledClass, item.value === active.value && isDisabled && 'choice__item_active_state_disabled', item.value === active.value && 'choice__item_active'),
-    key: item.value,
-    ref: optionsRefs.get(item.value)
-  }, /*#__PURE__*/React__default.default.createElement("input", {
-    checked: item.value === active.value,
-    className: "choice__item-radio",
-    id: `${name}-${item.value}`,
-    name: name,
-    disabled: isDisabled,
-    type: isMultiple ? 'checkbox' : 'radio',
-    value: item.value,
-    onChange: event => onChange(event, item)
-  }), /*#__PURE__*/React__default.default.createElement("label", {
-    className: clsx__default.default('choice__item-label', isDisabled && 'choice__item-label_state_disabled'),
-    htmlFor: `${name}-${item.value}`
-  }, before, item.label && /*#__PURE__*/React__default.default.createElement(Text.Text, {
-    size: labelTextSize || choiceConfig.appearance[appearance]?.labelTextSize,
-    textColor: item.value === active.value ? !isDisabled ? labelTextActiveColor || choiceConfig.appearance[appearance]?.labelTextActiveColor : labelTextActiveColorDisabled : !isDisabled ? labelTextColor || choiceConfig.appearance[appearance]?.labelTextColor : labelTextColorDisabled
-  }, item.label), (icon || activeIcon) && /*#__PURE__*/React__default.default.createElement(Icon.Icon, {
-    className: "choice__item-icon",
-    iconFill: item.value === active.value ? activeIconItemFill : iconItemFill,
-    iconFillDisabled: isDisabled && iconFillDisabled,
-    iconSize: iconSize,
-    iconStroke: iconStroke,
-    iconStrokeDisabled: isDisabled && iconStrokeDisabled,
-    SvgImage: item.value === active.value ? activeIcon : icon
-  }), after)))));
-});
-Choice.propTypes = {
-  active: PropTypes__default.default.shape({
-    value: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number, PropTypes__default.default.bool]),
-    label: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.element])
-  }),
-  after: PropTypes__default.default.any,
-  before: PropTypes__default.default.any,
-  className: PropTypes__default.default.string,
-  isMultiple: PropTypes__default.default.bool,
-  labelTextActiveColor: PropTypes__default.default.string,
-  labelTextColor: PropTypes__default.default.string,
-  labelTextSize: PropTypes__default.default.string,
-  name: PropTypes__default.default.string,
-  options: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
-    value: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number, PropTypes__default.default.bool]),
-    label: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.element])
-  })),
-  set: PropTypes__default.default.string,
-  setActiveSegment: PropTypes__default.default.func,
-  size: PropTypes__default.default.string,
-  type: PropTypes__default.default.string
-};
-Choice.defaultProps = {
-  active: {},
-  options: [],
-  size: 'normal'
-};
-Choice.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "Choice",
-  "props": {
-    "active": {
-      "defaultValue": {
-        "value": "{}",
-        "computed": false
-      },
-      "description": "",
-      "type": {
-        "name": "shape",
-        "value": {
-          "value": {
-            "name": "union",
-            "value": [{
-              "name": "string"
-            }, {
-              "name": "number"
-            }, {
-              "name": "bool"
-            }],
-            "required": false
-          },
-          "label": {
-            "name": "union",
-            "value": [{
-              "name": "string"
-            }, {
-              "name": "element"
-            }],
-            "required": false
-          }
-        }
-      },
-      "required": false
-    },
-    "options": {
-      "defaultValue": {
-        "value": "[]",
-        "computed": false
-      },
-      "description": "",
-      "type": {
-        "name": "arrayOf",
-        "value": {
-          "name": "shape",
-          "value": {
-            "value": {
-              "name": "union",
-              "value": [{
-                "name": "string"
-              }, {
-                "name": "number"
-              }, {
-                "name": "bool"
-              }],
-              "required": false
-            },
-            "label": {
-              "name": "union",
-              "value": [{
-                "name": "string"
-              }, {
-                "name": "element"
-              }],
-              "required": false
-            }
-          }
-        }
-      },
-      "required": false
-    },
-    "size": {
-      "defaultValue": {
-        "value": "'normal'",
-        "computed": false
-      },
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "after": {
-      "description": "",
-      "type": {
-        "name": "any"
-      },
-      "required": false
-    },
-    "before": {
-      "description": "",
-      "type": {
-        "name": "any"
-      },
-      "required": false
-    },
-    "className": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "isMultiple": {
-      "description": "",
-      "type": {
-        "name": "bool"
-      },
-      "required": false
-    },
-    "labelTextActiveColor": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "labelTextColor": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "labelTextSize": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "name": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "set": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "setActiveSegment": {
-      "description": "",
-      "type": {
-        "name": "func"
-      },
-      "required": false
-    },
-    "type": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    }
-  }
-};
 
-exports.Choice = Choice;
-exports.choiceConfig = choiceConfig;
+exports.Choice = Choice.Choice;
+exports.choiceConfig = Choice.choiceConfig;

package/dist/cjs/components/Code/Code.d.ts

@@ -0,0 +1,22 @@
+import { ICodeProps } from './Code.interface';
+declare function Code(props: ICodeProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Code {
+    var defaultProps: {
+        inputCount: number;
+        gap: number;
+        inputType: string;
+        inputSize: string;
+        inputBorderWidth: number;
+        inputPlaceholder: number;
+        inputBorderColor: string;
+        inputBorderColorHover: string;
+        inputBorderFocusColor: string;
+        inputFill: string;
+        inputFillHover: string;
+        inputShape: string;
+        inputTextColor: string;
+        inputTextSize: string;
+        inputCaretColor: string;
+    };
+}
+export { Code };

package/dist/cjs/components/Code/Code.interface.d.ts

@@ -0,0 +1,33 @@
+import { FocusEvent, ReactNode } from 'react';
+import { AllowedInputTypes } from 'react-otp-input';
+import { TypeStyleAttributes } from '../../hooks/styleAttributes.interface';
+import { borderColorHoverPropsType, borderColorPropsType, borderWidthPropsType, fillHoverPropsType, fillPropsType, itemColorPropsType, shapePropsType, sizePropsType, textColorPropsType, textSizePropsType, textWeightPropsType, widthPropsType } from '../../types';
+export interface ICodeProps extends TypeStyleAttributes {
+    after?: ReactNode;
+    before?: ReactNode;
+    className?: string;
+    gap?: string;
+    inputAutoFocus?: boolean;
+    inputBorderColor?: borderColorPropsType;
+    inputBorderColorHover?: borderColorHoverPropsType;
+    inputBorderFocusColor?: borderColorPropsType;
+    inputBorderWidth?: borderWidthPropsType;
+    inputCaretColor?: itemColorPropsType;
+    inputCount?: number;
+    inputFill?: fillPropsType;
+    inputFillHover?: fillHoverPropsType;
+    inputPlaceholder?: string;
+    inputPlaceholderTextColor?: textColorPropsType;
+    inputShape?: shapePropsType;
+    inputSize?: sizePropsType;
+    inputTextColor?: textColorPropsType;
+    inputTextSize?: textSizePropsType;
+    inputTextWeight?: textWeightPropsType;
+    inputType?: AllowedInputTypes | undefined;
+    otp?: string | number;
+    separatorComponent?: ReactNode;
+    width?: widthPropsType;
+    onBlur?: (arg0: FocusEvent) => void;
+    onChange?: (otp: string) => void;
+    onFocus?: (arg0: FocusEvent) => void;
+}

package/dist/cjs/components/Code/index.d.ts

@@ -0,0 +1 @@
+export { Code } from './Code';