@bigtablet/design-system 2.0.7 → 2.1.0

package/dist/index.css

@@ -1205,6 +1205,70 @@
   pointer-events: none;
 }
 
+/* src/ui/otp-input/style.scss */
+@keyframes skeleton_loading {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
+.otp_input {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.otp_input_boxes {
+  display: flex;
+  gap: 6px;
+}
+.otp_input_box {
+  width: 48px;
+  min-height: 56px;
+  padding: 4px;
+  border: 1px solid #E5E5E5;
+  border-radius: 12px;
+  background: none;
+  font-family: "Pretendard", sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  color: #121212;
+  text-align: center;
+  outline: none;
+  transition: border-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
+}
+.otp_input_box:hover:not(:disabled):not(:focus) {
+  border-color: #B3B3B3;
+}
+.otp_input_box:focus {
+  border-color: #121212;
+  border-width: 2px;
+  padding: calc(4px - 1px);
+}
+.otp_input_box_disabled {
+  cursor: not-allowed;
+  color: #666666;
+}
+.otp_input_box_error {
+  border-color: #EF4444;
+}
+.otp_input_box_error:focus {
+  border-color: #EF4444;
+}
+.otp_input_supporting {
+  padding-top: 4px;
+  font-family: "Pretendard", sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  color: #666666;
+}
+.otp_input_supporting_error {
+  color: #EF4444;
+}
+
 /* src/ui/modal/style.scss */
 @keyframes skeleton_loading {
   0% {

package/dist/index.d.ts

@@ -748,6 +748,37 @@ interface ListItemProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "on
  */
 declare const ListItem: ({ overline, label, supportingText, metadata, leadingElement, trailingElement, alignment, disabled, onClick, className, ...props }: ListItemProps) => react_jsx_runtime.JSX.Element;
 
+interface OtpInputProps {
+    /** OTP 자릿수 (기본값: 6) */
+    length?: 4 | 6;
+    /** 제어형 값 */
+    value?: string;
+    /** 값 변경 콜백 */
+    onChange?: (value: string) => void;
+    /** 에러 상태 */
+    error?: boolean;
+    /** 비활성화 */
+    disabled?: boolean;
+    /** 하단 도움말 텍스트 */
+    supportingText?: string;
+    /** 첫 번째 입력에 자동 포커스 */
+    autoFocus?: boolean;
+    /** 접근성 레이블 */
+    ariaLabel?: string;
+    /** 추가 className */
+    className?: string;
+}
+/**
+ * OTP 입력 컴포넌트를 렌더링한다.
+ * 각 자리를 개별 입력으로 분리하고, 자동 포커스 이동·붙여넣기를 지원한다.
+ * @param props OTP 입력 속성
+ * @returns 렌더링된 OTP 입력 요소
+ */
+declare const OtpInput: {
+    ({ length, value, onChange, error, disabled, supportingText, autoFocus, ariaLabel, className, }: OtpInputProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
 interface ModalProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title"> {
     /** 모달 열림 여부 */
     open: boolean;
@@ -986,4 +1017,4 @@ interface TopLoadingProps {
  */
 declare const TopLoading: ({ progress, color, height, isLoading, ariaLabel, }: TopLoadingProps) => react_jsx_runtime.JSX.Element | null;
 
-export { AlertProvider, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipType, DatePicker, type DatePickerProps, Divider, type DividerProps, FAB, type FABProps, type FABVariant, FileInput, type FileInputProps, Icon, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconName, type IconProps, type IconWeight, LinearProgress, type LinearProgressProps, ListItem, type ListItemProps, Modal, type ModalProps, Pagination, type PaginationProps, Radio, type RadioProps, Select, type SelectOption, type SelectProps, Spinner, type SpinnerProps, TextField, type TextFieldProps, ToastProvider, Toggle, type ToggleProps, TopLoading, type TopLoadingProps, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, colors, elevation, motion, opacity, radius, skeleton, spacing, typography, useAlert, useToast, zIndex };
+export { AlertProvider, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipType, DatePicker, type DatePickerProps, Divider, type DividerProps, FAB, type FABProps, type FABVariant, FileInput, type FileInputProps, Icon, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconName, type IconProps, type IconWeight, LinearProgress, type LinearProgressProps, ListItem, type ListItemProps, Modal, type ModalProps, OtpInput, type OtpInputProps, Pagination, type PaginationProps, Radio, type RadioProps, Select, type SelectOption, type SelectProps, Spinner, type SpinnerProps, TextField, type TextFieldProps, ToastProvider, Toggle, type ToggleProps, TopLoading, type TopLoadingProps, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, colors, elevation, motion, opacity, radius, skeleton, spacing, typography, useAlert, useToast, zIndex };

package/dist/index.js

@@ -1756,6 +1756,105 @@ var ListItem = ({
     }
   );
 };
+var OtpInput = ({
+  length = 6,
+  value = "",
+  onChange,
+  error = false,
+  disabled = false,
+  supportingText,
+  autoFocus = false,
+  ariaLabel = "OTP \uC785\uB825",
+  className
+}) => {
+  const inputsRef = React5.useRef([]);
+  const digits = React5.useMemo(() => {
+    const arr = value.split("").slice(0, length);
+    while (arr.length < length) arr.push("");
+    return arr;
+  }, [value, length]);
+  const focusInput = (index) => {
+    inputsRef.current[index]?.focus();
+  };
+  const updateValue = (newDigits) => {
+    onChange?.(newDigits.join(""));
+  };
+  const handleChange = (index, e) => {
+    const val = e.target.value;
+    if (val && !/^\d$/.test(val)) return;
+    const newDigits = [...digits];
+    newDigits[index] = val;
+    updateValue(newDigits);
+    if (val && index < length - 1) {
+      focusInput(index + 1);
+    }
+  };
+  const handleKeyDown = (index, e) => {
+    if (e.key === "Backspace") {
+      if (digits[index]) {
+        const newDigits = [...digits];
+        newDigits[index] = "";
+        updateValue(newDigits);
+      } else if (index > 0) {
+        focusInput(index - 1);
+        const newDigits = [...digits];
+        newDigits[index - 1] = "";
+        updateValue(newDigits);
+      }
+      e.preventDefault();
+    }
+    if (e.key === "ArrowLeft" && index > 0) {
+      focusInput(index - 1);
+      e.preventDefault();
+    }
+    if (e.key === "ArrowRight" && index < length - 1) {
+      focusInput(index + 1);
+      e.preventDefault();
+    }
+  };
+  const handlePaste = (e) => {
+    e.preventDefault();
+    const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, length);
+    if (!pasted) return;
+    const newDigits = [...digits];
+    for (let i = 0; i < pasted.length; i++) {
+      newDigits[i] = pasted[i];
+    }
+    updateValue(newDigits);
+    const nextIndex = Math.min(pasted.length, length - 1);
+    focusInput(nextIndex);
+  };
+  const rootClassName = cn("otp_input", className);
+  return /* @__PURE__ */ jsxs("div", { className: rootClassName, role: "group", "aria-label": ariaLabel, children: [
+    /* @__PURE__ */ jsx("div", { className: "otp_input_boxes", children: digits.map((digit, i) => /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: (el) => {
+          inputsRef.current[i] = el;
+        },
+        type: "text",
+        inputMode: "numeric",
+        pattern: "\\d*",
+        maxLength: 1,
+        value: digit,
+        onChange: (e) => handleChange(i, e),
+        onKeyDown: (e) => handleKeyDown(i, e),
+        onPaste: i === 0 ? handlePaste : void 0,
+        disabled,
+        autoFocus: autoFocus && i === 0,
+        "aria-label": `${i + 1}\uBC88\uC9F8 \uC790\uB9AC`,
+        className: cn(
+          "otp_input_box",
+          error && "otp_input_box_error",
+          disabled && "otp_input_box_disabled"
+        )
+      },
+      i
+    )) }),
+    supportingText && /* @__PURE__ */ jsx("span", { className: cn("otp_input_supporting", error && "otp_input_supporting_error"), children: supportingText })
+  ] });
+};
+OtpInput.displayName = "OtpInput";
 var Modal = ({
   open,
   onClose,
@@ -2415,4 +2514,4 @@ var TopLoading = ({
   );
 };
 
-export { AlertProvider, Button, Card, Checkbox, Chip, DatePicker, Divider, FAB, FileInput, Icon, IconButton, LinearProgress, ListItem, Modal, Pagination, Radio, Select, Spinner, TextField, ToastProvider, Toggle, TopLoading, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, colors, elevation, motion, opacity, radius, skeleton, spacing, typography, useAlert, useToast, zIndex };
+export { AlertProvider, Button, Card, Checkbox, Chip, DatePicker, Divider, FAB, FileInput, Icon, IconButton, LinearProgress, ListItem, Modal, OtpInput, Pagination, Radio, Select, Spinner, TextField, ToastProvider, Toggle, TopLoading, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, colors, elevation, motion, opacity, radius, skeleton, spacing, typography, useAlert, useToast, zIndex };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bigtablet/design-system",
-	"version": "2.0.7",
+	"version": "2.1.0",
 	"description": "Bigtablet Design System UI Components",
 	"type": "module",
 	"types": "dist/index.d.ts",