@teamturing/react-kit 2.19.31 → 2.19.33

package/dist/core/Radio/index.d.ts

@@ -0,0 +1,10 @@
+import { InputHTMLAttributes } from 'react';
+import { SxProp } from '../../utils/styled-system';
+type Props = {
+    validationStatus?: 'error' | 'success' | undefined;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & SxProp;
+declare const _default: import("react").ForwardRefExoticComponent<{
+    validationStatus?: "error" | "success" | undefined;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & SxProp & import("react").RefAttributes<HTMLInputElement>>;
+export default _default;
+export type { Props as RadioProps };

package/dist/index.d.ts

@@ -54,6 +54,8 @@ export { default as Pagination } from './core/Pagination';
 export type { PaginationProps, PaginationPageProps, PaginationPageDirectionProps } from './core/Pagination';
 export { default as Pill } from './core/Pill';
 export type { PillProps } from './core/Pill';
+export { default as Radio } from './core/Radio';
+export type { RadioProps } from './core/Radio';
 export { default as SearchSelectInput } from './core/SearchSelectInput';
 export type { SearchSelectInputProps } from './core/SearchSelectInput';
 export { default as Select } from './core/Select';

package/dist/index.js

@@ -19306,6 +19306,126 @@ const BaseFlash = styled__default.default.div`
   ${sx}
 `;
 
+const Radio = ({
+  checked,
+  validationStatus,
+  ...props
+}, ref) => {
+  const radioRef = useProvidedOrCreatedRef(ref);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(BaseRadio, {
+    ref: radioRef,
+    checked: checked,
+    validationStatus: validationStatus,
+    ...props
+  });
+};
+const UnstyledRadio = styled__default.default.input.attrs({
+  type: 'radio'
+})`
+  appearance: none;
+
+  ${sx}
+`;
+const BaseRadio = styled__default.default(UnstyledRadio)`
+  position: relative;
+
+  width: ${forcePixelValue(20)};
+  height: ${forcePixelValue(20)};
+
+  border-width: ${forcePixelValue(2)};
+  border-style: solid;
+  border-color: ${({
+  theme
+}) => theme.colors['border/neutral']};
+  border-radius: ${({
+  theme
+}) => `${forcePixelValue(theme.radii.full)}`};
+  cursor: pointer;
+
+  transition: visibility 200ms;
+
+  &::before {
+    visibility: hidden;
+
+    content: '';
+    display: grid;
+    position: absolute;
+
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    border-radius: ${({
+  theme
+}) => `${forcePixelValue(theme.radii.full)}`};
+
+    background-color: ${({
+  theme
+}) => theme.colors['icon/inverse']};
+    mask-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='4' r='4' fill='white'/%3E%3C/svg%3E%0A");
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='4' r='4' fill='white'/%3E%3C/svg%3E%0A");
+    mask-size: 40%;
+    -webkit-mask-size: 40%;
+    mask-repeat: no-repeat;
+    -webkit-mask-repeat: no-repeat;
+    mask-position: center;
+    -webkit-mask-position: center;
+  }
+
+  &:disabled {
+    background-color: ${({
+  theme
+}) => theme.colors['bg/disabled']};
+    border-color: ${({
+  theme
+}) => theme.colors['border/disabled']};
+  }
+
+  &:checked {
+    background-color: ${({
+  theme
+}) => theme.colors['bg/primary']};
+    border-width: 0;
+
+    &::before {
+      visibility: visible;
+    }
+
+    &:disabled {
+      background-color: ${({
+  theme
+}) => theme.colors['bg/disabled']};
+      border-color: ${({
+  theme
+}) => theme.colors['border/disabled']};
+
+      &::before {
+        background-color: ${({
+  theme
+}) => theme.colors['icon/disabled']};
+      }
+    }
+  }
+
+  &:focus-visible {
+    outline-width: ${forcePixelValue(2)};
+    outline-style: solid;
+    outline-color: ${({
+  theme
+}) => theme.colors['border/focused']};
+  }
+
+  ${props => props.validationStatus === 'error' && styled.css`
+      border-color: ${({
+  theme
+}) => theme.colors['border/danger']};
+    `}
+
+  ${sx}
+`;
+var Radio$1 = /*#__PURE__*/React.forwardRef(Radio);
+
 const Overlay = ({
   children,
   isOpen,
@@ -23122,9 +23242,9 @@ const FormControl = ({
       successMessage: FormControlSuccessMessage
     }
   });
-  const inputComponentCandidates = [TextInput$1, Textarea, Select$1, SearchSelectInput$1, Checkbox$1, ...additionalInputComponentCandidates];
+  const inputComponentCandidates = [TextInput$1, Textarea, Select$1, SearchSelectInput$1, Checkbox$1, Radio$1, ...additionalInputComponentCandidates];
   const InputComponent = restComponents.find(component => inputComponentCandidates.some(candidate => /*#__PURE__*/React.isValidElement(component) && component.type === candidate));
-  const isHorizontalLayoutNeeded = /*#__PURE__*/React.isValidElement(InputComponent) && InputComponent.type === Checkbox$1;
+  const isHorizontalLayoutNeeded = /*#__PURE__*/React.isValidElement(InputComponent) && (InputComponent.type === Checkbox$1 || InputComponent.type === Radio$1);
   return /*#__PURE__*/jsxRuntimeExports.jsx(FormControlContext.Provider, {
     value: {
       id,
@@ -23138,6 +23258,7 @@ const FormControl = ({
         columnGap: 2
       },
       children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
+        display: 'inline-flex',
         children: /*#__PURE__*/React.cloneElement(InputComponent, {
           id,
           disabled,
@@ -25399,6 +25520,7 @@ exports.Overlay = Overlay$1;
 exports.OverlayPopper = OverlayPopper;
 exports.Pagination = index$3;
 exports.Pill = index$2;
+exports.Radio = Radio$1;
 exports.SearchSelectInput = SearchSelectInput$1;
 exports.Select = Select$1;
 exports.Space = Space;

package/esm/core/FormControl/index.js

@@ -1,6 +1,7 @@
 import { forwardRef, createContext, isValidElement, cloneElement } from 'react';
 import useRelocation from '../../hook/useRelocation.js';
 import Checkbox from '../Checkbox/index.js';
+import Radio from '../Radio/index.js';
 import SearchSelectInput from '../SearchSelectInput/index.js';
 import Select from '../Select/index.js';
 import TextInput from '../TextInput/index.js';
@@ -29,9 +30,9 @@ const FormControl = ({
       successMessage: FormControlSuccessMessage
     }
   });
-  const inputComponentCandidates = [TextInput, Textarea, Select, SearchSelectInput, Checkbox, ...additionalInputComponentCandidates];
+  const inputComponentCandidates = [TextInput, Textarea, Select, SearchSelectInput, Checkbox, Radio, ...additionalInputComponentCandidates];
   const InputComponent = restComponents.find(component => inputComponentCandidates.some(candidate => /*#__PURE__*/isValidElement(component) && component.type === candidate));
-  const isHorizontalLayoutNeeded = /*#__PURE__*/isValidElement(InputComponent) && InputComponent.type === Checkbox;
+  const isHorizontalLayoutNeeded = /*#__PURE__*/isValidElement(InputComponent) && (InputComponent.type === Checkbox || InputComponent.type === Radio);
   return /*#__PURE__*/jsxRuntimeExports.jsx(FormControlContext.Provider, {
     value: {
       id,
@@ -45,6 +46,7 @@ const FormControl = ({
         columnGap: 2
       },
       children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
+        display: 'inline-flex',
         children: /*#__PURE__*/cloneElement(InputComponent, {
           id,
           disabled,

package/esm/core/Radio/index.js

@@ -0,0 +1,128 @@
+import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import useProvidedOrCreatedRef from '../../hook/useProvidedOrCreatedRef.js';
+import { sx } from '../../utils/styled-system/index.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const Radio = ({
+  checked,
+  validationStatus,
+  ...props
+}, ref) => {
+  const radioRef = useProvidedOrCreatedRef(ref);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(BaseRadio, {
+    ref: radioRef,
+    checked: checked,
+    validationStatus: validationStatus,
+    ...props
+  });
+};
+const UnstyledRadio = styled.input.attrs({
+  type: 'radio'
+})`
+  appearance: none;
+
+  ${sx}
+`;
+const BaseRadio = styled(UnstyledRadio)`
+  position: relative;
+
+  width: ${forcePixelValue(20)};
+  height: ${forcePixelValue(20)};
+
+  border-width: ${forcePixelValue(2)};
+  border-style: solid;
+  border-color: ${({
+  theme
+}) => theme.colors['border/neutral']};
+  border-radius: ${({
+  theme
+}) => `${forcePixelValue(theme.radii.full)}`};
+  cursor: pointer;
+
+  transition: visibility 200ms;
+
+  &::before {
+    visibility: hidden;
+
+    content: '';
+    display: grid;
+    position: absolute;
+
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    border-radius: ${({
+  theme
+}) => `${forcePixelValue(theme.radii.full)}`};
+
+    background-color: ${({
+  theme
+}) => theme.colors['icon/inverse']};
+    mask-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='4' r='4' fill='white'/%3E%3C/svg%3E%0A");
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='4' r='4' fill='white'/%3E%3C/svg%3E%0A");
+    mask-size: 40%;
+    -webkit-mask-size: 40%;
+    mask-repeat: no-repeat;
+    -webkit-mask-repeat: no-repeat;
+    mask-position: center;
+    -webkit-mask-position: center;
+  }
+
+  &:disabled {
+    background-color: ${({
+  theme
+}) => theme.colors['bg/disabled']};
+    border-color: ${({
+  theme
+}) => theme.colors['border/disabled']};
+  }
+
+  &:checked {
+    background-color: ${({
+  theme
+}) => theme.colors['bg/primary']};
+    border-width: 0;
+
+    &::before {
+      visibility: visible;
+    }
+
+    &:disabled {
+      background-color: ${({
+  theme
+}) => theme.colors['bg/disabled']};
+      border-color: ${({
+  theme
+}) => theme.colors['border/disabled']};
+
+      &::before {
+        background-color: ${({
+  theme
+}) => theme.colors['icon/disabled']};
+      }
+    }
+  }
+
+  &:focus-visible {
+    outline-width: ${forcePixelValue(2)};
+    outline-style: solid;
+    outline-color: ${({
+  theme
+}) => theme.colors['border/focused']};
+  }
+
+  ${props => props.validationStatus === 'error' && css`
+      border-color: ${({
+  theme
+}) => theme.colors['border/danger']};
+    `}
+
+  ${sx}
+`;
+var Radio$1 = /*#__PURE__*/forwardRef(Radio);
+
+export { Radio$1 as default };

package/esm/index.js

@@ -24,6 +24,7 @@ export { default as Overlay } from './core/Overlay/index.js';
 export { default as OverlayPopper } from './core/OverlayPopper/index.js';
 export { default as Pagination } from './core/Pagination/index.js';
 export { default as Pill } from './core/Pill/index.js';
+export { default as Radio } from './core/Radio/index.js';
 export { default as SearchSelectInput } from './core/SearchSelectInput/index.js';
 export { default as Select } from './core/Select/index.js';
 export { default as Space } from './core/Space/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.19.31",
+  "version": "2.19.33",
   "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",
@@ -65,5 +65,5 @@
     "react-textarea-autosize": "^8.5.3",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "fafd0ad315a50e2779a033af6f92420eb9b49a0f"
+  "gitHead": "087278f1712786751daaf663ccb1c59116c89510"
 }