@onesy/ui-react 1.0.0

package/esm/Clock/Clock.js

@@ -0,0 +1,466 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const _excluded = ["tonal", "color", "size", "value", "valueDefault", "onChange", "selecting", "selectingDefault", "onChangeSelecting", "format", "dayTime", "hour", "minute", "second", "autoNext", "min", "max", "validate", "readOnly", "disabled", "valid", "renderValue", "onDoneSelecting", "onClick", "className", "BackgroundProps"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import { classNames, style, useOnesyTheme } from '@onesy/style-react';
+import { clamp, getLeadingZerosNumber, is, isEnvironment, unique } from '@onesy/utils';
+import { OnesyDate, is as isOnesyDate, set } from '@onesy/date';
+import RoundMeterElement from '../RoundMeter';
+import PathElement from '../Path';
+import { staticClassName } from '../utils';
+const useStyle = style(theme => ({
+  root: {
+    userSelect: 'none',
+    touchAction: 'none',
+    '& .onesy-RoundMeter-children, & .onesy-RoundMeter-labels': {
+      pointerEvents: 'none'
+    },
+    '& svg > *': {
+      cursor: 'grab'
+    }
+  },
+  mouseDown: {
+    '& svg > *': {
+      cursor: 'grabbing'
+    }
+  }
+}), {
+  name: 'onesy-Clock'
+});
+const Clock = /*#__PURE__*/React.forwardRef((props__, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyClock?.props?.default), props__), [props__]);
+  const RoundMeter = React.useMemo(() => theme?.elements?.RoundMeter || RoundMeterElement, [theme]);
+  const Path = React.useMemo(() => theme?.elements?.Path || PathElement, [theme]);
+  const {
+      tonal = true,
+      color = 'primary',
+      size = 'regular',
+      value: value_,
+      valueDefault,
+      onChange,
+      selecting: selecting_,
+      selectingDefault,
+      onChangeSelecting,
+      format = '12',
+      dayTime = 'am',
+      hour = true,
+      minute = true,
+      second = false,
+      autoNext,
+      min,
+      max,
+      validate,
+      readOnly,
+      disabled,
+      valid: valid_,
+      renderValue,
+      onDoneSelecting,
+      onClick: onClick_,
+      className,
+      BackgroundProps
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const [value, setValue] = React.useState((valueDefault !== undefined ? valueDefault : value_) || new OnesyDate());
+  const [selecting, setSelecting] = React.useState((selectingDefault !== undefined ? selectingDefault : selecting_) || 'hour');
+  const [mouseDown, setMouseDown] = React.useState(false);
+  const refs = {
+    root: React.useRef(undefined),
+    middle: React.useRef(undefined),
+    mouseDown: React.useRef(undefined),
+    value: React.useRef(),
+    selecting: React.useRef(),
+    autoNext: React.useRef(),
+    hour: React.useRef(),
+    minute: React.useRef(),
+    second: React.useRef(),
+    format: React.useRef(),
+    dayTime: React.useRef(undefined),
+    previous: React.useRef(selecting)
+  };
+  refs.mouseDown.current = mouseDown;
+  refs.value.current = value;
+  refs.hour.current = hour;
+  refs.minute.current = minute;
+  refs.second.current = second;
+  refs.selecting.current = selecting;
+  refs.autoNext.current = autoNext;
+  refs.format.current = format;
+  refs.dayTime.current = dayTime;
+  const resolve = React.useCallback(function () {
+    let valueNew = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : refs.value.current;
+    let dayTimeValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : refs.dayTime.current;
+    // Resolve the range value
+    const valueHour = valueNew.hour;
+    if (format === '12') {
+      if (dayTimeValue === 'am' && valueHour > 12) return set(valueHour - 12, 'hour', valueNew);
+      if (dayTimeValue === 'pm' && valueHour < 12) return set(valueHour + 12, 'hour', valueNew);
+    }
+    return valueNew;
+  }, [value, dayTime, format]);
+  const inputToValue = React.useCallback(function (valueNew) {
+    let unit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : refs.selecting.current;
+    let onesyDate = new OnesyDate(refs.value.current);
+    let valueTime = valueNew;
+    if (is('string', valueTime) && valueTime.startsWith('0')) valueTime = valueTime.slice(1);
+    valueTime = +valueTime;
+    if (unit === 'hour') onesyDate = set(format === '12' && dayTime === 'pm' ? valueTime + 12 : valueTime, 'hour', onesyDate);else onesyDate = set(valueTime, unit, onesyDate);
+    return resolve(onesyDate);
+  }, [value, format, dayTime, hour, minute, second]);
+  const onMove = React.useCallback((x_, y_) => {
+    const rectMiddle = refs.middle.current.getBoundingClientRect();
+    const x = x_ - rectMiddle.x;
+    const y = y_ - rectMiddle.y;
+    const radians = Math.atan2(x, y);
+    const degrees = radians * 180 / Math.PI;
+    const angle = 180 - degrees;
+
+    // Make array of values
+    // for hours, minutes and seconds
+    // with +- 50% around the value
+
+    // Find item in that array that this angle fits within
+    let valuesAll = [];
+    if (refs.selecting.current === 'hour') {
+      const part = 360 / 12;
+      valuesAll = Array.from({
+        length: 12
+      }).map((item, index_) => [part * index_ - part / 2, part * index_ + part / 2]);
+      let index = valuesAll.findIndex(item => angle >= item[0] && angle <= item[1]);
+      if (index === -1 || index === 0) index = refs.format.current === '24' ? 0 : 12;
+      if (refs.format.current === '24') {
+        let within = false;
+        const labelElements = refs.root.current.querySelectorAll('.onesy-RoundMeter-labels');
+        const elements = {
+          outer: labelElements[0],
+          inner: labelElements[1]
+        };
+        const rects = {
+          outer: elements.outer.getBoundingClientRect(),
+          inner: elements.inner.getBoundingClientRect()
+        };
+        const part_ = Math.abs(Math.abs(rects.outer.x) - Math.abs(rects.inner.x));
+        const valueMoved = Math.sqrt(x ** 2 + y ** 2);
+        const middleInner = Math.abs(Math.abs(rectMiddle.x) - Math.abs(rects.inner.x));
+        if (valueMoved <= middleInner + part_ / 2) within = true;
+        if (within) index += 12;
+        index = clamp(index, 0, 23);
+      }
+
+      // Validate
+      if (!valid(inputToValue(index, 'hour'), 'hour')) return;
+
+      // Update values
+      onUpdate(inputToValue(index, 'hour'));
+    } else if (['minute', 'second'].includes(refs.selecting.current)) {
+      const part = 360 / 60;
+      valuesAll = Array.from({
+        length: 60
+      }).map((item, index_) => [part * index_ - part / 2, part * index_ + part / 2]);
+      let index = valuesAll.findIndex(item => angle >= item[0] && angle <= item[1]);
+      if (index === -1 || index === 0) index = 0;
+
+      // Validate
+      if (!valid(inputToValue(index), refs.selecting.current)) return;
+
+      // Update values
+      onUpdate(inputToValue(index));
+    }
+  }, []);
+  React.useEffect(() => {
+    const onMouseUp = () => {
+      if (refs.mouseDown.current) {
+        setMouseDown(false);
+
+        // Auto next
+        if (refs.autoNext.current) {
+          if (['hour', 'minute', 'second'].includes(refs.selecting.current)) {
+            let valueSelecting;
+            if (refs.selecting.current === 'second') valueSelecting = 'hour';
+            if (refs.selecting.current === 'minute') valueSelecting = refs.second.current ? 'second' : 'hour';
+            if (refs.selecting.current === 'hour' && refs.minute.current) valueSelecting = 'minute';
+            onUpdateSelecting(valueSelecting);
+          }
+        }
+        if (is('function', onDoneSelecting)) onDoneSelecting(refs.value.current, refs.selecting.current);
+      }
+    };
+
+    // Mouse move
+    const onMouseMove = event => {
+      if (refs.mouseDown.current) {
+        const {
+          clientY,
+          clientX
+        } = event;
+        onMove(clientX, clientY);
+      }
+    };
+
+    // Touch move
+    const onTouchMove = event => {
+      if (refs.mouseDown.current) {
+        const {
+          clientY,
+          clientX
+        } = event.touches[0];
+        onMove(clientX, clientY);
+      }
+    };
+    const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
+    rootDocument.addEventListener('mouseup', onMouseUp);
+    rootDocument.addEventListener('mousemove', onMouseMove);
+    rootDocument.addEventListener('touchend', onMouseUp);
+    rootDocument.addEventListener('touchmove', onTouchMove, {
+      passive: true
+    });
+    return () => {
+      rootDocument.removeEventListener('mousemove', onMouseMove);
+      rootDocument.removeEventListener('mouseup', onMouseUp);
+      rootDocument.removeEventListener('touchmove', onTouchMove);
+      rootDocument.removeEventListener('touchend', onMouseUp);
+    };
+  }, []);
+  React.useEffect(() => {
+    if (value_ !== undefined && value_ !== value) setValue(value_);
+  }, [value_]);
+  const updateTransitions = React.useCallback(() => {
+    // Add momentary transition to the OnesyRoundMeter-children > *
+    // if selecting value updates
+    if (refs.root.current) {
+      let elementChildren = refs.root.current.getElementsByClassName('onesy-RoundMeter-children')[0];
+      let elementLabels = refs.root.current.getElementsByClassName('onesy-RoundMeter-labels')[0];
+      if (elementChildren && elementLabels) {
+        elementChildren = Array.from(elementChildren.children);
+        elementLabels = Array.from(elementLabels.children);
+        elementChildren.forEach(item => item.style.transition = 'transform .3s');
+        elementLabels.forEach(item => item.style.transition = 'fill .3s');
+        setTimeout(() => {
+          [...elementChildren, ...elementLabels].forEach(item => item.style.removeProperty('transition'));
+        }, 300);
+      }
+    }
+  }, []);
+  React.useEffect(() => {
+    if (selecting_ !== undefined && selecting_ !== selecting) {
+      setSelecting(selecting_);
+      refs.previous.current = selecting_;
+      updateTransitions();
+    }
+  }, [selecting_]);
+  React.useEffect(() => {
+    if (selecting !== refs.previous.current) {
+      refs.previous.current = selecting;
+      updateTransitions();
+    }
+  }, [selecting]);
+  const onUpdate = React.useCallback(valueNew => {
+    const newValue = valueNew.milliseconds;
+    const previousValue = refs.value.current.milliseconds;
+    if (newValue === previousValue) return;
+    if (!(readOnly || disabled)) {
+      // Inner controlled value
+      if (!props.hasOwnProperty('value')) setValue(valueNew);
+      if (is('function', onChange)) onChange(valueNew);
+    }
+  }, [readOnly, disabled]);
+  const onUpdateSelecting = React.useCallback(valueNew => {
+    if (!(readOnly || disabled)) {
+      // Inner controlled selecting
+      if (!props.hasOwnProperty('selecting')) setSelecting(valueNew);
+      if (is('function', onChangeSelecting)) onChangeSelecting(valueNew);
+    }
+  }, [readOnly, disabled]);
+  const valid = React.useCallback(function () {
+    if (is('function', valid_)) return valid_(...arguments);
+    const onesyDate = arguments.length <= 0 ? undefined : arguments[0];
+    if (min || max || validate) {
+      let response = true;
+      if (is('function', validate)) response = validate(onesyDate);
+      if (min !== undefined) response = response && isOnesyDate(onesyDate, 'after or same', min);
+      if (max !== undefined) response = response && isOnesyDate(onesyDate, 'before or same', max);
+      return response;
+    }
+    return true;
+  }, [valid_, min, max, validate]);
+  const onMouseDown = React.useCallback(() => {
+    setMouseDown(true);
+  }, []);
+  const onClick = React.useCallback(event => {
+    const {
+      clientX: x,
+      clientY: y
+    } = event;
+    onMove(x, y);
+    if (is('function', onClick_)) onClick_(event);
+  }, [onClick_]);
+  const palette = React.useMemo(() => {
+    if (['inherit', 'default'].includes(color)) return theme.methods.color(theme.palette.text.default.primary);
+    if (color === 'themed') return theme.methods.color(theme.palette.text.default.secondary);
+    if (color === 'inverted') return theme.methods.color(theme.palette.background.default.primary);
+    return theme.methods.color(theme.palette.color[color]?.main || color);
+  }, [color, theme]);
+  let valueClock = '';
+  let valueClock24 = 0;
+  let valuePosition;
+  let labels = [];
+  let lowerPointer = false;
+  const colors = {
+    regular: 'currentColor',
+    inverse: theme.methods.palette.color.value(undefined, 90, true, palette)
+  };
+  if (selecting === 'hour') {
+    // Value
+    valueClock = valueClock24 = value?.hour;
+    if (format === '24' && valueClock > 11) lowerPointer = true;
+    if (valueClock > 12) valueClock -= 12;
+    valuePosition = 100 / 12 * valueClock;
+
+    // Labels
+    if (format === '12') labels = unique([
+    // 12 hours
+    ...Array.from({
+      length: 12
+    }).map((item, index) => ({
+      value: index === 0 ? 12 : index,
+      padding: theme.methods.space.value(2.5, 'px'),
+      style: {
+        fontSize: 14,
+        opacity: valid(inputToValue(index === 0 ? 12 : index, 'hour'), 'hour') ? 1 : 0.27,
+        fill: valueClock === 12 && index === 0 || valueClock === index ? colors.inverse : colors.regular
+      },
+      position: index * (100 / 12)
+    }))], 'position');else {
+      labels = [unique([
+      // 0-11 hours
+      ...Array.from({
+        length: 12
+      }).map((item, index) => ({
+        value: index === 0 ? '00' : index,
+        padding: theme.methods.space.value(2.5, 'px'),
+        style: {
+          fontSize: 14,
+          opacity: valid(inputToValue(index === 0 ? 0 : index, 'hour'), 'hour') ? 1 : 0.27,
+          fill: valueClock24 === index ? colors.inverse : colors.regular
+        },
+        position: index * (100 / 12)
+      }))], 'position'), unique([
+      // 12-23 hours
+      ...Array.from({
+        length: 12
+      }).map((item, index) => ({
+        value: 12 + index,
+        padding: theme.methods.space.value(6, 'px'),
+        style: {
+          fontSize: 14,
+          opacity: valid(inputToValue(12 + index, 'hour'), 'hour') ? 1 : 0.27,
+          fill: valueClock24 === 12 + index ? colors.inverse : colors.regular
+        },
+        position: index * (100 / 12)
+      }))], 'position')];
+    }
+  }
+  if (selecting === 'minute') {
+    // Value
+    valueClock = value?.minute;
+    valuePosition = 100 / 60 * valueClock;
+
+    // Labels
+    labels = unique([
+    // 59 minutes
+    ...Array.from({
+      length: 12
+    }).map((item, index) => ({
+      value: index === 0 ? '00' : getLeadingZerosNumber(60 / 12 * index),
+      padding: theme.methods.space.value(2.5, 'px'),
+      style: {
+        fontSize: 14,
+        opacity: valid(inputToValue(index === 0 ? 0 : 60 / 12 * index), 'minute') ? 1 : 0.27,
+        fill: valueClock === 60 / 12 * index ? colors.inverse : colors.regular
+      },
+      position: index * (100 / 12)
+    }))], 'position');
+  }
+  if (selecting === 'second') {
+    // Value
+    valueClock = value?.second;
+    valuePosition = 100 / 60 * valueClock;
+
+    // Labels
+    labels = unique([
+    // 59 seconds
+    ...Array.from({
+      length: 12
+    }).map((item, index) => ({
+      value: index === 0 ? '00' : getLeadingZerosNumber(60 / 12 * index),
+      padding: theme.methods.space.value(2.5, 'px'),
+      style: {
+        fontSize: 14,
+        opacity: valid(inputToValue(index === 0 ? 0 : 60 / 12 * index, 'second'), 'second') ? 1 : 0.27,
+        fill: valueClock === 60 / 12 * index ? colors.inverse : colors.regular
+      },
+      position: index * (100 / 12)
+    }))], 'position');
+  }
+  return /*#__PURE__*/React.createElement(RoundMeter, _extends({
+    ref: item => {
+      if (ref) {
+        if (is('function', ref)) ref(item);else ref.current = item;
+      }
+      refs.root.current = item;
+    },
+    tonal: tonal,
+    color: color,
+    size: size,
+    labels: labels,
+    arcsVisible: false,
+    childrenPosition: "pre-marks",
+    onClick: onClick,
+    background: true,
+    BackgroundProps: {
+      fill: theme.methods.palette.color.value(undefined, 70, true, palette),
+      onMouseDown: onMouseDown,
+      onTouchStart: onMouseDown
+    },
+    renderLabel: is('function', renderValue) ? (x, y, valueItem, otherProps) => renderValue(value, selecting, x, y, valueItem, otherProps) : undefined
+  }, other, {
+    className: classNames([staticClassName('Clock', theme) && ['onesy-Clock-round-meter'], className, classes.root, mouseDown && classes.mouseDown])
+  }), /*#__PURE__*/React.createElement(Path, {
+    ref: refs.middle,
+    Component: "circle",
+    r: "4",
+    cx: "120",
+    cy: "120",
+    style: {
+      stroke: 'none',
+      fill: palette[40]
+    }
+  }), /*#__PURE__*/React.createElement(Path, {
+    d: "M 120 119 L 195 119 A 1 1 0 0 1 195 121 L 120 121 A 1 1 0 0 1 121 119",
+    value: valuePosition,
+    style: {
+      transformOrigin: '50% 50%',
+      fill: palette[40],
+      stroke: 'none'
+    }
+  }), /*#__PURE__*/React.createElement(Path, {
+    Component: "circle",
+    r: "24",
+    cx: lowerPointer ? 182 : 212.5,
+    cy: "120",
+    value: valuePosition,
+    style: {
+      transformOrigin: 'center',
+      fill: palette[40],
+      stroke: 'none'
+    }
+  }));
+});
+Clock.displayName = 'onesy-Clock';
+export default Clock;

