linear-react-components-ui 1.1.23 → 1.1.24-beta.0

package/lib/inputs/period/index.js

@@ -43,9 +43,7 @@ const PeriodPicker = props => {
     hintPosition = 'below',
     themePopover = 'light',
     popoverAlign = 'left',
-    gridLayout,
-    nameDateInitial = 'valueInitial',
-    nameDateFinal = 'valueFinal'
+    gridLayout
   } = props;
   const idValueInitial = (0, _react.useId)();
   const idValueFinal = (0, _react.useId)();
@@ -246,7 +244,7 @@ const PeriodPicker = props => {
         name: changingAux
       } = event.target;
       if (value && value.replace(/\D/g, '').trim().length !== 0) {
-        if (changingAux === nameDateInitial) {
+        if (changingAux === 'valueInitial') {
           setValueInitial(undefined);
         } else {
           setValueFinal(undefined);
@@ -270,21 +268,21 @@ const PeriodPicker = props => {
     const dateObj = (0, _moment.default)(value, 'DD/MM/YYYY');
     if (showCalendarValueInitial) inputInitialRef.current?.focus();
     if (showCalendarValueFinal) inputFinalRef.current?.focus();
-    if (valueDateName === nameDateFinal && valueInitial && dateObj.isBefore(valueInitial)) {
+    if (valueDateName === 'valueFinal' && valueInitial && dateObj.isBefore(valueInitial)) {
       setValueInitial(dateObj);
       setValueFinal(valueInitial);
       onDateChange({
         initial: dateObj,
         final: valueInitial
       });
-    } else if (valueDateName === nameDateInitial && valueFinal && dateObj.isAfter(valueFinal)) {
+    } else if (valueDateName === 'valueInitial' && valueFinal && dateObj.isAfter(valueFinal)) {
       setValueInitial(valueFinal);
       setValueFinal(dateObj);
       onDateChange({
         initial: valueFinal,
         final: dateObj
       });
-    } else if (valueDateName === nameDateInitial) {
+    } else if (valueDateName === 'valueInitial') {
       setValueInitial(dateObj);
       onDateChange({
         initial: dateObj,
@@ -297,7 +295,7 @@ const PeriodPicker = props => {
         final: dateObj
       });
     }
-    if (valueDateName === nameDateInitial && !valueFinal && shouldOpenDropdown) {
+    if (valueDateName === 'valueInitial' && !valueFinal && shouldOpenDropdown) {
       inputFinalRef.current?.focus();
       setTimeout(() => setShowCalendarValueFinal(true), 100);
     }
@@ -407,7 +405,7 @@ const PeriodPicker = props => {
         handlerClose: () => onCloseDateDialog('valueInitial'),
         dialogSize: dialogSize,
         onOpenChange: setShowCalendarValueInitial
-      }, getCalendar(valueInitial, calendarColorStyle, nameDateInitial));
+      }, getCalendar(valueInitial, calendarColorStyle, 'valueInitial'));
     }
     return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
       containerRef: wrapperBaseInputPeriodRef,
@@ -426,7 +424,7 @@ const PeriodPicker = props => {
         handlerClose: () => onCloseDateDialog('valueFinal'),
         dialogSize: dialogSize,
         onOpenChange: setShowCalendarValueFinal
-      }, getCalendar(valueFinal, calendarColorStyle, nameDateFinal));
+      }, getCalendar(valueFinal, calendarColorStyle, 'valueFinal'));
     }
     return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
       containerRef: wrapperBaseInputPeriodRef,

package/lib/inputs/period/types.d.ts

@@ -1,11 +1,11 @@
 import { Moment } from 'moment';
-import { ReactNode, RefObject, MouseEvent } from 'react';
+import { ReactNode, RefObject } from 'react';
 import { ColorStyles } from '../../@types/ColorStyles.js';
 import { Period } from '../../@types/Period.js';
 import { PermissionAttr } from '../../@types/PermissionAttr.js';
 import { CustomInputEvent } from '../base/types.js';
 import '../../@types/Align.js';
