@channel.io/bezier-react 1.5.0 → 1.6.0

package/dist/cjs/components/Forms/Inputs/TextField/TextField.js

@@ -0,0 +1,282 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var bezierIcons = require('@channel.io/bezier-icons');
+var domUtils = require('../../../../utils/domUtils.js');
+var stringUtils = require('../../../../utils/stringUtils.js');
+var typeUtils = require('../../../../utils/typeUtils.js');
+var CommonImeControlKeys = require('../constants/CommonImeControlKeys.js');
+var useFormFieldProps = require('../../useFormFieldProps.js');
+var useKeyboardActionLockerWhileComposing = require('../../useKeyboardActionLockerWhileComposing.js');
+var TextField_types = require('./TextField.types.js');
+var TextFieldUtils = require('./TextFieldUtils.js');
+var TextField_styled = require('./TextField.styled.js');
+var Icon_types = require('../../../Icon/Icon.types.js');
+var Icon = require('../../../Icon/Icon.js');
+var v4 = require('../../../../node_modules/uuid/dist/esm-browser/v4.js');
+
+const TEXT_INPUT_TEST_ID = 'bezier-react-text-input';
+function TextFieldComponent({
+  name,
+  type,
+  size = TextField_types.TextFieldSize.M,
+  testId = TEXT_INPUT_TEST_ID,
+  autoFocus,
+  autoComplete = 'off',
+  variant = TextField_types.TextFieldVariant.Primary,
+  allowClear = false,
+  selectAllOnInit = false,
+  selectAllOnFocus = false,
+  leftContent,
+  rightContent,
+  withoutLeftContentWrapper = false,
+  withoutRightContentWrapper = false,
+  inputClassName,
+  inputInterpolation,
+  wrapperClassName,
+  wrapperInterpolation,
+  leftWrapperClassName,
+  leftWrapperInterpolation,
+  rightWrapperClassName,
+  rightWrapperInterpolation,
+  value,
+  onBlur,
+  onFocus,
+  onChange,
+  onKeyDown,
+  onKeyUp,
+  ...rest
+}, forwardedRef) {
+  const {
+    disabled,
+    readOnly,
+    hasError,
+    ...ownProps
+  } = useFormFieldProps.default(rest);
+  const [focused, setFocused] = React.useState(false);
+  const [hovered, setHovered] = React.useState(false);
+  const wrapperBgColorSemanticName = React.useMemo(() => TextFieldUtils.getProperTextFieldBgColor({
+    variant,
+    focused,
+    hasError,
+    readOnly
+  }), [variant, focused, hasError, readOnly]);
+  const wrapperBorderRadius = React.useMemo(() => TextFieldUtils.getProperTextFieldBorderRadius({
+    size
+  }), [size]);
+  const focusTimeout = React.useRef();
+  const blurTimeout = React.useRef();
+  const normalizedValue = React.useMemo(() => typeUtils.isNil(value) ? undefined : stringUtils.toString(value), [value]);
+  const activeInput = !disabled && !readOnly;
+  const activeClear = activeInput && allowClear;
+  const inputRef = React.useRef(null);
+  const focus = React.useCallback(() => {
+    clearTimeout(focusTimeout.current);
+    focusTimeout.current = domUtils.window.setTimeout(() => {
+      inputRef.current?.focus();
+    }, 0);
+  }, []);
+  const blur = React.useCallback(() => {
+    clearTimeout(blurTimeout.current);
+    blurTimeout.current = domUtils.window.setTimeout(() => {
+      inputRef.current?.blur();
+    }, 0);
+  }, []);
+  const setSelectionRange = React.useCallback((start, end, direction) => {
+    if (type && [TextField_types.TextFieldType.Number, TextField_types.TextFieldType.Email, TextField_types.TextFieldType.Hidden].includes(type)) {
+      return;
+    }
+    inputRef.current?.setSelectionRange(start || 0, end || 0, direction || 'none');
+  }, [type]);
+  const getSelectionRange = React.useCallback(() => [inputRef.current?.selectionStart || 0, inputRef.current?.selectionEnd || 0], []);
+  const selectAll = React.useCallback(() => {
+    focus();
+    if (inputRef.current) {
+      setSelectionRange(0, inputRef.current.value.length, 'backward');
+    }
+  }, [focus, setSelectionRange]);
+  const unselect = React.useCallback(() => {
+    focus();
+    if (inputRef.current) {
+      const valueLen = inputRef.current.value.length;
+      setSelectionRange(valueLen, valueLen);
+    }
+  }, [focus, setSelectionRange]);
+  const getBoundingClientRect = React.useCallback(() => {
+    if (inputRef.current) {
+      return inputRef.current.getBoundingClientRect();
+    }
+    return new DOMRect(undefined, undefined, 0, 0);
+  }, []);
+  const getDOMNode = React.useCallback(() => inputRef.current, []);
+  const handle = React.useMemo(() => ({
+    focus,
+    blur,
+    setSelectionRange,
+    getSelectionRange,
+    selectAll,
+    unselect,
+    getBoundingClientRect,
+    getDOMNode
+  }), [focus, blur, setSelectionRange, getSelectionRange, selectAll, unselect, getBoundingClientRect, getDOMNode]);
+  React.useImperativeHandle(forwardedRef, () => handle);
+  React.useEffect(() => {
+    if (autoFocus) {
+      focus();
+    }
+    if (selectAllOnInit) {
+      focus();
+      selectAll();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const handleFocus = React.useCallback(event => {
+    if (activeInput) {
+      setFocused(true);
+      if (selectAllOnFocus) {
+        selectAll();
+      }
+      if (onFocus) {
+        onFocus(event);
+      }
+    }
+  }, [selectAllOnFocus, selectAll, activeInput, onFocus]);
+  const handleBlur = React.useCallback(event => {
+    setFocused(false);
+    if (onBlur) {
+      onBlur(event);
+    }
+  }, [onBlur]);
+  const handleChange = React.useCallback(event => {
+    if (activeInput && onChange) {
+      onChange(event);
+    }
+  }, [activeInput, onChange]);
+  const {
+    handleKeyDown: handleKeyDownWrappedWithComposingLocker,
+    handleKeyUp: handleKeyUpWrappedWithComposingLocker
+  } = useKeyboardActionLockerWhileComposing.default({
+    keysToLock: CommonImeControlKeys.COMMON_IME_CONTROL_KEYS,
+    onKeyDown,
+    onKeyUp
+  });
+  const handleKeyDown = React.useCallback(event => {
+    if (activeInput && handleKeyDownWrappedWithComposingLocker) {
+      handleKeyDownWrappedWithComposingLocker(event);
+    }
+  }, [activeInput, handleKeyDownWrappedWithComposingLocker]);
+  const handleKeyUp = React.useCallback(event => {
+    if (activeInput && handleKeyUpWrappedWithComposingLocker) {
+      handleKeyUpWrappedWithComposingLocker(event);
+    }
+  }, [activeInput, handleKeyUpWrappedWithComposingLocker]);
+  const handleClear = React.useCallback(() => {
+    const input = inputRef.current;
+    if (activeInput && input) {
+      const setValue = Object?.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;
+      const event = new Event('input', {
+        bubbles: true
+      });
+      setValue?.call(input, '');
+      input.dispatchEvent(event);
+    }
+  }, [activeInput]);
+  const renderLeftItem = React.useCallback(item => {
+    if ('icon' in item) {
+      return /*#__PURE__*/React.createElement(TextField_styled.default.LeftIcon, {
+        source: item.icon,
+        size: Icon_types.IconSize.S,
+        color: item.iconColor ?? 'txt-black-dark',
+        clickable: !typeUtils.isNil(item.onClick),
+        onClick: item.onClick
+      });
+    }
+    return item;
+  }, []);
+  const LeftComponent = React.useMemo(() => {
+    if (typeUtils.isNil(leftContent)) {
+      return null;
+    }
+    const item = renderLeftItem(leftContent);
+    if (withoutLeftContentWrapper) {
+      return item;
+    }
+    return /*#__PURE__*/React.createElement(TextField_styled.default.LeftContentWrapper, {
+      className: leftWrapperClassName,
+      interpolation: leftWrapperInterpolation
+    }, item);
+  }, [leftContent, withoutLeftContentWrapper, leftWrapperClassName, leftWrapperInterpolation, renderLeftItem]);
+  const renderRightItem = React.useCallback((item, key) => {
+    if ('icon' in item) {
+      return /*#__PURE__*/React.createElement(TextField_styled.default.RightItemWrapper, {
+        key: key,
+        clickable: !typeUtils.isNil(item.onClick),
+        onClick: item.onClick
+      }, /*#__PURE__*/React.createElement(Icon.Icon, {
+        source: item.icon,
+        size: Icon_types.IconSize.XS,
+        color: item.iconColor ?? 'txt-black-dark'
+      }));
+    }
+    return /*#__PURE__*/React.cloneElement(item, {
+      key
+    });
+  }, []);
+  const RightComponent = React.useMemo(() => {
+    if (typeUtils.isNil(rightContent) || typeUtils.isEmpty(rightContent)) {
+      return null;
+    }
+    const items = typeUtils.isArray(rightContent) ? rightContent.map(item => renderRightItem(item, v4.default())) : renderRightItem(rightContent);
+    if (withoutRightContentWrapper) {
+      return items;
+    }
+    return /*#__PURE__*/React.createElement(TextField_styled.default.RightContentWrapper, {
+      className: rightWrapperClassName,
+      interpolation: rightWrapperInterpolation
+    }, items);
+  }, [rightContent, withoutRightContentWrapper, rightWrapperClassName, rightWrapperInterpolation, renderRightItem]);
+  const ClearComponent = React.useMemo(() => /*#__PURE__*/React.createElement(TextField_styled.default.ClearIconWrapper, {
+    onClick: handleClear
+  }, normalizedValue && normalizedValue.length > 0 && (focused || hovered) && /*#__PURE__*/React.createElement(Icon.Icon, {
+    source: bezierIcons.CancelCircleFilledIcon,
+    size: Icon_types.IconSize.XS
+  })), [focused, handleClear, hovered, normalizedValue]);
+  return /*#__PURE__*/React.createElement(TextField_styled.default.Wrapper, {
+    className: wrapperClassName,
+    variant: variant,
+    size: size,
+    bgColor: wrapperBgColorSemanticName,
+    borderRadius: wrapperBorderRadius,
+    hasError: hasError,
+    disabled: disabled,
+    focused: focused,
+    interpolation: wrapperInterpolation,
+    "data-testid": testId,
+    onMouseEnter: () => setHovered(true),
+    onMouseLeave: () => setHovered(false),
+    onMouseDown: focus
+  }, LeftComponent, /*#__PURE__*/React.createElement(TextField_styled.default.Input, Object.assign({
+    type: type,
+    className: inputClassName,
+    interpolation: inputInterpolation,
+    ref: inputRef,
+    value: normalizedValue,
+    name: name,
+    size: size,
+    autoComplete: autoComplete,
+    readOnly: readOnly,
+    disabled: disabled,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
+    onKeyUp: handleKeyUp
+  }, ownProps)), activeClear && ClearComponent, RightComponent);
+}
+var TextField = /*#__PURE__*/React.forwardRef(TextFieldComponent);
+
+exports.TEXT_INPUT_TEST_ID = TEXT_INPUT_TEST_ID;
+exports.default = TextField;
+//# sourceMappingURL=TextField.js.map

package/dist/cjs/components/Forms/Inputs/TextField/TextField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.js","sources":["../../../../../../src/components/Forms/Inputs/TextField/TextField.tsx"],"sourcesContent":["import React, {\n  type Ref,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport { CancelCircleFilledIcon } from '@channel.io/bezier-icons'\nimport { v4 as uuid } from 'uuid'\n\nimport { window } from '~/src/utils/domUtils'\nimport { toString } from '~/src/utils/stringUtils'\nimport {\n  isArray,\n  isEmpty,\n  isNil,\n} from '~/src/utils/typeUtils'\n\nimport { COMMON_IME_CONTROL_KEYS } from '~/src/components/Forms/Inputs/constants/CommonImeControlKeys'\nimport useFormFieldProps from '~/src/components/Forms/useFormFieldProps'\nimport useKeyboardActionLockerWhileComposing from '~/src/components/Forms/useKeyboardActionLockerWhileComposing'\nimport {\n  Icon,\n  IconSize,\n} from '~/src/components/Icon'\n\nimport {\n  type SelectionRangeDirections,\n  type TextFieldItemProps,\n  type TextFieldProps,\n  type TextFieldRef,\n  TextFieldSize,\n  TextFieldType,\n  TextFieldVariant,\n} from './TextField.types'\nimport {\n  getProperTextFieldBgColor,\n  getProperTextFieldBorderRadius,\n} from './TextFieldUtils'\n\nimport Styled from './TextField.styled'\n\nexport const TEXT_INPUT_TEST_ID = 'bezier-react-text-input'\n\nfunction TextFieldComponent({\n  name,\n  type,\n  size = TextFieldSize.M,\n  testId = TEXT_INPUT_TEST_ID,\n  autoFocus,\n  autoComplete = 'off',\n  variant = TextFieldVariant.Primary,\n  allowClear = false,\n  selectAllOnInit = false,\n  selectAllOnFocus = false,\n  leftContent,\n  rightContent,\n  withoutLeftContentWrapper = false,\n  withoutRightContentWrapper = false,\n  inputClassName,\n  inputInterpolation,\n  wrapperClassName,\n  wrapperInterpolation,\n  leftWrapperClassName,\n  leftWrapperInterpolation,\n  rightWrapperClassName,\n  rightWrapperInterpolation,\n  value,\n  onBlur,\n  onFocus,\n  onChange,\n  onKeyDown,\n  onKeyUp,\n  ...rest\n}: TextFieldProps,\nforwardedRef: Ref<TextFieldRef>,\n) {\n  const {\n    disabled,\n    readOnly,\n    hasError,\n    ...ownProps\n  } = useFormFieldProps(rest)\n\n  const [focused, setFocused] = useState(false)\n  const [hovered, setHovered] = useState(false)\n\n  const wrapperBgColorSemanticName = useMemo(() => (\n    getProperTextFieldBgColor({\n      variant,\n      focused,\n      hasError,\n      readOnly,\n    })\n  ), [\n    variant,\n    focused,\n    hasError,\n    readOnly,\n  ])\n\n  const wrapperBorderRadius = useMemo(() => (\n    getProperTextFieldBorderRadius({\n      size,\n    })\n  ), [size])\n\n  const focusTimeout = useRef<ReturnType<Window['setTimeout']>>()\n  const blurTimeout = useRef<ReturnType<Window['setTimeout']>>()\n\n  const normalizedValue = useMemo(() => (\n    isNil(value) ? undefined : toString(value)\n  ), [value])\n\n  const activeInput = !disabled && !readOnly\n  const activeClear = activeInput && allowClear\n\n  const inputRef = useRef<HTMLInputElement | null>(null)\n\n  const focus = useCallback(() => {\n    clearTimeout(focusTimeout.current)\n    focusTimeout.current = window.setTimeout(() => {\n      inputRef.current?.focus()\n    }, 0)\n  }, [])\n\n  const blur = useCallback(() => {\n    clearTimeout(blurTimeout.current)\n    blurTimeout.current = window.setTimeout(() => {\n      inputRef.current?.blur()\n    }, 0)\n  }, [])\n\n  const setSelectionRange = useCallback((start?: number, end?: number, direction?: SelectionRangeDirections) => {\n    if (type && [TextFieldType.Number, TextFieldType.Email, TextFieldType.Hidden].includes(type)) { return }\n    inputRef.current?.setSelectionRange(start || 0, end || 0, direction || 'none')\n  }, [type])\n\n  const getSelectionRange = useCallback((): [number, number] =>\n    [inputRef.current?.selectionStart || 0, inputRef.current?.selectionEnd || 0], [])\n\n  const selectAll = useCallback(() => {\n    focus()\n    if (inputRef.current) {\n      setSelectionRange(0, inputRef.current.value.length, 'backward')\n    }\n  }, [\n    focus,\n    setSelectionRange,\n  ])\n\n  const unselect = useCallback(() => {\n    focus()\n    if (inputRef.current) {\n      const valueLen = inputRef.current.value.length\n      setSelectionRange(valueLen, valueLen)\n    }\n  }, [\n    focus,\n    setSelectionRange,\n  ])\n\n  const getBoundingClientRect = useCallback((): DOMRect => {\n    if (inputRef.current) { return inputRef.current.getBoundingClientRect() }\n    return new DOMRect(undefined, undefined, 0, 0)\n  }, [])\n\n  const getDOMNode = useCallback(() => inputRef.current, [])\n\n  const handle = useMemo((): TextFieldRef => ({\n    focus,\n    blur,\n    setSelectionRange,\n    getSelectionRange,\n    selectAll,\n    unselect,\n    getBoundingClientRect,\n    getDOMNode,\n  }), [\n    focus,\n    blur,\n    setSelectionRange,\n    getSelectionRange,\n    selectAll,\n    unselect,\n    getBoundingClientRect,\n    getDOMNode,\n  ])\n\n  useImperativeHandle(forwardedRef, () => handle)\n\n  useEffect(() => {\n    if (autoFocus) {\n      focus()\n    }\n    if (selectAllOnInit) {\n      focus()\n      selectAll()\n    }\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  const handleFocus = useCallback((event: React.FocusEvent<HTMLInputElement>) => {\n    if (activeInput) {\n      setFocused(true)\n      if (selectAllOnFocus) { selectAll() }\n      if (onFocus) { onFocus(event) }\n    }\n  }, [\n    selectAllOnFocus,\n    selectAll,\n    activeInput,\n    onFocus,\n  ])\n\n  const handleBlur = useCallback((event: React.FocusEvent<HTMLInputElement>) => {\n    setFocused(false)\n    if (onBlur) { onBlur(event) }\n  }, [onBlur])\n\n  const handleChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n    if (activeInput && onChange) {\n      onChange(event)\n    }\n  }, [\n    activeInput,\n    onChange,\n  ])\n\n  const {\n    handleKeyDown: handleKeyDownWrappedWithComposingLocker,\n    handleKeyUp: handleKeyUpWrappedWithComposingLocker,\n  } = useKeyboardActionLockerWhileComposing({\n    keysToLock: COMMON_IME_CONTROL_KEYS,\n    onKeyDown,\n    onKeyUp,\n  })\n\n  const handleKeyDown = useCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (activeInput && handleKeyDownWrappedWithComposingLocker) {\n      handleKeyDownWrappedWithComposingLocker(event)\n    }\n  }, [\n    activeInput,\n    handleKeyDownWrappedWithComposingLocker,\n  ])\n\n  const handleKeyUp = useCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (activeInput && handleKeyUpWrappedWithComposingLocker) {\n      handleKeyUpWrappedWithComposingLocker(event)\n    }\n  }, [\n    activeInput,\n    handleKeyUpWrappedWithComposingLocker,\n  ])\n\n  const handleClear = useCallback(() => {\n    const input = inputRef.current\n    if (activeInput && input) {\n      const setValue = Object?.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set\n      const event = new Event('input', { bubbles: true })\n      setValue?.call(input, '')\n      input.dispatchEvent(event)\n    }\n  }, [activeInput])\n\n  const renderLeftItem = useCallback((item: TextFieldItemProps) => {\n    if ('icon' in item) {\n      return (\n        <Styled.LeftIcon\n          source={item.icon}\n          size={IconSize.S}\n          color={item.iconColor ?? 'txt-black-dark'}\n          clickable={!isNil(item.onClick)}\n          onClick={item.onClick}\n        />\n      )\n    }\n\n    return item\n  }, [])\n\n  const LeftComponent = useMemo(() => {\n    if (isNil(leftContent)) {\n      return null\n    }\n\n    const item = renderLeftItem(leftContent)\n\n    if (withoutLeftContentWrapper) { return item }\n\n    return (\n      <Styled.LeftContentWrapper\n        className={leftWrapperClassName}\n        interpolation={leftWrapperInterpolation}\n      >\n        { item }\n      </Styled.LeftContentWrapper>\n    )\n  }, [\n    leftContent,\n    withoutLeftContentWrapper,\n    leftWrapperClassName,\n    leftWrapperInterpolation,\n    renderLeftItem,\n  ])\n\n  const renderRightItem = useCallback((item: TextFieldItemProps, key?: string) => {\n    if ('icon' in item) {\n      return (\n        <Styled.RightItemWrapper\n          key={key}\n          clickable={!isNil(item.onClick)}\n          onClick={item.onClick}\n        >\n          <Icon\n            source={item.icon}\n            size={IconSize.XS}\n            color={item.iconColor ?? 'txt-black-dark'}\n          />\n        </Styled.RightItemWrapper>\n      )\n    }\n\n    return React.cloneElement(\n      item, { key },\n    )\n  }, [])\n\n  const RightComponent = useMemo(() => {\n    if (isNil(rightContent) || isEmpty(rightContent)) {\n      return null\n    }\n\n    const items = isArray(rightContent)\n      ? rightContent.map((item) => renderRightItem(item, uuid()))\n      : renderRightItem(rightContent)\n\n    if (withoutRightContentWrapper) { return items }\n\n    return (\n      <Styled.RightContentWrapper\n        className={rightWrapperClassName}\n        interpolation={rightWrapperInterpolation}\n      >\n        { items }\n      </Styled.RightContentWrapper>\n    )\n  }, [\n    rightContent,\n    withoutRightContentWrapper,\n    rightWrapperClassName,\n    rightWrapperInterpolation,\n    renderRightItem,\n  ])\n\n  const ClearComponent = useMemo(() => (\n    <Styled.ClearIconWrapper\n      onClick={handleClear}\n    >\n      {\n        normalizedValue && normalizedValue.length > 0 && (focused || hovered) && (\n          <Icon\n            source={CancelCircleFilledIcon}\n            size={IconSize.XS}\n          />\n        )\n      }\n    </Styled.ClearIconWrapper>\n  ), [\n    focused,\n    handleClear,\n    hovered,\n    normalizedValue,\n  ])\n\n  return (\n    <Styled.Wrapper\n      className={wrapperClassName}\n      variant={variant}\n      size={size}\n      bgColor={wrapperBgColorSemanticName}\n      borderRadius={wrapperBorderRadius}\n      hasError={hasError}\n      disabled={disabled}\n      focused={focused}\n      interpolation={wrapperInterpolation}\n      data-testid={testId}\n      onMouseEnter={() => setHovered(true)}\n      onMouseLeave={() => setHovered(false)}\n      onMouseDown={focus}\n    >\n      { LeftComponent }\n      <Styled.Input\n        type={type}\n        className={inputClassName}\n        interpolation={inputInterpolation}\n        ref={inputRef}\n        value={normalizedValue}\n        name={name}\n        size={size}\n        autoComplete={autoComplete}\n        readOnly={readOnly}\n        disabled={disabled}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onChange={handleChange}\n        onKeyDown={handleKeyDown}\n        onKeyUp={handleKeyUp}\n        {...ownProps}\n      />\n      { activeClear && ClearComponent }\n      { RightComponent }\n    </Styled.Wrapper>\n  )\n}\n\nexport default forwardRef(TextFieldComponent)\n"],"names":["TEXT_INPUT_TEST_ID","TextFieldComponent","name","type","size","TextFieldSize","M","testId","autoFocus","autoComplete","variant","TextFieldVariant","Primary","allowClear","selectAllOnInit","selectAllOnFocus","leftContent","rightContent","withoutLeftContentWrapper","withoutRightContentWrapper","inputClassName","inputInterpolation","wrapperClassName","wrapperInterpolation","leftWrapperClassName","leftWrapperInterpolation","rightWrapperClassName","rightWrapperInterpolation","value","onBlur","onFocus","onChange","onKeyDown","onKeyUp","rest","forwardedRef","disabled","readOnly","hasError","ownProps","useFormFieldProps","focused","setFocused","useState","hovered","setHovered","wrapperBgColorSemanticName","useMemo","getProperTextFieldBgColor","wrapperBorderRadius","getProperTextFieldBorderRadius","focusTimeout","useRef","blurTimeout","normalizedValue","isNil","undefined","toString","activeInput","activeClear","inputRef","focus","useCallback","clearTimeout","current","window","setTimeout","blur","setSelectionRange","start","end","direction","TextFieldType","Number","Email","Hidden","includes","getSelectionRange","selectionStart","selectionEnd","selectAll","length","unselect","valueLen","getBoundingClientRect","DOMRect","getDOMNode","handle","useImperativeHandle","useEffect","handleFocus","event","handleBlur","handleChange","handleKeyDown","handleKeyDownWrappedWithComposingLocker","handleKeyUp","handleKeyUpWrappedWithComposingLocker","useKeyboardActionLockerWhileComposing","keysToLock","COMMON_IME_CONTROL_KEYS","handleClear","input","setValue","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","Event","bubbles","call","dispatchEvent","renderLeftItem","item","React","createElement","Styled","LeftIcon","source","icon","IconSize","S","color","iconColor","clickable","onClick","LeftComponent","LeftContentWrapper","className","interpolation","renderRightItem","key","RightItemWrapper","Icon","XS","cloneElement","RightComponent","isEmpty","items","isArray","map","uuid","RightContentWrapper","ClearComponent","ClearIconWrapper","CancelCircleFilledIcon","Wrapper","bgColor","borderRadius","onMouseEnter","onMouseLeave","onMouseDown","Input","assign","ref","forwardRef"],"mappings":"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"}