package/esm/Clock/index.js

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

package/esm/ColorTextField/ColorTextField.js

@@ -0,0 +1,214 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+const _excluded = ["name", "value", "onChange", "min", "max", "children", "className"],
+  _excluded2 = ["name", "version", "size", "valueDefault", "value", "valueColor", "valueOpacity", "onChange", "onChangeColor", "onChangeOpacity", "opacity", "className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import { clamp, colorToRgb, is, rgbToHex } from '@onesy/utils';
+import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import LineElement from '../Line';
+import TextFieldElement from '../TextField';
+import FormRowElement from '../FormRow';
+import SliderElement from '../Slider';
+import TypeElement from '../Type';
+import { staticClassName } from '../utils';
+const SliderInput = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const theme = useOnesyTheme();
+  const FormRow = React.useMemo(() => theme?.elements?.FormRow || FormRowElement, [theme]);
+  const Slider = React.useMemo(() => theme?.elements?.Slider || SliderElement, [theme]);
+  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const {
+      name,
+      value,
+      onChange,
+      min,
+      max,
+      children,
+      className
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement(FormRow, {
+    gap: 1,
+    description: `${name} ${(value || 100).toFixed(0)}`,
+    fullWidth: true,
+    className: classNames([className])
+  }, /*#__PURE__*/React.createElement(Slider, _extends({
+    value: value,
+    onChange: onChange,
+    valueDefault: 100,
+    min: min,
+    max: max,
+    size: "small",
+    tooltip: true,
+    marks: [{
+      label: /*#__PURE__*/React.createElement(Type, {
+        version: "b3"
+      }, min),
+      value: min
+    }, {
+      label: /*#__PURE__*/React.createElement(Type, {
+        version: "b3"
+      }, max),
+      value: max
+    }],
+    labels: true
+  }, other, {
+    style: _objectSpread({
+      maxWidth: 'unset',
+      width: 'calc(100% - 8px)',
+      margin: '4px 4px 16px'
+    }, other.style)
+  })));
+});
+const useStyle = styleMethod(theme => ({
+  root: {
+    margin: '0',
+    padding: '0',
+    border: '0',
+    outline: 'none',
+    fontSize: '100%',
+    background: 'transparent',
+    boxSizing: 'border-box',
+    touchAction: 'manipulation'
+  },
+  inputColor: {
+    // Reset
+    margin: '0',
+    padding: '0',
+    border: '0',
+    fontFamily: 'inherit',
+    fontSize: '100%',
+    lineHeight: '1.15',
+    borderRadius: theme.methods.shape.radius.value(40, 'px'),
+    overflow: 'hidden',
+    width: '17px',
+    height: '17px',
+    cursor: 'pointer',
+    boxShadow: theme.methods.shadow(theme.palette.text.default.primary, theme.palette.light ? [7, 4, 11] : [27, 24, 31])[1],
+    '&::-webkit-color-swatch-wrapper': {
+      padding: '0'
+    },
+    '&::-webkit-color-swatch': {
+      border: 'none'
+    }
+  }
+}), {
+  name: 'onesy-ColorTextField'
+});
+const ColorTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyColorTextField?.props?.default), props_), [props_]);
+  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
+  const TextField = React.useMemo(() => theme?.elements?.TextField || TextFieldElement, [theme]);
+  const {
+      name,
+      version = 'outlined',
+      size = 'regular',
+      valueDefault,
+      value: value_,
+      valueColor: valueColor_,
+      valueOpacity: valueOpacity_,
+      onChange: onChange_,
+      onChangeColor: onChangeColor_,
+      onChangeOpacity: onChangeOpacity_,
+      opacity,
+      className
+    } = props,
+    other = _objectWithoutProperties(props, _excluded2);
+  const {
+    classes
+  } = useStyle();
+  const [value, setValue] = React.useState((valueDefault !== undefined ? valueDefault : value_) || '');
+  const [valueColor, setValueColor] = React.useState(valueColor_ !== undefined ? valueColor_ : '');
+  const [valueOpacity, setValueOpacity] = React.useState(valueOpacity_ !== undefined ? valueOpacity_ : 100);
+  const refs = {
+    value: React.useRef(undefined),
+    valueColor: React.useRef(valueColor),
+    valueOpacity: React.useRef(valueOpacity)
+  };
+  refs.value.current = value;
+  refs.valueColor.current = valueColor;
+  refs.valueOpacity.current = valueOpacity;
+  React.useEffect(() => {
+    if (opacity) {
+      if (!value_ || is('string', value_) && value_?.startsWith('theme')) return;
+      const valuePrevious = colorToRgb(refs.valueColor.current, refs.valueOpacity.current);
+      if (value_ && value_ !== valuePrevious) {
+        const [r, g, b, a = 1] = colorToRgb(value_, undefined, true) || [];
+        setValueOpacity(clamp(+(a * 100).toFixed(2), 0, 100));
+        setValueColor(rgbToHex(`rgb(${r}, ${g}, ${b})`));
+      } else {
+        setValueColor('');
+        setValueOpacity(100);
+      }
+    } else {
+      if (value_ !== refs.value.current) setValue(value_);
+    }
+  }, [value_]);
+  React.useEffect(() => {
+    if (valueColor_ !== undefined && valueColor !== valueColor_) setValueColor(valueColor_);
+  }, [valueColor_]);
+  React.useEffect(() => {
+    if (valueOpacity_ !== undefined && valueOpacity !== valueOpacity_) setValueOpacity(valueOpacity_);
+  }, [valueOpacity_]);
+  const onChange = React.useCallback(valueNew => {
+    if (opacity) {
+      const opacity_ = clamp(+refs.valueOpacity.current / 100, 0.0001, 1);
+      if (is('function', onChange_)) onChange_(colorToRgb(refs.valueColor.current, +opacity_.toFixed(2)) || '');
+    } else {
+      // Update inner or controlled
+      if (!props.hasOwnProperty('value')) setValue(valueNew);
+      if (is('function', onChange_)) onChange_(valueNew);
+    }
+  }, [onChange_]);
+  const onChangeColor = React.useCallback(valueNew => {
+    if (!props.hasOwnProperty('valueColor')) setValueColor(valueNew);
+    if (is('function', onChangeColor_)) onChangeColor_(valueNew);
+    setTimeout(() => {
+      onChange();
+    }, 14);
+  }, [onChangeColor_]);
+  const onChangeOpacity = React.useCallback(valueNew_ => {
+    const valueNew = +valueNew_?.toFixed(2);
+    if (!props.hasOwnProperty('valueOpacity')) setValueOpacity(valueNew);
+    if (is('function', onChangeOpacity_)) onChangeOpacity_(valueNew);
+    setTimeout(() => {
+      onChange();
+    }, 14);
+  }, [onChangeOpacity_]);
+  const root = /*#__PURE__*/React.createElement(TextField, _extends({
+    name: name,
+    value: opacity ? valueColor : value,
+    onChange: opacity ? onChangeColor : onChange,
+    version: version,
+    size: size,
+    endVerticalAlign: "center",
+    end: /*#__PURE__*/React.createElement("input", {
+      type: "color",
+      value: opacity ? valueColor : value,
+      onChange: event => opacity ? onChangeColor(event.target.value) : onChange(event.target.value),
+      className: classNames([staticClassName('ColorTextField', theme) && ['onesy-ColorTextField-input-color'], classes.inputColor])
+    }),
+    className: classNames([staticClassName('ColorTextField', theme) && ['onesy-ColorTextField-root', `onesy-ColorTextField-version-${version}`, `onesy-ColorTextField-size-${size}`], classes.root]),
+    fullWidth: opacity
+  }, !opacity && other));
+  if (opacity) {
+    return /*#__PURE__*/React.createElement(Line, _extends({
+      ref: ref,
+      gap: 1,
+      fullWidth: true,
+      className: classNames([className, classes.root])
+    }, other), root, /*#__PURE__*/React.createElement(SliderInput, {
+      name: "Opacity",
+      value: valueOpacity,
+      onChange: onChangeOpacity,
+      min: 0,
+      max: 100
+    }));
+  }
+  return root;
+});
+ColorTextField.displayName = 'onesy-ColorTextField';
+export default ColorTextField;

package/esm/ColorTextField/index.js

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