@teamturing/react-kit 2.18.0 → 2.19.0

package/esm/core/Checkbox/index.js

@@ -164,6 +164,6 @@ const BaseCheckbox = styled(UnstyledCheckbox)`
 
   ${sx}
 `;
-var index = /*#__PURE__*/forwardRef(Checkbox);
+var Checkbox$1 = /*#__PURE__*/forwardRef(Checkbox);
 
-export { index as default };
+export { Checkbox$1 as default };

package/esm/core/FormControl/FormControlCaption.js

@@ -0,0 +1,21 @@
+import { useContext } from 'react';
+import Text from '../Text/index.js';
+import { FormControlContext } from './index.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const FormControlCaption = ({
+  children
+}) => {
+  const {
+    id
+  } = useContext(FormControlContext);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(Text, {
+    as: 'span',
+    id: id,
+    typography: 'xs',
+    color: 'text/neutral/subtlest',
+    children: children
+  });
+};
+
+export { FormControlCaption as default };

package/esm/core/FormControl/FormControlErrorMessage.js

@@ -0,0 +1,34 @@
+import { useContext } from 'react';
+import styled, { keyframes } from 'styled-components';
+import Text from '../Text/index.js';
+import { FormControlContext } from './index.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const FormControlErrorMessage = ({
+  children
+}) => {
+  const {
+    id
+  } = useContext(FormControlContext);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(StyledText, {
+    id: id,
+    typography: 'xs',
+    color: 'text/danger',
+    children: children
+  });
+};
+const errorMessageKeyframe = keyframes`
+  0% {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+const StyledText = styled(Text)`
+  animation: 170ms ${errorMessageKeyframe} cubic-bezier(0.44, 0.74, 0.36, 1);
+`;
+
+export { FormControlErrorMessage as default };

package/esm/core/FormControl/FormControlLabel.js

@@ -0,0 +1,79 @@
+import { useContext } from 'react';
+import styled from 'styled-components';
+import { forcePixelValue } from '../../utils/forcePixelValue.js';
+import { sx } from '../../utils/styled-system/index.js';
+import View from '../View/index.js';
+import { FormControlContext } from './index.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const FormControlLabel = ({
+  children,
+  visuallyHidden,
+  ...props
+}) => {
+  const {
+    id,
+    disabled,
+    required
+  } = useContext(FormControlContext);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(VisuallyHidden, {
+    as: 'label',
+    htmlFor: id,
+    isVisible: !visuallyHidden,
+    children: /*#__PURE__*/jsxRuntimeExports.jsxs(LabelWrapper, {
+      ...props,
+      disabled: disabled,
+      children: [children, required ? /*#__PURE__*/jsxRuntimeExports.jsx(View, {
+        as: 'span',
+        "aria-hidden": "true",
+        children: ' *'
+      }) : null]
+    })
+  });
+};
+const VisuallyHidden = styled.span`
+  ${({
+  isVisible = false
+}) => {
+  if (isVisible) {
+    return sx;
+  }
+  return `
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border-width: 0;
+    `;
+}}
+`;
+const LabelWrapper = styled(View)`
+  display: block;
+  align-self: flex-start;
+
+  font-size: ${({
+  theme
+}) => forcePixelValue(theme.fontSizes.xs)};
+  font-weight: ${({
+  theme
+}) => theme.fontWeights.medium};
+  line-height: ${({
+  theme
+}) => theme.lineHeights[2]};
+
+  color: ${({
+  theme
+}) => theme.colors['text/neutral/subtle']};
+
+  cursor: ${({
+  disabled
+}) => disabled ? 'not-allowed' : 'pointer'};
+
+  ${sx};
+`;
+
+export { FormControlLabel as default };

package/esm/core/FormControl/FormControlSuccessMessage.js

@@ -0,0 +1,34 @@
+import { useContext } from 'react';
+import styled, { keyframes } from 'styled-components';
+import Text from '../Text/index.js';
+import { FormControlContext } from './index.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const FormControlSuccessMessage = ({
+  children
+}) => {
+  const {
+    id
+  } = useContext(FormControlContext);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(StyledText, {
+    id: id,
+    typography: 'xs',
+    color: 'text/success',
+    children: children
+  });
+};
+const successMessageKeyframe = keyframes`
+  0% {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+const StyledText = styled(Text)`
+  animation: 170ms ${successMessageKeyframe} cubic-bezier(0.44, 0.74, 0.36, 1);
+`;
+
+export { FormControlSuccessMessage as default };

package/esm/core/FormControl/index.js

@@ -0,0 +1,87 @@
+import { forwardRef, createContext, isValidElement, cloneElement } from 'react';
+import useRelocation from '../../hook/useRelocation.js';
+import Checkbox from '../Checkbox/index.js';
+import OverlaySelectInput from '../OverlaySelectInput/index.js';
+import Select from '../Select/index.js';
+import TextInput from '../TextInput/index.js';
+import View from '../View/index.js';
+import FormControlCaption from './FormControlCaption.js';
+import FormControlErrorMessage from './FormControlErrorMessage.js';
+import FormControlLabel from './FormControlLabel.js';
+import FormControlSuccessMessage from './FormControlSuccessMessage.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const FormControlContext = /*#__PURE__*/createContext({});
+const FormControl = ({
+  children: propChildren,
+  id,
+  disabled,
+  required,
+  additionalInputComponentCandidates
+}, ref) => {
+  const [relocatableComponentsObject, restComponents] = useRelocation({
+    children: propChildren,
+    config: {
+      label: FormControlLabel,
+      caption: FormControlCaption,
+      errorMessage: FormControlErrorMessage,
+      successMessage: FormControlSuccessMessage
+    }
+  });
+  const inputComponentCandidates = [TextInput, Select, OverlaySelectInput, Checkbox, ...additionalInputComponentCandidates];
+  const InputComponent = restComponents.find(component => inputComponentCandidates.some(candidate => /*#__PURE__*/isValidElement(component) && component.type === candidate));
+  const isHorizontalLayoutNeeded = /*#__PURE__*/isValidElement(InputComponent) && InputComponent.type === Checkbox;
+  return /*#__PURE__*/jsxRuntimeExports.jsx(FormControlContext.Provider, {
+    value: {
+      id,
+      disabled,
+      required
+    },
+    children: isHorizontalLayoutNeeded ? /*#__PURE__*/jsxRuntimeExports.jsxs(View, {
+      ref: ref,
+      display: 'flex',
+      sx: {
+        columnGap: 2
+      },
+      children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
+        children: /*#__PURE__*/cloneElement(InputComponent, {
+          id,
+          disabled,
+          required
+        })
+      }), /*#__PURE__*/jsxRuntimeExports.jsxs(View, {
+        sx: {
+          '& > span': {
+            mt: 0
+          }
+        },
+        children: [relocatableComponentsObject.label, relocatableComponentsObject.caption, relocatableComponentsObject.errorMessage, relocatableComponentsObject.successMessage]
+      })]
+    }) : /*#__PURE__*/jsxRuntimeExports.jsxs(View, {
+      ref: ref,
+      display: 'flex',
+      flexDirection: 'column',
+      sx: {
+        '& > label': {
+          mb: 1
+        },
+        '& > span': {
+          mt: 1
+        }
+      },
+      children: [relocatableComponentsObject.label, /*#__PURE__*/cloneElement(InputComponent, {
+        id,
+        disabled,
+        required
+      }), relocatableComponentsObject.caption, relocatableComponentsObject.errorMessage, relocatableComponentsObject.successMessage]
+    })
+  });
+};
+var index = Object.assign( /*#__PURE__*/forwardRef(FormControl), {
+  Label: FormControlLabel,
+  Caption: FormControlCaption,
+  ErrorMessage: FormControlErrorMessage,
+  SuccessMessage: FormControlSuccessMessage
+});
+
+export { FormControlContext, index as default };