package/dist/cjs/components/Forms/Inputs/TextField/TextField.styled.js

@@ -0,0 +1,107 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var DisabledOpacity = require('../../../../constants/DisabledOpacity.js');
+var mixins = require('../mixins.js');
+var TextField_types = require('./TextField.types.js');
+var Icon = require('../../../Icon/Icon.js');
+var FoundationStyledComponent = require('../../../../foundation/FoundationStyledComponent.js');
+var Typography = require('../../../../foundation/Typography.js');
+
+const clickableElementStyle = FoundationStyledComponent.css`
+  cursor: pointer;
+`;
+const Input = /*#__PURE__*/FoundationStyledComponent.styled.input.withConfig({
+  displayName: "TextFieldstyled__Input",
+  componentId: "sc-15z3hw-0"
+})(["width:100%;height:100%;padding:0;cursor:", ";background-color:transparent;border:none;outline:none;", " ", " ", " ", ""], ({
+  disabled
+}) => disabled ? 'not-allowed' : 'auto', Typography.Typography.Size14, mixins.inputTextStyle, mixins.inputPlaceholderStyle, ({
+  interpolation
+}) => interpolation);
+const LeftIcon = /*#__PURE__*/FoundationStyledComponent.styled(Icon.Icon).withConfig({
+  displayName: "TextFieldstyled__LeftIcon",
+  componentId: "sc-15z3hw-1"
+})(["", ""], ({
+  clickable
+}) => clickable && clickableElementStyle);
+const LeftContentWrapper = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+  displayName: "TextFieldstyled__LeftContentWrapper",
+  componentId: "sc-15z3hw-2"
+})(["display:flex;align-items:center;padding-right:6px;", ""], ({
+  interpolation
+}) => interpolation);
+const RightContentWrapper = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+  displayName: "TextFieldstyled__RightContentWrapper",
+  componentId: "sc-15z3hw-3"
+})(["display:flex;align-items:center;padding-right:2px;", ""], ({
+  interpolation
+}) => interpolation);
+const RightItemWrapper = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+  displayName: "TextFieldstyled__RightItemWrapper",
+  componentId: "sc-15z3hw-4"
+})(["display:flex;align-items:center;justify-content:center;width:20px;height:20px;", " ", ""], ({
+  clickable
+}) => clickable && clickableElementStyle, ({
+  interpolation
+}) => interpolation);
+const ClearIconWrapper = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+  displayName: "TextFieldstyled__ClearIconWrapper",
+  componentId: "sc-15z3hw-5"
+})(["display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding-right:2px;color:", ";:hover{color:", ";}", ""], ({
+  foundation
+}) => foundation?.theme?.['txt-black-dark'], ({
+  foundation
+}) => foundation?.theme?.['txt-black-darker'], clickableElementStyle);
+function getInputTypography({
+  size
+}) {
+  switch (size) {
+    case TextField_types.TextFieldSize.XS:
+    case TextField_types.TextFieldSize.M:
+      return Typography.Typography.Size14;
+    case TextField_types.TextFieldSize.L:
+      return Typography.Typography.Size16;
+    case TextField_types.TextFieldSize.XL:
+      return Typography.Typography.Size18;
+    // NOTE: should never reach here
+    default:
+      return Typography.Typography.Size14;
+  }
+}
+const Wrapper = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+  displayName: "TextFieldstyled__Wrapper",
+  componentId: "sc-15z3hw-6"
+})(["position:relative;box-sizing:border-box;display:flex;align-items:center;height:", "px;padding:0 12px;background-color:", ";", " opacity:", ";", " ", " ", " ", " ", " ", "{", "}"], ({
+  size
+}) => size, ({
+  foundation,
+  bgColor
+}) => foundation?.theme?.[bgColor], ({
+  borderRadius
+}) => borderRadius, ({
+  disabled
+}) => disabled && DisabledOpacity.default, ({
+  variant
+}) => variant === TextField_types.TextFieldVariant.Primary && mixins.inputWrapperStyle, ({
+  focused
+}) => focused && mixins.focusedInputWrapperStyle, ({
+  hasError
+}) => hasError && mixins.erroredInputWrapperStyle, ({
+  foundation
+}) => foundation?.transition?.getTransitionsCSS(['border-color', 'box-shadow']), ({
+  interpolation
+}) => interpolation, Input, getInputTypography);
+var Styled = {
+  Input,
+  LeftIcon,
+  LeftContentWrapper,
+  RightItemWrapper,
+  RightContentWrapper,
+  ClearIconWrapper,
+  Wrapper
+};
+
+exports.default = Styled;
+//# sourceMappingURL=TextField.styled.js.map

