@teamturing/react-kit 2.53.8 → 2.55.0

package/dist/theme/index.d.ts

@@ -305,6 +305,11 @@ declare const theme: {
     opacity: {
         readonly disabled: number;
     };
+    components: {
+        spinner: {
+            defaultVariant: "progress-gradient";
+        };
+    };
 };
 declare const gpaiLightTheme: {
     colors: {
@@ -502,6 +507,11 @@ declare const gpaiLightTheme: {
         readonly 'text/danger': "#F22735";
         readonly 'text/selected': "#33373B";
     };
+    components: {
+        spinner: {
+            defaultVariant: "progress-line";
+        };
+    };
     breakpoints: string[];
     space: {
         readonly '-80': number;
@@ -810,6 +820,11 @@ declare const gpaiDarkTheme: {
         readonly 'text/danger': "#F5525D";
         readonly 'text/selected': "#F9FAFB";
     };
+    components: {
+        spinner: {
+            defaultVariant: "progress-line";
+        };
+    };
     breakpoints: string[];
     space: {
         readonly '-80': number;

package/dist/utils/createSafeContext.d.ts

@@ -0,0 +1,6 @@
+export declare function createSafeContext<ContextValue>({ errorMessage }: {
+    errorMessage: string;
+}): readonly [({ children, value }: {
+    value: ContextValue;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element, () => ContextValue & ({} | undefined)];

package/esm/core/CheckboxGroup/CheckboxGroupOption.js

@@ -0,0 +1,56 @@
+import { forwardRef } from 'react';
+import Checkbox from '../Checkbox/index.js';
+import FormControl from '../FormControl/index.js';
+import { useCheckboxGroupContext } from './index.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const CheckboxGroupOption = ({
+  value,
+  label,
+  disabled: optionDisabled,
+  onChange: onOptionChange,
+  children,
+  ...checkboxProps
+}, ref) => {
+  const {
+    name,
+    value: groupValue,
+    onChange: onGroupChange,
+    disabled: groupDisabled,
+    required
+  } = useCheckboxGroupContext();
+
+  // CheckboxGroup의 value 배열에 현재 value가 포함되어 있는지 확인
+  const checked = groupValue ? groupValue.includes(value) : false;
+  const disabled = groupDisabled || optionDisabled;
+  const displayLabel = children || label;
+  const handleChange = e => {
+    // CheckboxGroup의 onChange 호출
+    onGroupChange?.(e);
+    // Option의 개별 onChange 호출
+    onOptionChange?.(value, e);
+  };
+
+  // FormControl ID 생성 (접근성)
+  const formControlId = name ? `${name}-${value}` : String(value);
+  return /*#__PURE__*/jsxs(FormControl, {
+    id: formControlId,
+    disabled: disabled,
+    required: required,
+    children: [/*#__PURE__*/jsx(Checkbox, {
+      ref: ref,
+      name: name,
+      value: String(value) // HTML input value는 string
+      ,
+      checked: checked,
+      onChange: handleChange,
+      "aria-label": typeof displayLabel === 'string' ? displayLabel : undefined,
+      ...checkboxProps
+    }), displayLabel && /*#__PURE__*/jsx(FormControl.Label, {
+      children: displayLabel
+    })]
+  });
+};
+var CheckboxGroupOption$1 = /*#__PURE__*/forwardRef(CheckboxGroupOption);
+
+export { CheckboxGroupOption$1 as default };

package/esm/core/CheckboxGroup/index.js

@@ -0,0 +1,54 @@
+import { Children } from 'react';
+import { createSafeContext } from '../../utils/createSafeContext.js';
+import Grid from '../Grid/index.js';
+import CheckboxGroupOption from './CheckboxGroupOption.js';
+import { jsx } from 'react/jsx-runtime';
+
+const [CheckboxGroupContextProvider, useCheckboxGroupContext] = createSafeContext({
+  errorMessage: 'CheckboxGroupContext 안에서 사용해야 합니다.'
+});
+const CheckboxGroup = ({
+  children,
+  name,
+  required = true,
+  disabled = false,
+  value,
+  onChange,
+  renderContainer = children => /*#__PURE__*/jsx(Grid, {
+    gapX: 3,
+    gapY: 3,
+    children: children
+  }),
+  renderItemWrapper = (children, i) => /*#__PURE__*/jsx(Grid.Unit, {
+    size: 1,
+    children: children
+  }, i),
+  ...ariaProps
+}) => {
+  // Children을 배열로 변환하여 renderItemWrapper 적용
+  const wrappedChildren = Children.toArray(children).map((child, index) => renderItemWrapper(child, index));
+  return /*#__PURE__*/jsx(CheckboxGroupContextProvider, {
+    value: {
+      name,
+      required,
+      disabled,
+      value,
+      onChange
+    },
+    children: /*#__PURE__*/jsx("fieldset", {
+      role: 'group',
+      ...ariaProps,
+      style: {
+        border: 'none',
+        padding: 0,
+        margin: 0
+      },
+      children: renderContainer(wrappedChildren)
+    })
+  });
+};
+var CheckboxGroup$1 = Object.assign(CheckboxGroup, {
+  Option: CheckboxGroupOption
+});
+
+export { CheckboxGroup$1 as default, useCheckboxGroupContext };

package/esm/core/CheckboxOrRadioGroupFormControl/CheckboxOrRadioGroupFormControlCaption.js

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

package/esm/core/CheckboxOrRadioGroupFormControl/CheckboxOrRadioGroupFormControlErrorMessage.js

@@ -0,0 +1,34 @@
+import { useContext } from 'react';
+import styled, { keyframes } from 'styled-components';
+import Text from '../Text/index.js';
+import { CheckboxOrRadioGroupFormControlContext } from './index.js';
+import { jsx } from 'react/jsx-runtime';
+
+const CheckboxOrRadioGroupFormControlErrorMessage = ({
+  children
+}) => {
+  const {
+    id
+  } = useContext(CheckboxOrRadioGroupFormControlContext);
+  return /*#__PURE__*/jsx(StyledText, {
+    id: id,
+    typography: 'xxs',
+    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 { CheckboxOrRadioGroupFormControlErrorMessage as default };

package/esm/core/CheckboxOrRadioGroupFormControl/CheckboxOrRadioGroupFormControlLabel.js

@@ -0,0 +1,92 @@
+import { sx } from '@teamturing/react-kit';
+import { forcePixelValue } from '@teamturing/utils';
+import { useContext } from 'react';
+import styled from 'styled-components';
+import View from '../View/index.js';
+import { CheckboxOrRadioGroupFormControlContext } from './index.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+const CheckboxOrRadioGroupFormControlLabel = ({
+  children,
+  visuallyHidden,
+  ...props
+}) => {
+  const {
+    id,
+    disabled,
+    required
+  } = useContext(CheckboxOrRadioGroupFormControlContext);
+  return /*#__PURE__*/jsx(VisuallyHidden, {
+    as: 'label',
+    htmlFor: id,
+    sx: {
+      width: 'fit-content',
+      display: 'contents'
+    },
+    isVisible: !visuallyHidden,
+    children: /*#__PURE__*/jsxs(LabelWrapper, {
+      ...props,
+      disabled: disabled,
+      children: [children, typeof required === 'boolean' && required === false ? /*#__PURE__*/jsx(View, {
+        as: 'span',
+        className: 'checkbox_or_radio_group_form_control_label__required__false',
+        "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: inline-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'};
+
+  span.checkbox_or_radio_group_form_control_label__required__false {
+    font-size: inherit;
+    font-weight: inherit;
+    color: ${({
+  theme
+}) => theme.colors['text/neutral/subtlest']};
+  }
+
+  ${sx};
+`;
+
+export { CheckboxOrRadioGroupFormControlLabel as default };

package/esm/core/CheckboxOrRadioGroupFormControl/CheckboxOrRadioGroupFormControlSuccessMessage.js

@@ -0,0 +1,34 @@
+import { useContext } from 'react';
+import styled, { keyframes } from 'styled-components';
+import Text from '../Text/index.js';
+import { CheckboxOrRadioGroupFormControlContext } from './index.js';
+import { jsx } from 'react/jsx-runtime';
+
+const CheckboxOrRadioGroupFormControlSuccessMessage = ({
+  children
+}) => {
+  const {
+    id
+  } = useContext(CheckboxOrRadioGroupFormControlContext);
+  return /*#__PURE__*/jsx(StyledText, {
+    id: id,
+    typography: 'xxs',
+    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 { CheckboxOrRadioGroupFormControlSuccessMessage as default };

package/esm/core/CheckboxOrRadioGroupFormControl/CheckboxOrRadioGroupFormControlTooltipIcon.js

@@ -0,0 +1,25 @@
+import { InfoInCircleIcon } from '@teamturing/icons';
+import StyledIcon from '../StyledIcon/index.js';
+import Tooltip from '../Tooltip/index.js';
+import { jsx } from 'react/jsx-runtime';
+
+const CheckboxOrRadioGroupFormControlTooltipIcon = ({
+  text,
+  direction,
+  icon = InfoInCircleIcon,
+  size = 16,
+  color = 'icon/neutral',
+  ...props
+}) => /*#__PURE__*/jsx(Tooltip, {
+  text: text,
+  direction: direction,
+  mouseOnly: false,
+  children: /*#__PURE__*/jsx(StyledIcon, {
+    icon: icon,
+    size: size,
+    color: color,
+    ...props
+  })
+});
+
+export { CheckboxOrRadioGroupFormControlTooltipIcon as default };

package/esm/core/CheckboxOrRadioGroupFormControl/index.js

@@ -0,0 +1,98 @@
+import { useRelocation } from '@teamturing/react-kit';
+import { forwardRef, createContext, isValidElement, cloneElement } from 'react';
+import CheckboxGroup from '../CheckboxGroup/index.js';
+import RadioGroup from '../RadioGroup/index.js';
+import View from '../View/index.js';
+import CheckboxOrRadioGroupFormControlCaption from './CheckboxOrRadioGroupFormControlCaption.js';
+import CheckboxOrRadioGroupFormControlErrorMessage from './CheckboxOrRadioGroupFormControlErrorMessage.js';
+import CheckboxOrRadioGroupFormControlLabel from './CheckboxOrRadioGroupFormControlLabel.js';
+import CheckboxOrRadioGroupFormControlSuccessMessage from './CheckboxOrRadioGroupFormControlSuccessMessage.js';
+import CheckboxOrRadioGroupFormControlTooltipIcon from './CheckboxOrRadioGroupFormControlTooltipIcon.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+const CheckboxOrRadioGroupFormControlContext = /*#__PURE__*/createContext({});
+
+/**
+ * RadioGroup 및 CheckboxGroup을 위한 FormControl
+ * bombe의 FormControl과 동일한 구조이지만, 그룹 컴포넌트에 특화되어 있습니다.
+ *
+ * @example
+ * ```tsx
+ * <CheckboxOrRadioGroupFormControl id="choice" required>
+ *   <CheckboxOrRadioGroupFormControl.Label>Choose one</CheckboxOrRadioGroupFormControl.Label>
+ *   <CheckboxOrRadioGroupFormControl.TooltipIcon text="Help text" />
+ *   <CheckboxOrRadioGroupFormControl.Caption>Select your preference</CheckboxOrRadioGroupFormControl.Caption>
+ *
+ *   <RadioGroup name="choice" value={value} onChange={onChange}>
+ *     <RadioGroup.Option value="a" label="Option A" />
+ *     <RadioGroup.Option value="b" label="Option B" />
+ *   </RadioGroup>
+ *
+ *   <CheckboxOrRadioGroupFormControl.ErrorMessage>Error message</CheckboxOrRadioGroupFormControl.ErrorMessage>
+ * </CheckboxOrRadioGroupFormControl>
+ * ```
+ */
+const CheckboxOrRadioGroupFormControl = ({
+  children: propChildren,
+  id,
+  disabled,
+  required = true,
+  sx,
+  ...props
+}, ref) => {
+  const [relocatableComponentsObject, restComponents] = useRelocation({
+    children: propChildren,
+    config: {
+      label: CheckboxOrRadioGroupFormControlLabel,
+      caption: CheckboxOrRadioGroupFormControlCaption,
+      errorMessage: CheckboxOrRadioGroupFormControlErrorMessage,
+      successMessage: CheckboxOrRadioGroupFormControlSuccessMessage,
+      tooltipIcon: CheckboxOrRadioGroupFormControlTooltipIcon
+    }
+  });
+  const groupInputComponentCandidates = [RadioGroup, CheckboxGroup];
+  const GroupInputComponent = restComponents.find(component => groupInputComponentCandidates.some(candidate => /*#__PURE__*/isValidElement(component) && component.type === candidate));
+  return /*#__PURE__*/jsx(CheckboxOrRadioGroupFormControlContext.Provider, {
+    value: {
+      id,
+      disabled,
+      required
+    },
+    children: /*#__PURE__*/jsxs(View, {
+      ref: ref,
+      display: 'flex',
+      flexDirection: 'column',
+      sx: {
+        '& .checkbox_or_radio_group_form_control__label_wrapper': {
+          mb: relocatableComponentsObject.label?.props.visuallyHidden ? 0 : relocatableComponentsObject.caption ? 0.5 : 3
+        },
+        '& > span': {
+          mb: 3
+        },
+        ...sx
+      },
+      ...props,
+      children: [/*#__PURE__*/jsxs(View, {
+        className: 'checkbox_or_radio_group_form_control__label_wrapper',
+        display: 'flex',
+        alignItems: 'center',
+        sx: {
+          columnGap: 1
+        },
+        children: [relocatableComponentsObject.label, relocatableComponentsObject.tooltipIcon]
+      }), relocatableComponentsObject.caption, relocatableComponentsObject.errorMessage, relocatableComponentsObject.successMessage, /*#__PURE__*/cloneElement(GroupInputComponent, {
+        id,
+        disabled
+      })]
+    })
+  });
+};
+var index = Object.assign( /*#__PURE__*/forwardRef(CheckboxOrRadioGroupFormControl), {
+  Label: CheckboxOrRadioGroupFormControlLabel,
+  Caption: CheckboxOrRadioGroupFormControlCaption,
+  ErrorMessage: CheckboxOrRadioGroupFormControlErrorMessage,
+  SuccessMessage: CheckboxOrRadioGroupFormControlSuccessMessage,
+  TooltipIcon: CheckboxOrRadioGroupFormControlTooltipIcon
+});
+
+export { CheckboxOrRadioGroupFormControlContext, index as default };

package/esm/core/FormControl/index.js

@@ -103,7 +103,7 @@ const FormControl = ({
     })
   });
 };
-var index = Object.assign( /*#__PURE__*/forwardRef(FormControl), {
+var FormControl$1 = Object.assign( /*#__PURE__*/forwardRef(FormControl), {
   Label: FormControlLabel,
   Caption: FormControlCaption,
   ErrorMessage: FormControlErrorMessage,
@@ -111,4 +111,4 @@ var index = Object.assign( /*#__PURE__*/forwardRef(FormControl), {
   TooltipIcon: FormControlTooltipIcon
 });
 
-export { FormControlContext, index as default };
+export { FormControlContext, FormControl$1 as default };

package/esm/core/RadioGroup/RadioGroupOption.js

@@ -0,0 +1,54 @@
+import { forwardRef } from 'react';
+import FormControl from '../FormControl/index.js';
+import Radio from '../Radio/index.js';
+import { useRadioGroupContext } from './index.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const RadioGroupOption = ({
+  value,
+  label,
+  disabled: optionDisabled,
+  onChange: onOptionChange,
+  children,
+  ...radioProps
+}, ref) => {
+  const {
+    name,
+    value: groupValue,
+    onChange: onGroupChange,
+    disabled: groupDisabled,
+    required
+  } = useRadioGroupContext();
+  const checked = groupValue === value;
+  const disabled = groupDisabled || optionDisabled;
+  const displayLabel = children || label;
+  const handleChange = e => {
+    // RadioGroup의 onChange 호출
+    onGroupChange?.(e);
+    // Option의 개별 onChange 호출
+    onOptionChange?.(value, e);
+  };
+
+  // FormControl ID 생성 (접근성)
+  const formControlId = name ? `${name}-${value}` : String(value);
+  return /*#__PURE__*/jsxs(FormControl, {
+    id: formControlId,
+    disabled: disabled,
+    required: required,
+    children: [/*#__PURE__*/jsx(Radio, {
+      ref: ref,
+      name: name,
+      value: String(value) // HTML input value는 string
+      ,
+      checked: checked,
+      onChange: handleChange,
+      "aria-label": typeof displayLabel === 'string' ? displayLabel : undefined,
+      ...radioProps
+    }), displayLabel && /*#__PURE__*/jsx(FormControl.Label, {
+      children: displayLabel
+    })]
+  });
+};
+var RadioGroupOption$1 = /*#__PURE__*/forwardRef(RadioGroupOption);
+
+export { RadioGroupOption$1 as default };

package/esm/core/RadioGroup/index.js

@@ -0,0 +1,54 @@
+import { Children } from 'react';
+import { createSafeContext } from '../../utils/createSafeContext.js';
+import Grid from '../Grid/index.js';
+import RadioGroupOption from './RadioGroupOption.js';
+import { jsx } from 'react/jsx-runtime';
+
+const [RadioGroupContextProvider, useRadioGroupContext] = createSafeContext({
+  errorMessage: 'RadioGroupContext 안에서 사용해야 합니다.'
+});
+const RadioGroup = ({
+  children,
+  name,
+  required = true,
+  disabled = false,
+  value,
+  onChange,
+  renderContainer = children => /*#__PURE__*/jsx(Grid, {
+    gapX: 3,
+    gapY: 3,
+    children: children
+  }),
+  renderItemWrapper = (children, i) => /*#__PURE__*/jsx(Grid.Unit, {
+    size: 1,
+    children: children
+  }, i),
+  ...ariaProps
+}) => {
+  // Children을 배열로 변환하여 renderItemWrapper 적용
+  const wrappedChildren = Children.toArray(children).map((child, index) => renderItemWrapper(child, index));
+  return /*#__PURE__*/jsx(RadioGroupContextProvider, {
+    value: {
+      name,
+      required,
+      disabled,
+      value,
+      onChange
+    },
+    children: /*#__PURE__*/jsx("fieldset", {
+      role: 'radiogroup',
+      ...ariaProps,
+      style: {
+        border: 'none',
+        padding: 0,
+        margin: 0
+      },
+      children: renderContainer(wrappedChildren)
+    })
+  });
+};
+var RadioGroup$1 = Object.assign(RadioGroup, {
+  Option: RadioGroupOption
+});
+
+export { RadioGroup$1 as default, useRadioGroupContext };

package/esm/core/Spinner/index.js

@@ -1,5 +1,7 @@
-import { ProgressGradientIcon } from '@teamturing/icons';
-import styled, { keyframes } from 'styled-components';
+import { ProgressGradientIcon, ProgressLineIcon } from '@teamturing/icons';
+import { forwardRef } from 'react';
+import styled, { keyframes, useTheme } from 'styled-components';
+import { jsx } from 'react/jsx-runtime';
 
 const spin = keyframes`
   from {
@@ -9,15 +11,36 @@ const spin = keyframes`
     transform: rotate(360deg);
   }
 `;
-const Spinner = styled(ProgressGradientIcon)`
+const ProgressGradientSpinner = styled(ProgressGradientIcon)`
   color: ${({
   theme
 }) => theme.colors['icon/neutral']};
   animation: ${spin} 1000ms infinite steps(8, end);
 `;
-Spinner.defaultProps = {
-  width: 32,
-  height: 32
-};
+const ProgressLineSpinner = styled(ProgressLineIcon)`
+  color: ${({
+  theme
+}) => theme.colors['icon/neutral']};
+  animation: ${spin} 1000ms infinite linear;
+`;
+const Spinner = /*#__PURE__*/forwardRef(({
+  variant: propsVariant,
+  width = 32,
+  height = 32,
+  ...props
+}, ref) => {
+  const theme = useTheme();
+  const variant = propsVariant ?? theme.components?.spinner?.defaultVariant ?? 'progress-gradient';
+  const SpinnerComponent = {
+    'progress-gradient': ProgressGradientSpinner,
+    'progress-line': ProgressLineSpinner
+  }[variant];
+  return /*#__PURE__*/jsx(SpinnerComponent, {
+    ref: ref,
+    width: width,
+    height: height,
+    ...props
+  });
+});
 
 export { Spinner as default };

package/esm/index.js

@@ -8,6 +8,8 @@ export { default as Breadcrumbs } from './core/Breadcrumbs/index.js';
 export { default as Button } from './core/Button/index.js';
 export { default as Card } from './core/Card/index.js';
 export { default as Checkbox } from './core/Checkbox/index.js';
+export { default as CheckboxGroup } from './core/CheckboxGroup/index.js';
+export { default as CheckboxOrRadioGroupFormControl } from './core/CheckboxOrRadioGroupFormControl/index.js';
 export { default as Chip } from './core/Chip/index.js';
 export { default as ClickArea } from './core/ClickArea/index.js';
 export { default as CounterBadge } from './core/CounterBadge/index.js';
@@ -32,6 +34,7 @@ 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 RadioGroup } from './core/RadioGroup/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';