@itcase/ui 1.1.5 → 1.1.7

package/dist/cjs/components/Cell.js

@@ -0,0 +1,426 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var index = require('./Icon.js');
+var Text = require('../Text-CfBPhwqK.js');
+var index$1 = require('./Label.js');
+var textSize = require('../constants/componentProps/textSize.js');
+var textColor = require('../constants/componentProps/textColor.js');
+var textAlign = require('../constants/componentProps/textAlign.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+require('react-inlinesvg');
+require('./Link.js');
+require('../constants/componentProps/fill.js');
+require('../constants/componentProps/size.js');
+require('../constants/componentProps/textGradient.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.js');
+require('../constants/componentProps/type.js');
+require('../constants/componentProps/underline.js');
+require('../hooks/useStyles.js');
+require('lodash/camelCase');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('../constants/componentProps/borderColor.js');
+require('../constants/componentProps/borderType.js');
+require('../constants/componentProps/iconSize.js');
+require('../constants/componentProps/shape.js');
+require('../constants/componentProps/strokeColor.js');
+require('./Tooltip.js');
+require('./Title.js');
+require('../constants/componentProps/titleSize.js');
+require('../constants/componentProps/wrap.js');
+require('../jsx-runtime-BCmQOGxJ.js');
+require('lodash/castArray');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+function Cell(props) {
+  const {
+    className,
+    titleIconFill,
+    titleIconFillSize,
+    titleIconItemFill,
+    titleIconFillHover,
+    titleIconStroke,
+    titleIconSrc,
+    titleIconShape,
+    titleIcon,
+    valueIconFill,
+    valueIconFillSize,
+    valueIconItemFill,
+    valueIconFillHover,
+    valueIconStroke,
+    valueIconSrc,
+    valueIconShape,
+    valueIcon,
+    isActive,
+    isDisabled,
+    set,
+    titleTag,
+    valueTag,
+    after,
+    before,
+    mode,
+    size,
+    value,
+    valueTextAlign,
+    valueTextSize,
+    valueTextColor,
+    valueTextWeight,
+    title,
+    titleTextSize,
+    titleTextColor,
+    titleTextTruncate,
+    titleTextWeight,
+    titleTextWrap,
+    showTitleLabel,
+    titleLabelAppearance,
+    titleLabel,
+    titleLabelTextSize,
+    titleLabelShape,
+    titleLabelSize,
+    showValueLabel,
+    valueLabelAppearance,
+    valueLabel,
+    valueLabelTextSize,
+    valueLabelShape,
+    valueLabelSize,
+    valueTextWrap,
+    zeroPadding,
+    zeroGap,
+    reverse,
+    onClick,
+    onMouseEnter
+  } = props;
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
+  const fillActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_active_',
+    propsKey: 'fillActive'
+  });
+  const fillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_disabled_',
+    propsKey: 'fillDisabled'
+  });
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'cell__wrapper_shape_',
+    propsKey: 'shape'
+  });
+  const bgFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'bgFill'
+  });
+  const bgFillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'bgFillHover'
+  });
+  const bgFillActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_active_',
+    propsKey: 'bgFillActive'
+  });
+  const bgFillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_disabled_',
+    propsKey: 'bgFillDisabled'
+  });
+  const bgShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'cell_shape_',
+    propsKey: 'bgShape'
+  });
+  const directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'cell__wrapper_direction_',
+    propsKey: 'direction'
+  });
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'cell', mode && `cell_mode_${mode}`, size && `cell_size_${size}`, set && `cell_set_${set}`, bgFillClass, bgFillHoverClass, isActive && bgFillActiveClass, isDisabled && bgFillDisabledClass, bgShapeClass, widthClass, zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap', reverse && 'cell_reverse'),
+    onClick: onClick,
+    onMouseEnter: onMouseEnter
+  }, before && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "cell__before"
+  }, before), /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('cell__wrapper', directionClass, fillClass, fillHoverClass, isActive && fillActiveClass, isDisabled && fillDisabledClass, shapeClass)
+  }, title && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "cell__data"
+  }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    className: "cell__title",
+    size: titleTextSize,
+    tag: titleTag,
+    textColor: titleTextColor,
+    textTruncate: titleTextTruncate,
+    textWeight: titleTextWeight,
+    textWrap: titleTextWrap
+  }, title), (titleIcon || titleIconSrc) && /*#__PURE__*/React__default.default.createElement(index.Icon, {
+    className: "cell__icon",
+    fill: titleIconFill,
+    fillSize: titleIconFillSize,
+    iconFill: titleIconItemFill,
+    iconFillHover: titleIconFillHover,
+    iconStroke: titleIconStroke,
+    imageSrc: titleIconSrc,
+    shape: titleIconShape,
+    SvgImage: titleIcon
+  }), showTitleLabel && /*#__PURE__*/React__default.default.createElement(index$1.Label, {
+    appearance: titleLabelAppearance,
+    label: titleLabel,
+    labelTextSize: titleLabelTextSize,
+    shape: titleLabelShape,
+    size: titleLabelSize
+  })), value && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "cell__data"
+  }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    className: "cell__value",
+    size: valueTextSize,
+    tag: valueTag,
+    textAlign: valueTextAlign,
+    textColor: valueTextColor,
+    textWeight: valueTextWeight,
+    textWrap: valueTextWrap
+  }, value), (valueIcon || valueIconSrc) && /*#__PURE__*/React__default.default.createElement(index.Icon, {
+    className: "cell__icon",
+    fill: valueIconFill,
+    fillSize: valueIconFillSize,
+    iconFill: valueIconItemFill,
+    iconFillHover: valueIconFillHover,
+    iconStroke: valueIconStroke,
+    imageSrc: valueIconSrc,
+    shape: valueIconShape,
+    SvgImage: valueIcon
+  }), showValueLabel && /*#__PURE__*/React__default.default.createElement(index$1.Label, {
+    appearance: valueLabelAppearance,
+    label: valueLabel,
+    labelTextSize: valueLabelTextSize,
+    shape: valueLabelShape,
+    size: valueLabelSize
+  }))), after && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "cell__after"
+  }, after));
+}
+Cell.propTypes = {
+  after: PropTypes__default.default.any,
+  before: PropTypes__default.default.any,
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  isActive: PropTypes__default.default.bool,
+  isDisabled: PropTypes__default.default.bool,
+  title: PropTypes__default.default.string,
+  titleIcon: PropTypes__default.default.any,
+  titleIconFill: PropTypes__default.default.string,
+  titleIconStroke: PropTypes__default.default.string,
+  titleTextColor: PropTypes__default.default.oneOf(textColor.default),
+  titleTextSize: PropTypes__default.default.oneOf(textSize.default),
+  value: PropTypes__default.default.oneOfType([PropTypes__default.default.element, PropTypes__default.default.string]),
+  valueIcon: PropTypes__default.default.any,
+  valueIconFill: PropTypes__default.default.string,
+  valueIconStroke: PropTypes__default.default.string,
+  valueTextAlign: PropTypes__default.default.oneOf(textAlign.default),
+  valueTextColor: PropTypes__default.default.oneOf(textColor.default),
+  valueTextSize: PropTypes__default.default.oneOf(textSize.default),
+  onClick: PropTypes__default.default.func,
+  onMouseEnter: PropTypes__default.default.func
+};
+Cell.defaultProps = {
+  isDisabled: false,
+  textSize: 'p'
+};
+Cell.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Cell",
+  "props": {
+    "isDisabled": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "textSize": {
+      "defaultValue": {
+        "value": "'p'",
+        "computed": false
+      },
+      "required": false
+    },
+    "after": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "before": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "children": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "className": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "isActive": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "title": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "titleIcon": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "titleIconFill": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "titleIconStroke": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "titleTextColor": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "textColorProps"
+      },
+      "required": false
+    },
+    "titleTextSize": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "textSizeProps"
+      },
+      "required": false
+    },
+    "value": {
+      "description": "",
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "element"
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false
+    },
+    "valueIcon": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "valueIconFill": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "valueIconStroke": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "valueTextAlign": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "textAlignProps"
+      },
+      "required": false
+    },
+    "valueTextColor": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "textColorProps"
+      },
+      "required": false
+    },
+    "valueTextSize": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "textSizeProps"
+      },
+      "required": false
+    },
+    "onClick": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
+    "onMouseEnter": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    }
+  }
+};
+
+exports.Cell = Cell;