package/dist/cjs/components/Forms/Inputs/TextField/TextField.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.styled.js","sources":["../../../../../../src/components/Forms/Inputs/TextField/TextField.styled.ts"],"sourcesContent":["import { type FlattenSimpleInterpolation } from 'styled-components'\n\nimport {\n  type SemanticNames,\n  Typography,\n  css,\n  styled,\n} from '~/src/foundation'\n\nimport DisabledOpacity from '~/src/constants/DisabledOpacity'\nimport { type InterpolationProps } from '~/src/types/Foundation'\n\nimport {\n  erroredInputWrapperStyle,\n  focusedInputWrapperStyle,\n  inputPlaceholderStyle,\n  inputTextStyle,\n  inputWrapperStyle,\n} from '~/src/components/Forms/Inputs/mixins'\nimport { Icon } from '~/src/components/Icon'\n\nimport {\n  TextFieldSize,\n  TextFieldVariant,\n} from './TextField.types'\n\ninterface ClickableElementProps {\n  clickable: boolean\n}\n\nconst clickableElementStyle = css`\n  cursor: pointer;\n`\n\nconst Input = styled.input<InterpolationProps>`\n  width: 100%;\n  height: 100%;\n  padding: 0;\n  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'auto')};\n  background-color: transparent;\n  border: none;\n  outline: none;\n\n  ${Typography.Size14}\n\n  ${inputTextStyle}\n\n  ${inputPlaceholderStyle}\n\n  ${({ interpolation }) => interpolation}\n`\n\nconst LeftIcon = styled(Icon)<ClickableElementProps>`\n  ${({ clickable }) => clickable && clickableElementStyle}\n`\n\nconst LeftContentWrapper = styled.div<InterpolationProps>`\n  display: flex;\n  align-items: center;\n  padding-right: 6px;\n\n  ${({ interpolation }) => interpolation}\n`\n\nconst RightContentWrapper = styled.div<InterpolationProps>`\n  display: flex;\n  align-items: center;\n  padding-right: 2px;\n\n  ${({ interpolation }) => interpolation}\n`\n\nconst RightItemWrapper = styled.div<ClickableElementProps & InterpolationProps>`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n\n  ${({ clickable }) => clickable && clickableElementStyle}\n\n  ${({ interpolation }) => interpolation}\n`\n\nconst ClearIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  padding-right: 2px;\n\n  color: ${({ foundation }) => foundation?.theme?.['txt-black-dark']};\n\n  :hover {\n    color: ${({ foundation }) => foundation?.theme?.['txt-black-darker']};\n  }\n\n  ${clickableElementStyle}\n`\n\ninterface WrapperProps {\n  variant?: TextFieldVariant\n  bgColor: SemanticNames\n  size: TextFieldSize\n  borderRadius?: FlattenSimpleInterpolation\n  hasError?: boolean\n  focused?: boolean\n  disabled?: boolean\n}\n\nfunction getInputTypography({ size }: Pick<WrapperProps, 'size'>) {\n  switch (size) {\n    case TextFieldSize.XS:\n    case TextFieldSize.M:\n      return Typography.Size14\n    case TextFieldSize.L:\n      return Typography.Size16\n    case TextFieldSize.XL:\n      return Typography.Size18\n    // NOTE: should never reach here\n    default:\n      return Typography.Size14\n  }\n}\n\nconst Wrapper = styled.div<WrapperProps & InterpolationProps>`\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  height: ${({ size }) => size}px;\n  padding: 0 12px;\n  background-color: ${({ foundation, bgColor }) => foundation?.theme?.[bgColor]};\n\n  ${({ borderRadius }) => borderRadius}\n  opacity: ${({ disabled }) => disabled && DisabledOpacity};\n\n  ${({ variant }) => variant === TextFieldVariant.Primary && inputWrapperStyle}\n  ${({ focused }) => focused && focusedInputWrapperStyle}\n  ${({ hasError }) => hasError && erroredInputWrapperStyle}\n\n  ${({ foundation }) => foundation?.transition?.getTransitionsCSS(['border-color', 'box-shadow'])}\n\n  ${({ interpolation }) => interpolation}\n\n  ${Input} {\n    ${getInputTypography}\n  }\n`\n\nexport default {\n  Input,\n  LeftIcon,\n  LeftContentWrapper,\n  RightItemWrapper,\n  RightContentWrapper,\n  ClearIconWrapper,\n  Wrapper,\n}\n"],"names":["clickableElementStyle","css","Input","styled","input","withConfig","displayName","componentId","disabled","Typography","Size14","inputTextStyle","inputPlaceholderStyle","interpolation","LeftIcon","Icon","clickable","LeftContentWrapper","div","RightContentWrapper","RightItemWrapper","ClearIconWrapper","foundation","theme","getInputTypography","size","TextFieldSize","XS","M","L","Size16","XL","Size18","Wrapper","bgColor","borderRadius","DisabledOpacity","variant","TextFieldVariant","Primary","inputWrapperStyle","focused","focusedInputWrapperStyle","hasError","erroredInputWrapperStyle","transition","getTransitionsCSS"],"mappings":"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"}

package/dist/cjs/components/Forms/Inputs/TextField/TextField.types.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var FormFieldSize = require('../../FormFieldSize.js');
+
+let TextFieldType = /*#__PURE__*/function (TextFieldType) {
+  TextFieldType["Search"] = "search";
+  TextFieldType["Text"] = "text";
+  TextFieldType["Email"] = "email";
+  TextFieldType["Password"] = "password";
+  TextFieldType["Tel"] = "tel";
+  TextFieldType["Url"] = "url";
+  TextFieldType["Hidden"] = "hidden";
+  TextFieldType["Number"] = "number";
+  return TextFieldType;
+}({});
+let TextFieldSize = function (TextFieldSize) {
+  TextFieldSize[TextFieldSize["XL"] = FormFieldSize.default.XL] = "XL";
+  TextFieldSize[TextFieldSize["L"] = FormFieldSize.default.L] = "L";
+  TextFieldSize[TextFieldSize["M"] = FormFieldSize.default.M] = "M";
+  TextFieldSize[TextFieldSize["XS"] = FormFieldSize.default.XS] = "XS";
+  return TextFieldSize;
+}({});
+let TextFieldVariant = /*#__PURE__*/function (TextFieldVariant) {
+  TextFieldVariant[TextFieldVariant["Primary"] = 0] = "Primary";
+  TextFieldVariant[TextFieldVariant["Secondary"] = 1] = "Secondary";
+  return TextFieldVariant;
+}({});
+
+exports.TextFieldSize = TextFieldSize;
+exports.TextFieldType = TextFieldType;
+exports.TextFieldVariant = TextFieldVariant;
+//# sourceMappingURL=TextField.types.js.map

package/dist/cjs/components/Forms/Inputs/TextField/TextField.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.types.js","sources":["../../../../../../src/components/Forms/Inputs/TextField/TextField.types.ts"],"sourcesContent":["import type React from 'react'\n\nimport { type BezierIcon } from '@channel.io/bezier-icons'\n\nimport type {\n  AdditionalColorProps,\n  AdditionalStylableProps,\n  BezierComponentProps,\n  SideContentProps,\n  SizeProps,\n  VariantProps,\n} from '~/src/types/ComponentProps'\n\nimport type { FormComponentProps } from '~/src/components/Forms'\nimport { FormFieldSize } from '~/src/components/Forms'\n\nexport enum TextFieldType {\n  Search = 'search',\n  Text = 'text',\n  Email = 'email',\n  Password = 'password',\n  Tel = 'tel',\n  Url = 'url',\n  Hidden = 'hidden',\n  Number = 'number',\n}\n\nexport enum TextFieldSize {\n  XL = FormFieldSize.XL,\n  L = FormFieldSize.L,\n  M = FormFieldSize.M,\n  XS = FormFieldSize.XS,\n}\n\nexport type SelectionRangeDirections = 'forward' | 'backward' | 'none'\n\nexport enum TextFieldVariant {\n  Primary,\n  Secondary,\n}\n\nexport type TextFieldItemProps = {\n  icon: BezierIcon\n  onClick?: React.MouseEventHandler\n} & AdditionalColorProps<'icon'> | React.ReactElement\n\nexport interface TextFieldRef {\n  focus(options?: FocusOptions): void\n  blur(): void\n  setSelectionRange(start?: number, end?: number, direction?: SelectionRangeDirections): void\n  getSelectionRange(): [number, number]\n  selectAll(): void\n  unselect(): void\n  getBoundingClientRect(): ClientRect | DOMRect\n  getDOMNode(): Element | Text | null\n}\n\ntype ChangeEventHandler = React.ChangeEventHandler<HTMLInputElement>\ntype KeyboardEventHandler = React.KeyboardEventHandler<HTMLInputElement>\n\ninterface TextFieldOptions {\n  type?: TextFieldType\n  allowClear?: boolean\n  selectAllOnInit?: boolean\n  selectAllOnFocus?: boolean\n  withoutLeftContentWrapper?: boolean\n  withoutRightContentWrapper?: boolean\n  onFocus?: ChangeEventHandler\n  onChange?: ChangeEventHandler\n  onKeyDown?: KeyboardEventHandler\n  onKeyUp?: KeyboardEventHandler\n}\n\ntype OmittedInputHTMLAttributes = 'type' | 'size' | 'readOnly' | 'disabled' | 'onFocus'\n\nexport interface TextFieldProps extends\n  FormComponentProps,\n  BezierComponentProps,\n  SizeProps<TextFieldSize>,\n  VariantProps<TextFieldVariant>,\n  SideContentProps<TextFieldItemProps, TextFieldItemProps | TextFieldItemProps[]>,\n  AdditionalStylableProps<['input', 'wrapper', 'leftWrapper', 'rightWrapper']>,\n  Omit<React.InputHTMLAttributes<HTMLInputElement>, OmittedInputHTMLAttributes>,\n  TextFieldOptions {}\n"],"names":["TextFieldType","TextFieldSize","FormFieldSize","XL","L","M","XS","TextFieldVariant"],"mappings":";;;;AAgBYA,IAAAA,aAAa,0BAAbA,aAAa,EAAA;EAAbA,aAAa,CAAA,QAAA,CAAA,GAAA,QAAA,CAAA;EAAbA,aAAa,CAAA,MAAA,CAAA,GAAA,MAAA,CAAA;EAAbA,aAAa,CAAA,OAAA,CAAA,GAAA,OAAA,CAAA;EAAbA,aAAa,CAAA,UAAA,CAAA,GAAA,UAAA,CAAA;EAAbA,aAAa,CAAA,KAAA,CAAA,GAAA,KAAA,CAAA;EAAbA,aAAa,CAAA,KAAA,CAAA,GAAA,KAAA,CAAA;EAAbA,aAAa,CAAA,QAAA,CAAA,GAAA,QAAA,CAAA;EAAbA,aAAa,CAAA,QAAA,CAAA,GAAA,QAAA,CAAA;AAAA,EAAA,OAAbA,aAAa,CAAA;AAAA,CAAA,CAAA,EAAA,EAAA;AAWbC,IAAAA,aAAa,aAAbA,aAAa,EAAA;AAAbA,EAAAA,aAAa,CAAbA,aAAa,CAClBC,IAAAA,CAAAA,GAAAA,qBAAa,CAACC,EAAE,CAAA,GAAA,IAAA,CAAA;AADXF,EAAAA,aAAa,CAAbA,aAAa,CAEnBC,GAAAA,CAAAA,GAAAA,qBAAa,CAACE,CAAC,CAAA,GAAA,GAAA,CAAA;AAFTH,EAAAA,aAAa,CAAbA,aAAa,CAGnBC,GAAAA,CAAAA,GAAAA,qBAAa,CAACG,CAAC,CAAA,GAAA,GAAA,CAAA;AAHTJ,EAAAA,aAAa,CAAbA,aAAa,CAIlBC,IAAAA,CAAAA,GAAAA,qBAAa,CAACI,EAAE,CAAA,GAAA,IAAA,CAAA;AAAA,EAAA,OAJXL,aAAa,CAAA;AAAA,CAAA,CAAA,EAAA,EAAA;AASbM,IAAAA,gBAAgB,0BAAhBA,gBAAgB,EAAA;AAAhBA,EAAAA,gBAAgB,CAAhBA,gBAAgB,CAAA,SAAA,CAAA,GAAA,CAAA,CAAA,GAAA,SAAA,CAAA;AAAhBA,EAAAA,gBAAgB,CAAhBA,gBAAgB,CAAA,WAAA,CAAA,GAAA,CAAA,CAAA,GAAA,WAAA,CAAA;AAAA,EAAA,OAAhBA,gBAAgB,CAAA;AAAA,CAAA,CAAA,EAAA;;;;;;"}

package/dist/cjs/components/Forms/Inputs/TextField/TextFieldUtils.js

@@ -0,0 +1,36 @@
+'use strict';
+
+var TextField_types = require('./TextField.types.js');
+var index = require('../../../../foundation/Rounding/index.js');
+
+function getProperTextFieldBgColor({
+  variant,
+  focused,
+  hasError,
+  readOnly
+}) {
+  if (variant === TextField_types.TextFieldVariant.Secondary) {
+    return 'bg-black-lightest';
+  }
+  if (variant === TextField_types.TextFieldVariant.Primary && readOnly) {
+    return 'bg-grey-lighter';
+  }
+  if (variant === TextField_types.TextFieldVariant.Primary && (focused || hasError)) {
+    return 'bg-white-normal';
+  }
+  return 'bg-grey-lightest';
+}
+function getProperTextFieldBorderRadius({
+  size
+}) {
+  switch (size) {
+    case TextField_types.TextFieldSize.XL:
+      return index.Rounding.round12;
+    default:
+      return index.Rounding.round8;
+  }
+}
+
+exports.getProperTextFieldBgColor = getProperTextFieldBgColor;
+exports.getProperTextFieldBorderRadius = getProperTextFieldBorderRadius;
+//# sourceMappingURL=TextFieldUtils.js.map

package/dist/cjs/components/Forms/Inputs/TextField/TextFieldUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextFieldUtils.js","sources":["../../../../../../src/components/Forms/Inputs/TextField/TextFieldUtils.ts"],"sourcesContent":["import { type FlattenSimpleInterpolation } from 'styled-components'\n\nimport {\n  Rounding,\n  type SemanticNames,\n} from '~/src/foundation'\n\nimport {\n  TextFieldSize,\n  TextFieldVariant,\n} from './TextField.types'\n\ninterface BackgroundColorProps {\n  variant: TextFieldVariant\n  focused: boolean\n  hasError: boolean\n  readOnly: boolean\n}\n\nexport function getProperTextFieldBgColor({\n  variant,\n  focused,\n  hasError,\n  readOnly,\n}: BackgroundColorProps): SemanticNames {\n  if (variant === TextFieldVariant.Secondary) { return 'bg-black-lightest' }\n  if (variant === TextFieldVariant.Primary && readOnly) { return 'bg-grey-lighter' }\n  if (variant === TextFieldVariant.Primary && (focused || hasError)) { return 'bg-white-normal' }\n  return 'bg-grey-lightest'\n}\n\ninterface BorderRadiusProps {\n  size: TextFieldSize\n}\n\nexport function getProperTextFieldBorderRadius({\n  size,\n}: BorderRadiusProps): FlattenSimpleInterpolation {\n  switch (size) {\n    case TextFieldSize.XL:\n      return Rounding.round12\n    default:\n      return Rounding.round8\n  }\n}\n"],"names":["getProperTextFieldBgColor","variant","focused","hasError","readOnly","TextFieldVariant","Secondary","Primary","getProperTextFieldBorderRadius","size","TextFieldSize","XL","Rounding","round12","round8"],"mappings":";;;;;AAmBO,SAASA,yBAAyBA,CAAC;EACxCC,OAAO;EACPC,OAAO;EACPC,QAAQ;AACRC,EAAAA,QAAAA;AACoB,CAAC,EAAiB;AACtC,EAAA,IAAIH,OAAO,KAAKI,gCAAgB,CAACC,SAAS,EAAE;AAAE,IAAA,OAAO,mBAAmB,CAAA;AAAC,GAAA;AACzE,EAAA,IAAIL,OAAO,KAAKI,gCAAgB,CAACE,OAAO,IAAIH,QAAQ,EAAE;AAAE,IAAA,OAAO,iBAAiB,CAAA;AAAC,GAAA;EACjF,IAAIH,OAAO,KAAKI,gCAAgB,CAACE,OAAO,KAAKL,OAAO,IAAIC,QAAQ,CAAC,EAAE;AAAE,IAAA,OAAO,iBAAiB,CAAA;AAAC,GAAA;AAC9F,EAAA,OAAO,kBAAkB,CAAA;AAC3B,CAAA;AAMO,SAASK,8BAA8BA,CAAC;AAC7CC,EAAAA,IAAAA;AACiB,CAAC,EAA8B;AAChD,EAAA,QAAQA,IAAI;IACV,KAAKC,6BAAa,CAACC,EAAE;MACnB,OAAOC,cAAQ,CAACC,OAAO,CAAA;AACzB,IAAA;MACE,OAAOD,cAAQ,CAACE,MAAM,CAAA;AAC1B,GAAA;AACF;;;;;"}

package/dist/cjs/components/Forms/Inputs/constants/CommonImeControlKeys.js

@@ -0,0 +1,6 @@
+'use strict';
+
+const COMMON_IME_CONTROL_KEYS = ['Enter', 'Escape', 'Tab', ' ', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+
+exports.COMMON_IME_CONTROL_KEYS = COMMON_IME_CONTROL_KEYS;
+//# sourceMappingURL=CommonImeControlKeys.js.map

package/dist/cjs/components/Forms/Inputs/constants/CommonImeControlKeys.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommonImeControlKeys.js","sources":["../../../../../../src/components/Forms/Inputs/constants/CommonImeControlKeys.ts"],"sourcesContent":["export const COMMON_IME_CONTROL_KEYS = ['Enter', 'Escape', 'Tab', ' ', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']\n"],"names":["COMMON_IME_CONTROL_KEYS"],"mappings":";;MAAaA,uBAAuB,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY;;;;"}

package/dist/cjs/components/Forms/Inputs/mixins.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var FoundationStyledComponent = require('../../../foundation/FoundationStyledComponent.js');
+
+const inputTextStyle = /*#__PURE__*/FoundationStyledComponent.css(["color:", ";", ""], ({
+  foundation
+}) => foundation?.theme?.['txt-black-darkest'], props => props?.readOnly && FoundationStyledComponent.css(["color:", ";"], ({
+  foundation
+}) => foundation?.theme?.['txt-black-darker']));
+const inputPlaceholderStyle = /*#__PURE__*/FoundationStyledComponent.css(["&::placeholder{color:", ";}"], ({
+  foundation
+}) => foundation?.theme?.['txt-black-dark']);
+const inputWrapperStyle = /*#__PURE__*/FoundationStyledComponent.css(["box-shadow:0 1px 2px ", ",inset 0 0 0 1px ", ";"], ({
+  foundation
+}) => foundation?.theme?.['bg-black-lighter'], ({
+  foundation
+}) => foundation?.theme?.['bg-black-dark']);
+const focusedInputWrapperStyle = /*#__PURE__*/FoundationStyledComponent.css(["box-shadow:0 0 0 3px ", ",inset 0 0 0 1px ", ";"], ({
+  foundation
+}) => foundation?.theme?.['bgtxt-blue-light'], ({
+  foundation
+}) => foundation?.theme?.['bgtxt-blue-normal']);
+const erroredInputWrapperStyle = /*#__PURE__*/FoundationStyledComponent.css(["box-shadow:0 0 0 3px ", ",inset 0 0 0 1px ", ";"], ({
+  foundation
+}) => foundation?.theme?.['bgtxt-orange-light'], ({
+  foundation
+}) => foundation?.theme?.['bgtxt-orange-normal']);
+
+exports.erroredInputWrapperStyle = erroredInputWrapperStyle;
+exports.focusedInputWrapperStyle = focusedInputWrapperStyle;
+exports.inputPlaceholderStyle = inputPlaceholderStyle;
+exports.inputTextStyle = inputTextStyle;
+exports.inputWrapperStyle = inputWrapperStyle;
+//# sourceMappingURL=mixins.js.map

package/dist/cjs/components/Forms/Inputs/mixins.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mixins.js","sources":["../../../../../src/components/Forms/Inputs/mixins.ts"],"sourcesContent":["import { css } from '~/src/foundation'\n\nimport { type FormComponentProps } from '~/src/components/Forms/Form.types'\n\nexport const inputTextStyle = css`\n  color: ${({ foundation }) => foundation?.theme?.['txt-black-darkest']};\n\n  ${(props: FormComponentProps) => props?.readOnly && css`\n    color: ${({ foundation }) => foundation?.theme?.['txt-black-darker']};\n  `}\n`\n\nexport const inputPlaceholderStyle = css`\n  &::placeholder {\n    color: ${({ foundation }) => foundation?.theme?.['txt-black-dark']};\n  }\n`\n\nexport const inputWrapperStyle = css`\n  box-shadow: 0 1px 2px ${({ foundation }) => foundation?.theme?.['bg-black-lighter']},\n    inset 0 0 0 1px ${({ foundation }) => foundation?.theme?.['bg-black-dark']};\n`\n\nexport const focusedInputWrapperStyle = css`\n  box-shadow: 0 0 0 3px ${({ foundation }) => foundation?.theme?.['bgtxt-blue-light']},\n    inset 0 0 0 1px ${({ foundation }) => foundation?.theme?.['bgtxt-blue-normal']};\n`\n\nexport const erroredInputWrapperStyle = css`\n  box-shadow: 0 0 0 3px ${({ foundation }) => foundation?.theme?.['bgtxt-orange-light']},\n    inset 0 0 0 1px ${({ foundation }) => foundation?.theme?.['bgtxt-orange-normal']};\n`\n"],"names":["inputTextStyle","css","foundation","theme","props","readOnly","inputPlaceholderStyle","inputWrapperStyle","focusedInputWrapperStyle","erroredInputWrapperStyle"],"mappings":";;;;AAIaA,MAAAA,cAAc,gBAAGC,6BAAG,sBACtB,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,mBAAmB,CAAC,EAElEC,KAAyB,IAAKA,KAAK,EAAEC,QAAQ,IAAIJ,6BAAG,kBAC5C,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,kBAAkB,CAAC,CACrE,EACF;AAEYG,MAAAA,qBAAqB,gBAAGL,6BAAG,kCAE3B,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,gBAAgB,CAAC,EAErE;AAEYI,MAAAA,iBAAiB,gBAAGN,6BAAG,sDACV,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,kBAAkB,CAAC,EAC/D,CAAC;AAAED,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,eAAe,CAAC,EAC7E;AAEYK,MAAAA,wBAAwB,gBAAGP,6BAAG,sDACjB,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,kBAAkB,CAAC,EAC/D,CAAC;AAAED,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,mBAAmB,CAAC,EACjF;AAEYM,MAAAA,wBAAwB,gBAAGR,6BAAG,sDACjB,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,oBAAoB,CAAC,EACjE,CAAC;AAAED,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,qBAAqB,CAAC;;;;;;;;"}

package/dist/cjs/components/Forms/RadioGroup/Radio.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var React = require('react');
+var useId = require('../../../hooks/useId.js');
+var RadioGroup_styled = require('./RadioGroup.styled.js');
+
+function RadioImpl({
+  children,
+  id: idProp,
+  ...rest
+}, forwardedRef) {
+  const id = useId.default(idProp, 'bezier-radio');
+  return /*#__PURE__*/React.createElement(RadioGroup_styled.RadioGroupPrimitiveItem, Object.assign({
+    ref: forwardedRef,
+    id: id
+  }, rest), children &&
+  /*#__PURE__*/
+  /* FIXME(@ed): Delete after applying polymorphic props */
+  /* @ts-ignore */
+  React.createElement(RadioGroup_styled.Label, {
+    htmlFor: id
+  }, children));
+}
+
+/**
+ * `Radio` is a checkable button, known as a radio button.
+ * It should be a child of `RadioGroup`.
+ */
+const Radio = /*#__PURE__*/React.forwardRef(RadioImpl);
+
+exports.Radio = Radio;
+//# sourceMappingURL=Radio.js.map

package/dist/cjs/components/Forms/RadioGroup/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","sources":["../../../../../src/components/Forms/RadioGroup/Radio.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport useId from '~/src/hooks/useId'\n\nimport { type RadioProps } from './RadioGroup.types'\n\nimport * as Styled from './RadioGroup.styled'\n\nfunction RadioImpl<Value extends string>({\n  children,\n  id: idProp,\n  ...rest\n}: RadioProps<Value>, forwardedRef: React.Ref<HTMLButtonElement>) {\n  const id = useId(idProp, 'bezier-radio')\n\n  return (\n    <Styled.RadioGroupPrimitiveItem\n      ref={forwardedRef}\n      id={id}\n      {...rest}\n    >\n      { children && (\n        /* FIXME(@ed): Delete after applying polymorphic props */\n        /* @ts-ignore */\n        <Styled.Label htmlFor={id}>\n          { children }\n        </Styled.Label>\n      ) }\n    </Styled.RadioGroupPrimitiveItem>\n  )\n}\n\n/**\n * `Radio` is a checkable button, known as a radio button.\n * It should be a child of `RadioGroup`.\n */\nexport const Radio = forwardRef(RadioImpl) as <Value extends string>(\n  props: RadioProps<Value> & { ref?: React.ForwardedRef<HTMLButtonElement> }\n) => ReturnType<typeof RadioImpl<Value>>\n"],"names":["RadioImpl","children","id","idProp","rest","forwardedRef","useId","React","createElement","Styled","Object","assign","ref","htmlFor","Radio","forwardRef"],"mappings":";;;;;;AAQA,SAASA,SAASA,CAAuB;EACvCC,QAAQ;AACRC,EAAAA,EAAE,EAAEC,MAAM;EACV,GAAGC,IAAAA;AACc,CAAC,EAAEC,YAA0C,EAAE;AAChE,EAAA,MAAMH,EAAE,GAAGI,aAAK,CAACH,MAAM,EAAE,cAAc,CAAC,CAAA;EAExC,oBACEI,KAAA,CAAAC,aAAA,CAACC,yCAA8B,EAAAC,MAAA,CAAAC,MAAA,CAAA;AAC7BC,IAAAA,GAAG,EAAEP,YAAa;AAClBH,IAAAA,EAAE,EAAEA,EAAAA;GACAE,EAAAA,IAAI,GAENH,QAAQ;AAAA;AACR;AACA;AACAM,EAAAA,KAAA,CAAAC,aAAA,CAACC,uBAAY,EAAA;AAACI,IAAAA,OAAO,EAAEX,EAAAA;GACnBD,EAAAA,QACU,CAEc,CAAC,CAAA;AAErC,CAAA;;AAEA;AACA;AACA;AACA;MACaa,KAAK,gBAAGC,gBAAU,CAACf,SAAS;;;;"}