package/esm/core/OverlaySelectInput/index.js

@@ -232,6 +232,6 @@ const BaseInput = styled(UnstyledInput)`
   theme
 }) => forcePixelValue(theme.space['5'])};
 `;
-var index = /*#__PURE__*/forwardRef(OverlaySelectInput);
+var OverlaySelectInput$1 = /*#__PURE__*/forwardRef(OverlaySelectInput);
 
-export { index as default };
+export { OverlaySelectInput$1 as default };

package/esm/core/Select/index.js

@@ -63,7 +63,7 @@ const Select = ({
           }
         }
       },
-      children: [/*#__PURE__*/jsxRuntimeExports.jsx("option", {
+      children: [/*#__PURE__*/jsxRuntimeExports.jsx(SelectOption, {
         label: placeholder,
         value: PLACEHOLDER_VALUE
       }), children]
@@ -227,8 +227,8 @@ const BaseSelect = styled(UnstyledSelect)`
   white-space: pre;
   text-overflow: ellipsis;
 `;
-var index = Object.assign( /*#__PURE__*/forwardRef(Select), {
+var Select$1 = Object.assign( /*#__PURE__*/forwardRef(Select), {
   Option: SelectOption
 });
 
-export { index as default };
+export { Select$1 as default };

package/esm/core/TextInput/index.js

@@ -225,8 +225,8 @@ const BaseInput = styled(UnstyledInput)`
   theme
 }) => forcePixelValue(theme.space['5'])};
 `;
-var index = Object.assign( /*#__PURE__*/forwardRef(TextInput), {
+var TextInput$1 = Object.assign( /*#__PURE__*/forwardRef(TextInput), {
   TrailingAction: TextInputTrailingAction
 });
 
-export { index as default };
+export { TextInput$1 as default };

package/esm/index.js

@@ -9,6 +9,7 @@ export { default as DescriptionList } from './core/DescriptionList/index.js';
 export { default as Dialog } from './core/Dialog/index.js';
 export { default as DialogHandler } from './core/DialogHandler/index.js';
 export { default as EmptyState } from './core/EmptyState/index.js';
+export { default as FormControl } from './core/FormControl/index.js';
 export { default as GradientText } from './core/GradientText/index.js';
 export { default as Grid } from './core/Grid/index.js';
 export { default as HorizontalDivider } from './core/HorizontalDivider/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.18.0",
+  "version": "2.19.0",
   "description": "React components, hooks for create teamturing web application",
   "author": "Sungchang Park <psch300@gmail.com> (https://github.com/psch300)",
   "homepage": "https://github.com/weareteamturing/bombe#readme",
@@ -62,5 +62,5 @@
     "react-is": "^18.2.0",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "7e5d700d947efa6123f50698bdcef68160fb21e3"
+  "gitHead": "0a40eab032d58877e2176890d7ea32f758366e26"
 }