package/dist/cjs/components/Checkbox.js

@@ -0,0 +1,166 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var Text = require('../Text-CfBPhwqK.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+require('../jsx-runtime-BCmQOGxJ.js');
+require('../hooks/useStyles.js');
+require('lodash/camelCase');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('lodash/castArray');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+const checkboxConfig = {
+  state: {},
+  setState: newComponent => {
+    checkboxConfig.state = newComponent;
+  },
+  appearance: {},
+  setAppearance: newComponent => {
+    checkboxConfig.appearance = newComponent;
+  }
+};
+function Checkbox(props) {
+  const {
+    appearance,
+    before,
+    after,
+    state,
+    id,
+    tag: Tag,
+    className,
+    checked,
+    disabled,
+    descTextSize,
+    descTextWidth,
+    descTextColor,
+    desc,
+    label,
+    labelTextSize,
+    labelTextWidth,
+    labelTextColor,
+    onBlur,
+    onChange,
+    onFocus,
+    value
+  } = props;
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'checkbox_shape_',
+    propsKey: 'shape'
+  });
+  const stateShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'checkbox__state_shape_',
+    propsKey: 'stateShape'
+  });
+  const stateFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: checked ? 'stateFillChecked' : 'stateFill'
+  });
+  const stateFillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: checked ? 'stateFillDisabledChecked' : 'stateFillDisabled'
+  });
+  const stateCheckmarkFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'checkbox_checkmark_fill_',
+    propsKey: disabled ? 'stateCheckmarkFillDisabled' : 'stateCheckmarkFill'
+  });
+  const stateBorderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_',
+    propsKey: 'stateBorderWidth'
+  });
+  const stateBorderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: checked ? 'stateBorderColorChecked' : 'stateBorderColor'
+  });
+  const stateBorderColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: checked ? 'stateBorderColorDisabledChecked' : 'stateBorderColorDisabled'
+  });
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  return /*#__PURE__*/React__default.default.createElement(Tag, {
+    className: clsx__default.default(className, 'checkbox', fillClass, shapeClass, widthClass),
+    htmlFor: Tag === 'label' && id
+  }, before, /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('checkbox__item', stateCheckmarkFillClass || checkboxConfig.appearance[appearance]?.stateCheckmarkFill && `checkbox_checkmark_fill_${checkboxConfig.appearance[appearance].stateCheckmarkFill}`.replace(/([A-Z])/g, '-$1').toLowerCase())
+  }, /*#__PURE__*/React__default.default.createElement("input", {
+    checked: checked,
+    className: "checkbox__input",
+    disabled: disabled,
+    id: id,
+    type: "checkbox",
+    value: value,
+    onBlur: onBlur,
+    onChange: onChange,
+    onFocus: onFocus
+  }), /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('checkbox__state', disabled ? stateFillDisabledClass : stateFillClass, disabled ? stateBorderColorDisabledClass : stateBorderColorClass || checkboxConfig.appearance[appearance]?.stateBorderColor && `border-color_${checkboxConfig.appearance[appearance].stateBorderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), stateShapeClass || checkboxConfig.appearance[appearance]?.stateShape && `checkbox__state_shape_${checkboxConfig.appearance[appearance].stateShape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), stateBorderWidthClass || checkboxConfig.appearance[appearance]?.stateBorderWidth && `border-width_${checkboxConfig.appearance[appearance].stateBorderWidth}`.replace(/([A-Z])/g, '-$1').toLowerCase())
+  }, "\xA0"), /*#__PURE__*/React__default.default.createElement("div", {
+    className: "checkbox__state-checkmark"
+  }, "\xA0")), label && /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    className: "checkbox__label",
+    size: labelTextSize || checkboxConfig.appearance[appearance]?.labelTextSize,
+    textColor: labelTextColor || checkboxConfig.appearance[appearance]?.labelTextColor,
+    textWeight: labelTextWidth
+  }, label), desc && /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    className: "checkbox__desc",
+    size: descTextSize || checkboxConfig.appearance[appearance]?.descTextSize,
+    textColor: descTextColor || checkboxConfig.appearance[appearance]?.descTextColor,
+    textWeight: descTextWidth
+  }, desc), after && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "checkbox__after"
+  }, after));
+}
+Checkbox.propTypes = {
+  className: PropTypes__default.default.string,
+  tag: PropTypes__default.default.string
+};
+Checkbox.defaultProps = {
+  tag: 'label'
+};
+Checkbox.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Checkbox",
+  "props": {
+    "tag": {
+      "defaultValue": {
+        "value": "'label'",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "className": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    }
+  }
+};
+
+exports.Checkbox = Checkbox;
+exports.checkboxConfig = checkboxConfig;