-import '../../internals/types.js';
+import '../../tooltip/types.js';
 import '../../@types/Position.js';
 
 type DateTypes = 'today' | 'week' | 'lastweek' | 'last15' | 'month' | 'lastmonth';
@@ -55,14 +55,11 @@ interface IPeriodPickerProps {
     calendarColorStyle?: ColorStyles;
     required?: boolean;
     onChange?: (event?: CustomInputEvent, maskValue?: string, date?: Period) => void;
-    onClick?: (event?: MouseEvent) => void;
     disabled?: boolean;
     permissionAttr?: PermissionAttr;
     errorMessages?: string[];
     name?: string;
     hint?: string;
-    nameDateInitial?: string;
-    nameDateFinal?: string;
     hintPosition?: 'below' | 'onLabelRight';
     onBlur?: (e: CustomInputEvent) => void;
     onFocus?: (e: CustomInputEvent) => void;

package/lib/inputs/search/index.d.ts

@@ -5,7 +5,7 @@ import '../../@types/DataCombo.js';
 import '../base/types.js';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
-import '../../internals/types.js';
+import '../../tooltip/types.js';
 import '../../@types/Position.js';
 import '../../drawer/types.js';
 import '../../@types/Icon.js';

package/lib/inputs/select/ActionButtons.d.ts

@@ -5,7 +5,7 @@ import '../../@types/DataCombo.js';
 import '../base/types.js';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
-import '../../internals/types.js';
+import '../../tooltip/types.js';
 import '../../@types/Position.js';
 import '../../drawer/types.js';
 import '../../@types/Icon.js';

package/lib/inputs/select/Dropdown.d.ts

@@ -5,7 +5,7 @@ import '../../@types/DataCombo.js';
 import '../base/types.js';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
-import '../../internals/types.js';
+import '../../tooltip/types.js';
 import '../../@types/Position.js';
 import '../../drawer/types.js';
 import '../../@types/Icon.js';

package/lib/inputs/select/helper.d.ts

@@ -6,7 +6,7 @@ import '../../@types/DataCombo.js';
 import '../base/types.js';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
-import '../../internals/types.js';
+import '../../tooltip/types.js';
 import '../../@types/Position.js';
 import '../../drawer/types.js';
 import '../../@types/Icon.js';

package/lib/inputs/select/index.d.ts

@@ -5,7 +5,7 @@ import '../../@types/PermissionAttr.js';
 import '../base/types.js';
 import 'react';
 import '../../@types/Period.js';
-import '../../internals/types.js';
+import '../../tooltip/types.js';
 import '../../@types/Position.js';
 
 declare const SelectField: (props: ISelectFieldProps) => JSX.Element;

package/lib/inputs/select/multiple/Selecteds.d.ts

@@ -5,7 +5,7 @@ import '../../../@types/PermissionAttr.js';
 import '../../base/types.js';
 import 'react';
 import '../../../@types/Period.js';
-import '../../../internals/types.js';
+import '../../../tooltip/types.js';
 import '../../../@types/Position.js';
 
 declare const Selecteds: ({ currents, descriptionKey, idKey, disabled, handlerOnUnselect, }: ISelectedsMultipleProps) => JSX.Element;

package/lib/inputs/select/multiple/index.d.ts

@@ -5,7 +5,7 @@ import '../../../@types/PermissionAttr.js';
 import '../../base/types.js';
 import 'react';
 import '../../../@types/Period.js';
-import '../../../internals/types.js';
+import '../../../tooltip/types.js';
 import '../../../@types/Position.js';
 
 declare const MultipleSelect: (props: IMultipleSelectProps) => JSX.Element;

package/lib/inputs/select/simple/index.d.ts

@@ -5,7 +5,7 @@ import '../../../@types/PermissionAttr.js';
 import '../../base/types.js';
 import 'react';
 import '../../../@types/Period.js';
-import '../../../internals/types.js';
+import '../../../tooltip/types.js';
 import '../../../@types/Position.js';
 
 declare const SimpleSelect: (props: ISimpleSelectProps) => JSX.Element;

package/lib/inputs/select/types.d.ts

@@ -4,7 +4,7 @@ import { PermissionAttr } from '../../@types/PermissionAttr.js';
 import { CustomInputEvent } from '../base/types.js';
 import { MutableRefObject } from 'react';
 import '../../@types/Period.js';
-import '../../internals/types.js';
+import '../../tooltip/types.js';
 import '../../@types/Position.js';
 
 type AllOptions = {

package/lib/inputs/text/index.d.ts

@@ -4,7 +4,7 @@ import '../../@types/PermissionAttr.js';
 import '../base/types.js';
 import 'react';
 import '../../@types/Align.js';
-import '../../internals/types.js';
+import '../../tooltip/types.js';
 import '../../@types/Position.js';
 
 declare const TextField: (props: ITextField) => JSX.Element;

package/lib/inputs/text/types.d.ts

@@ -1,13 +1,12 @@
 import { Period } from '../../@types/Period.js';
 import { PermissionAttr } from '../../@types/PermissionAttr.js';
 import { IBaseProps, CustomInputEvent } from '../base/types.js';
-import { WithTooltipProps } from '../../internals/types.js';
 import 'react';
 import '../../@types/Align.js';
+import '../../tooltip/types.js';
 import '../../@types/Position.js';
 
-type CommonProperties = Pick<WithTooltipProps, 'tooltip' | 'tooltipPosition' | 'tooltipWidth'>;
-interface ITextField extends IBaseProps, CommonProperties {
+interface ITextField extends IBaseProps {
     value?: string | string[];
     required?: boolean;
     name?: string;

package/lib/inputs/textarea/index.d.ts

@@ -4,7 +4,7 @@ import 'react';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
 import '../../@types/PermissionAttr.js';
-import '../../internals/types.js';
+import '../../tooltip/types.js';
 import '../../@types/Position.js';
 
 declare const TextArea: (props: ITextAreaProps) => JSX.Element;

package/lib/inputs/textarea/types.d.ts

@@ -3,7 +3,7 @@ import 'react';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
 import '../../@types/PermissionAttr.js';
-import '../../internals/types.js';
+import '../../tooltip/types.js';
 import '../../@types/Position.js';
 
 interface ITextAreaProps extends IBaseProps {

package/lib/inputs/types.d.ts

@@ -5,7 +5,7 @@ import { IBaseProps, CustomInputEvent } from './base/types.js';
 import { IDrawerProps } from '../drawer/types.js';
 import { TextAlign } from '../@types/Align.js';
 import '../@types/Period.js';
-import '../internals/types.js';
+import '../tooltip/types.js';
 import '../@types/Position.js';
 import '../@types/Icon.js';
 import '../icons/helper.js';

package/lib/inputs2/checkboxfield/index.d.ts

@@ -0,0 +1,7 @@
+import 'react';
+import '../../@types/Size.js';
+import '../../@types/ColorStyles.js';
+import '../../tooltip/types.js';
+import '../../@types/Position.js';
+import '../../@types/PermissionAttr.js';
+export { C as CheckboxFieldInputProps, I as Input } from '../../index-43ad8140.js';

package/lib/inputs2/checkboxfield/index.js

@@ -0,0 +1,146 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Input = void 0;
+require("../../assets/styles/checkbox2.scss");
+var _react = _interopRequireDefault(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _hint = _interopRequireDefault(require("../../hint"));
+var _icons = _interopRequireDefault(require("../../icons"));
+var _gridlayout = _interopRequireDefault(require("../../gridlayout"));
+var _popover = _interopRequireWildcard(require("../../popover"));
+var _tooltip = require("../../tooltip");
+var _permissionValidations = require("../../permissionValidations");
+const _excluded = ["name", "label", "errors", "onChange", "size", "onDeniedActions", "permissionAttr", "variant", "customClass", "customClassLabel", "customClassWrapper", "labelUppercase", "rounded", "customClassInputContainer", "skeletonize", "hintPosition", "gridLayout", "themePopover", "popoverAlign", "tooltip", "tooltipPosition", "tooltipWidth"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+const options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible, _permissionValidations.OPTIONS_ON_DENIED.readOnly, _permissionValidations.OPTIONS_ON_DENIED.hideContent];
+const Input = exports.Input = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const {
+      name,
+      label,
+      errors,
+      onChange,
+      size = 'default',
+      onDeniedActions = undefined,
+      permissionAttr = undefined,
+      variant = 'default',
+      customClass = '',
+      customClassLabel = '',
+      customClassWrapper = '',
+      labelUppercase = false,
+      rounded = false,
+      customClassInputContainer = '',
+      skeletonize = false,
+      hintPosition = 'below',
+      gridLayout = undefined,
+      themePopover = 'light',
+      popoverAlign = 'left',
+      tooltip,
+      tooltipPosition,
+      tooltipWidth
+    } = props,
+    rest = _objectWithoutProperties(props, _excluded);
+  const onDenied = _react.default.useMemo(() => {
+    return onDeniedActions || (0, _permissionValidations.actionsOnPermissionDenied)(options, permissionAttr);
+  }, [onDeniedActions, permissionAttr]);
+  const {
+    hideContent,
+    unvisible
+  } = onDenied;
+  const inputId = _react.default.useMemo(() => props.id || `checkboxfield-${name}`, [props.id, name]);
+  const inputRootRef = _react.default.useRef(null);
+  const isChecked = props.checked ?? Boolean(props.value);
+  const hasLabel = !_lodash.default.isEmpty(props?.label);
+  const isReadOnly = Boolean(props.readOnly || onDenied.readOnly);
+  const isDisabled = Boolean(props.disabled || onDenied.disabled);
+  const hasHintMessages = Boolean(props.hint?.length);
+  const hasValidationErrors = Boolean(errors?.length);
+  const handleOnChange = _react.default.useCallback(event => {
+    if (isReadOnly || isDisabled) return;
+    Object.defineProperty(event.target, 'value', {
+      value: event.target.checked,
+      writable: true,
+      enumerable: true,
+      configurable: true
+    });
+    onChange?.(event);
+  }, [isReadOnly, isDisabled, onChange]);
+  if (unvisible || hideContent) return null;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_gridlayout.default, {
+    cols: gridLayout
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: inputRootRef,
+    className: `checkbox-field-root ${customClassWrapper}`,
+    "data-state-error": hasValidationErrors
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    "data-state-skeletonize": skeletonize,
+    className: `container ${customClassInputContainer}`
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "input-root"
+  }, /*#__PURE__*/_react.default.createElement("input", _extends({
+    ref: ref,
+    id: inputId,
+    name: name,
+    readOnly: isReadOnly,
+    disabled: isDisabled,
+    className: `input ${customClass}`,
+    tabIndex: !isReadOnly ? 0 : -1,
+    "data-state-size": size,
+    "data-state-error": hasValidationErrors,
+    "data-state-variant": variant,
+    "data-state-rounded": rounded,
+    "data-state-read-only": isReadOnly,
+    "data-state-skeletonize": skeletonize
+  }, rest, {
+    type: "checkbox",
+    checked: isChecked,
+    onChange: handleOnChange
+  })), /*#__PURE__*/_react.default.createElement(_icons.default, {
+    customClass: "checkmark",
+    name: "checkmark",
+    colorStyle: "default"
+  })), hasLabel && /*#__PURE__*/_react.default.createElement("label", {
+    className: `label ${customClassLabel}`,
+    title: label,
+    htmlFor: inputId,
+    "aria-readonly": isReadOnly,
+    "aria-disabled": isDisabled,
+    "data-state-skeletonize": skeletonize,
+    "data-state-disabled": isDisabled,
+    "data-state-read-only": isReadOnly,
+    "data-state-uppercase": labelUppercase,
+    "data-state-input-required": props.required
+  }, label), hasLabel && hasHintMessages && hintPosition === 'onLabelRight' && !skeletonize && /*#__PURE__*/_react.default.createElement(_popover.default, {
+    customClass: "label-popover",
+    theme: themePopover,
+    align: popoverAlign,
+    iconColor: "#03bde2"
+  }, /*#__PURE__*/_react.default.createElement(_popover.PopoverText, {
+    text: props?.hint
+  }))), hintPosition === 'below' && /*#__PURE__*/_react.default.createElement(_hint.default, {
+    customClass: "hint",
+    description: props.hint,
+    disabled: isDisabled,
+    skeletonize: skeletonize,
+    visible: hasHintMessages
+  }), hasValidationErrors && /*#__PURE__*/_react.default.createElement("span", {
+    className: "error",
+    "data-state-skeletonize": skeletonize,
+    "aria-describedby": String(name).concat('-errors')
+  }, errors?.map((error, index) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+    key: `${index + 1}-${error}`
+  }, error, "\xA0"))))), /*#__PURE__*/_react.default.createElement(_tooltip.Tooltip, {
+    targetRef: inputRootRef,
+    text: tooltip,
+    width: tooltipWidth,
+    position: tooltipPosition
+  }));
+});
+Input.displayName = 'CheckboxFieldInput';

