@teamturing/react-kit 2.19.30 → 2.19.32

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

@@ -1,9 +1,10 @@
-import { PropsWithChildren } from 'react';
+import { ComponentType, PropsWithChildren, SVGProps } from 'react';
 import { SxProp } from '../../utils/styled-system';
-type FlashVariantType = 'danger';
+type FlashVariantType = 'neutral' | 'danger';
 type Props = {
     variant?: FlashVariantType;
+    icon?: ComponentType<SVGProps<SVGSVGElement>>;
 } & SxProp;
-declare const Flash: ({ variant, children, ...props }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element;
+declare const Flash: ({ variant, icon: Icon, children, ...props }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element;
 export default Flash;
 export type { Props as FlashProps };

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

@@ -19245,14 +19245,15 @@ const BaseEmptyState = styled__default.default.div`
 `;
 
 const Flash = ({
-  variant = 'danger',
+  variant = 'neutral',
+  icon: Icon = SvgInfoInCircle,
   children,
   ...props
 }) => {
   return /*#__PURE__*/jsxRuntimeExports.jsxs(BaseFlash, {
     variant: variant,
     ...props,
-    children: [variant === 'danger' ? /*#__PURE__*/jsxRuntimeExports.jsx(SvgWarning, {}) : null, children]
+    children: [/*#__PURE__*/jsxRuntimeExports.jsx(Icon, {}), children]
   });
 };
 const BaseFlash = styled__default.default.div`
@@ -19271,6 +19272,20 @@ const BaseFlash = styled__default.default.div`
   ${variant({
   prop: 'variant',
   variants: {
+    neutral: {
+      'display': 'flex',
+      'flexDirection': 'row',
+      'alignItems': 'center',
+      'padding': 4,
+      'fontSize': 'xs',
+      'fontWeight': 'medium',
+      'lineHeight': 2,
+      'color': 'text/neutral',
+      'backgroundColor': 'bg/neutral',
+      '& > svg': {
+        color: 'icon/neutral/bold'
+      }
+    },
     danger: {
       'display': 'flex',
       'flexDirection': 'row',
@@ -19291,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,
@@ -23107,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,
@@ -25384,6 +25519,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/Flash/index.js

@@ -1,5 +1,5 @@
 import 'react';
-import SvgWarning from '../../packages/icons/esm/Warning.js';
+import SvgInfoInCircle from '../../packages/icons/esm/InfoInCircle.js';
 import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
 import styled from 'styled-components';
 import '../../node_modules/styled-system/dist/index.esm.js';
@@ -8,14 +8,15 @@ import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js'
 import { variant } from '../../node_modules/@styled-system/variant/dist/index.esm.js';
 
 const Flash = ({
-  variant = 'danger',
+  variant = 'neutral',
+  icon: Icon = SvgInfoInCircle,
   children,
   ...props
 }) => {
   return /*#__PURE__*/jsxRuntimeExports.jsxs(BaseFlash, {
     variant: variant,
     ...props,
-    children: [variant === 'danger' ? /*#__PURE__*/jsxRuntimeExports.jsx(SvgWarning, {}) : null, children]
+    children: [/*#__PURE__*/jsxRuntimeExports.jsx(Icon, {}), children]
   });
 };
 const BaseFlash = styled.div`
@@ -34,6 +35,20 @@ const BaseFlash = styled.div`
   ${variant({
   prop: 'variant',
   variants: {
+    neutral: {
+      'display': 'flex',
+      'flexDirection': 'row',
+      'alignItems': 'center',
+      'padding': 4,
+      'fontSize': 'xs',
+      'fontWeight': 'medium',
+      'lineHeight': 2,
+      'color': 'text/neutral',
+      'backgroundColor': 'bg/neutral',
+      '& > svg': {
+        color: 'icon/neutral/bold'
+      }
+    },
     danger: {
       'display': 'flex',
       'flexDirection': 'row',

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,

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.30",
+  "version": "2.19.32",
   "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": "0efd1dddc8466518e381a7fa855f19f2a7e5a7b3"
+  "gitHead": "810f5dc18c7ede79944480e217574b67125b5b97"
 }