@itcase/ui 1.1.9 → 1.1.10

package/dist/components/Choice.js

@@ -1,337 +1,22 @@
-import React__default, { useRef, useMemo, createRef, useCallback } from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { T as Text } from '../Text-BcGbRc14.js';
-import { I as Icon } from '../Icon-Dn2eEZvb.js';
-import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import '../jsx-runtime-ClDdVO4Q.js';
-import '../hooks/useStyles.js';
+export { C as Choice, c as choiceConfig } from '../Choice-cgCRlPk0.js';
+import '../jsx-runtime-C2uP7l8s.js';
+import 'react';
+import 'clsx';
+import '../hooks/useDeviceTargetClass.js';
+import 'lodash/castArray';
 import 'lodash/camelCase';
-import 'lodash/maxBy';
-import 'lodash/upperFirst';
-import '../hooks/styleAttributes.js';
 import '../context/UIContext.js';
+import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
-import '../Link-ByBzBRDH.js';
+import '../Icon-C1j6rkeI.js';
+import '../_tslib-S-VPg1Cw.js';
 import 'react-inlinesvg';
-import './Tooltip.js';
-import './Title.js';
-import '../constants/componentProps/fill.js';
-import '../constants/componentProps/textAlign.js';
-import '../constants/componentProps/textColor.js';
-import '../constants/componentProps/textGradient.js';
-import '../constants/componentProps/textStyle.js';
-import '../constants/componentProps/textWeight.js';
-import '../constants/componentProps/titleSize.js';
-import '../constants/componentProps/type.js';
-import '../constants/componentProps/wrap.js';
-import '../constants/componentProps/size.js';
-import '../constants/componentProps/textSize.js';
-import '../constants/componentProps/shape.js';
-import 'lodash/castArray';
-
-const choiceConfig = {
-  appearance: {},
-  setAppearance: newComponent => {
-    choiceConfig.appearance = newComponent;
-  }
-};
-const Choice = /*#__PURE__*/React__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 = useRef(null);
-  const optionsRefs = useMemo(() => new Map(options.map(item => [item.value, /*#__PURE__*/createRef()])), [options]);
-  const onChange = useCallback((event, item) => {
-    const isChecked = isMultiple ? event.target.checked : true;
-    setActiveSegment && setActiveSegment(item, isChecked);
-  }, [isMultiple, setActiveSegment]);
-  const borderColorClass = useDeviceTargetClass(props, {
-    prefix: 'border-color_',
-    propsKey: 'borderColor'
-  });
-  const borderWidthClass = useDeviceTargetClass(props, {
-    prefix: 'border-width_',
-    propsKey: 'borderWidth'
-  });
-  const borderTypeClass = useDeviceTargetClass(props, {
-    prefix: 'border_type_',
-    propsKey: 'borderType'
-  });
-  const shapeClass = useDeviceTargetClass(props, {
-    prefix: 'choice_shape_',
-    propsKey: 'shape'
-  });
-  const fillClass = useDeviceTargetClass(props, {
-    prefix: 'fill_',
-    propsKey: 'fill'
-  });
-  const fillDisabledClass = useDeviceTargetClass(props, {
-    prefix: 'fill_disabled_',
-    propsKey: 'fillDisabled'
-  });
-  const fillHoverClass = useDeviceTargetClass(props, {
-    prefix: 'fill_hover_',
-    propsKey: 'fillHover'
-  });
-  const fillActiveClass = useDeviceTargetClass(props, {
-    prefix: 'fill_active_',
-    propsKey: 'fillActive'
-  });
-  const fillActiveDisabledClass = useDeviceTargetClass(props, {
-    prefix: 'fill_active_disabled_',
-    propsKey: 'fillActiveDisabled'
-  });
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: clsx(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.createElement("div", {
-    className: "choice__wrapper"
-  }, options?.map((item, i) => /*#__PURE__*/React__default.createElement("div", {
-    className: clsx('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.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.createElement("label", {
-    className: clsx('choice__item-label', isDisabled && 'choice__item-label_state_disabled'),
-    htmlFor: `${name}-${item.value}`
-  }, before, item.label && /*#__PURE__*/React__default.createElement(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.createElement(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.shape({
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
-  }),
-  after: PropTypes.any,
-  before: PropTypes.any,
-  className: PropTypes.string,
-  isMultiple: PropTypes.bool,
-  labelTextActiveColor: PropTypes.string,
-  labelTextColor: PropTypes.string,
-  labelTextSize: PropTypes.string,
-  name: PropTypes.string,
-  options: PropTypes.arrayOf(PropTypes.shape({
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
-  })),
-  set: PropTypes.string,
-  setActiveSegment: PropTypes.func,
-  size: PropTypes.string,
-  type: PropTypes.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
-    }
-  }
-};
-
-export { Choice, choiceConfig };
+import '../hooks/useStyles.js';
+import 'lodash/maxBy';
+import 'lodash/upperFirst';
+import '../hooks/styleAttributes.js';
+import '../Link-CbCqej5B.js';
+import '../Tooltip-jT5A43he.js';
+import '../Text-edtauAM6.js';
+import '../Title-BUN57fWw.js';

package/dist/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/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/components/Code/index.d.ts

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