package/lib/inputs2/colorfield/index.d.ts

@@ -0,0 +1,9 @@
+import 'react';
+export { LeftSlot, RightSlot } from '../slot/index.js';
+import '../../index-772f9f1a.js';
+export { C as ColorFieldInputProps, I as Input } from '../../index-8a59cf4b.js';
+import '../../@types/Align.js';
+import '../../@types/ColorStyles.js';
+import '../../@types/Position.js';
+import '../../@types/PermissionAttr.js';
+import '../../tooltip/types.js';

package/lib/inputs2/colorfield/index.js

@@ -0,0 +1,119 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Input = void 0;
+Object.defineProperty(exports, "LeftSlot", {
+  enumerable: true,
+  get: function () {
+    return _slot.LeftSlot;
+  }
+});
+Object.defineProperty(exports, "RightSlot", {
+  enumerable: true,
+  get: function () {
+    return _slot.RightSlot;
+  }
+});
+require("../../assets/styles/colorpicker.scss");
+var _react = _interopRequireDefault(require("react"));
+var _slot = require("../slot");
+var TextField = _interopRequireWildcard(require("../textfield"));
+var _buttons = _interopRequireDefault(require("../../../lib/buttons"));
+var _permissionValidations = require("../../../lib/permissionValidations");
+const _excluded = ["name", "isTypeText", "defaultValue", "onChange", "permissionAttr", "onDeniedActions"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+const options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible, _permissionValidations.OPTIONS_ON_DENIED.readOnly, _permissionValidations.OPTIONS_ON_DENIED.hideContent];
+const Input = exports.Input = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const {
+      name,
+      isTypeText = true,
+      defaultValue = '',
+      onChange,
+      permissionAttr = undefined,
+      onDeniedActions = undefined
+    } = props,
+    restProps = _objectWithoutProperties(props, _excluded);
+  const inputRefText = _react.default.useRef(null);
+  const inputRefColor = _react.default.useRef(null);
+  const mirrorRef = _react.default.useRef(null);
+  const onDenied = _react.default.useMemo(() => {
+    return onDeniedActions || (0, _permissionValidations.actionsOnPermissionDenied)(options, permissionAttr);
+  }, [onDeniedActions, permissionAttr]);
+  const {
+    hideContent,
+    unvisible
+  } = onDenied;
+  const syncColorValues = _react.default.useCallback(value => {
+    if (mirrorRef.current) {
+      mirrorRef.current.style.backgroundColor = value;
+    }
+    if (inputRefText.current && inputRefText.current.value !== value) {
+      inputRefText.current.value = value;
+    }
+    if (inputRefColor.current && inputRefColor.current.value !== value) {
+      inputRefColor.current.value = value;
+    }
+  }, []);
+  const handleTextInputChange = e => {
+    const newValue = e.target.value;
+    syncColorValues(newValue);
+    onChange?.(e);
+  };
+  const handleColorInputChange = e => {
+    const newValue = e.target.value;
+    syncColorValues(newValue);
+    onChange?.(e);
+  };
+  const onPaletteButtonClick = () => {
+    inputRefColor.current?.click();
+  };
+  _react.default.useLayoutEffect(() => {
+    syncColorValues(String(defaultValue));
+  }, [defaultValue, syncColorValues]);
+  if (unvisible || hideContent) return null;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(TextField.Input, _extends({}, restProps, {
+    ref: ref,
+    name: name,
+    type: isTypeText ? 'text' : 'color',
+    defaultValue: String(defaultValue),
+    style: {
+      borderLeft: '1px solid #eeee'
+    },
+    onChange: handleTextInputChange
+  }), isTypeText && /*#__PURE__*/_react.default.createElement(_slot.LeftSlot, null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      backgroundColor: String(defaultValue)
+    },
+    ref: mirrorRef,
+    className: "colorpicker-colormirror"
+  })), isTypeText && /*#__PURE__*/_react.default.createElement(_slot.RightSlot, null, /*#__PURE__*/_react.default.createElement(_buttons.default, {
+    className: "colorpicker-palettebutton",
+    onClick: onPaletteButtonClick,
+    onKeyDown: e => {
+      if (e.code === 'Space' || e.key === ' ') {
+        e.preventDefault();
+        onPaletteButtonClick();
+      }
+    },
+    iconName: "pallete"
+  }))), isTypeText && /*#__PURE__*/_react.default.createElement("input", {
+    ref: inputRefColor,
+    type: "color",
+    style: {
+      position: 'absolute',
+      opacity: 0,
+      pointerEvents: 'none'
+    },
+    defaultValue: String(defaultValue),
+    onChange: handleColorInputChange,
+    tabIndex: -1
+  }));
+});
+Input.displayName = 'ColorFieldInput';

package/lib/inputs2/date/base/constants.d.ts

@@ -0,0 +1,7 @@
+import React__default from 'react';
+
+declare const useCalendarPosition: (calendarBoxOpen: boolean, containerRef: React__default.RefObject<HTMLDivElement | null>) => {
+    calendarBoxStyles: React__default.CSSProperties;
+};
+
+export { useCalendarPosition };

package/lib/inputs2/date/base/constants.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCalendarPosition = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const useCalendarPosition = (calendarBoxOpen, containerRef) => {
+  const [calendarBoxStyles, setCalendarBoxStyles] = _react.default.useState({});
+  _react.default.useEffect(() => {
+    const updatePosition = () => {
+      const selectPositionOnScreen = containerRef.current?.getBoundingClientRect();
+      if (selectPositionOnScreen) {
+        const {
+          top,
+          left,
+          width,
+          height
+        } = selectPositionOnScreen;
+        setCalendarBoxStyles({
+          top: top + height + window.scrollY,
+          left: left + window.scrollX,
+          width: width,
+          position: 'absolute'
+        });
+      }
+    };
+    if (calendarBoxOpen) {
+      updatePosition();
+      window.addEventListener('resize', updatePosition);
+      window.addEventListener('scroll', updatePosition, true);
+    }
+    return () => {
+      window.removeEventListener('resize', updatePosition);
+      window.removeEventListener('scroll', updatePosition, true);
+    };
+  }, [calendarBoxOpen, containerRef]);
+  return {
+    calendarBoxStyles
+  };
+};
+exports.useCalendarPosition = useCalendarPosition;

package/lib/inputs2/date/base/index.d.ts

@@ -0,0 +1,12 @@
+import React__default from 'react';
+import { BaseDateInputRootProps, BaseDateInputLabelProps, BaseDateInputContainerProps, BaseDateInputProps, BaseDateInputTriggersProps } from '../types.js';
+import '../../../@types/ColorStyles.js';
+import '../../../@types/Position.js';
+
+declare const Root: React__default.ForwardRefExoticComponent<BaseDateInputRootProps & React__default.RefAttributes<HTMLDivElement>>;
+declare const Label: React__default.ForwardRefExoticComponent<BaseDateInputLabelProps & React__default.RefAttributes<HTMLSpanElement>>;
+declare const Container: React__default.ForwardRefExoticComponent<BaseDateInputContainerProps & React__default.RefAttributes<HTMLDivElement>>;
+declare const Input: React__default.ForwardRefExoticComponent<BaseDateInputProps & React__default.RefAttributes<HTMLInputElement>>;
+declare const Triggers: React__default.ForwardRefExoticComponent<BaseDateInputTriggersProps & React__default.RefAttributes<HTMLDivElement>>;
+
+export { Container, Input, Label, Root, Triggers };