@bigtablet/design-system 2.0.0 → 2.0.2

package/dist/index.css

@@ -27,7 +27,10 @@
 }
 .alert_overlay {
   position: fixed;
-  inset: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   background: rgba(0, 0, 0, 0.5);
   display: flex;
   align-items: center;
@@ -190,7 +193,10 @@
 .button::before {
   content: "";
   position: absolute;
-  inset: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   border-radius: inherit;
   transition: background 0.2s ease-in-out;
   pointer-events: none;
@@ -449,7 +455,7 @@
 .checkbox_input:disabled {
   cursor: not-allowed;
 }
-.checkbox:has(.checkbox_input:disabled) {
+.checkbox_disabled {
   cursor: not-allowed;
 }
 .checkbox_input:checked ~ .checkbox_state_layer .checkbox_icon,
@@ -509,13 +515,14 @@
   transition: border-color 0.2s ease-in-out;
 }
 .chip_content {
+  flex: 1;
   display: inline-flex;
   align-items: center;
   gap: 4px;
   border: none;
   background: transparent;
   cursor: pointer;
-  padding: 6px 12px;
+  padding: 6px 12px 6px 16px;
   font-size: 14px;
   font-weight: 500;
   line-height: 20px;
@@ -527,7 +534,10 @@
 .chip_content::before {
   content: "";
   position: absolute;
-  inset: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   border-radius: inherit;
   transition: background 0.2s ease-in-out;
   pointer-events: none;
@@ -559,24 +569,11 @@
   cursor: pointer;
   padding: 6px 8px 6px 0;
   color: #121212;
-  position: relative;
-  overflow: hidden;
-}
-.chip_trailing::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  transition: background 0.2s ease-in-out;
-  pointer-events: none;
 }
-.chip_trailing:hover:not(:disabled)::before {
-  background: rgba(0, 0, 0, 0.05);
-}
-.chip_trailing:focus-visible:not(:disabled)::before {
+.chip_trailing:focus-visible:not(:disabled) .chip_icon {
   background: rgba(0, 0, 0, 0.08);
 }
-.chip_trailing:active:not(:disabled)::before {
+.chip_trailing:active:not(:disabled) .chip_icon {
   background: rgba(26, 26, 26, 0.12);
 }
 .chip_trailing:disabled {
@@ -584,14 +581,21 @@
 }
 .chip_icon {
   display: inline-flex;
+  align-items: center;
+  justify-content: center;
   width: 20px;
   height: 20px;
   flex-shrink: 0;
+  border-radius: 9999px;
+  transition: background 0.2s ease-in-out;
 }
 .chip_icon svg {
   width: 100%;
   height: 100%;
 }
+.chip_trailing:hover:not(:disabled) .chip_icon {
+  background: rgba(0, 0, 0, 0.05);
+}
 .chip_label {
   white-space: nowrap;
 }
@@ -767,7 +771,10 @@
 .fab::before {
   content: "";
   position: absolute;
-  inset: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   border-radius: inherit;
   transition: background 0.2s ease-in-out;
   pointer-events: none;
@@ -846,7 +853,10 @@
 }
 .file_input_control {
   position: absolute;
-  inset: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   opacity: 0;
   cursor: pointer;
 }
@@ -933,7 +943,10 @@
 .icon_button::before {
   content: "";
   position: absolute;
-  inset: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   border-radius: inherit;
   transition: background 0.2s ease-in-out;
   pointer-events: none;
@@ -1091,6 +1104,7 @@
   align-items: flex-start;
   min-height: 52px;
   padding-left: 16px;
+  padding-right: 16px;
   position: relative;
 }
 .list_item_align_middle > .list_item_state_layer {
@@ -1102,7 +1116,10 @@
 .list_item_interactive .list_item_state_layer::before {
   content: "";
   position: absolute;
-  inset: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   transition: background 0.2s ease-in-out;
   pointer-events: none;
 }
@@ -1182,7 +1199,10 @@
 }
 .modal {
   position: fixed;
-  inset: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   display: grid;
   place-items: center;
   background: rgba(0, 0, 0, 0.5);
@@ -1382,7 +1402,7 @@
 .radio_input:disabled ~ .radio_label {
   opacity: 0.38;
 }
-.radio:has(.radio_input:disabled) {
+.radio_disabled {
   cursor: not-allowed;
 }
 .radio_input:checked ~ .radio_state_layer .radio_dot {
@@ -1393,12 +1413,20 @@
   position: absolute;
   left: 50%;
   top: 50%;
-  width: 60%;
-  height: 60%;
+  width: 8px;
+  height: 8px;
   transform: translate(-50%, -50%);
   background: #121212;
   border-radius: 9999px;
 }
+.radio_size_md .radio_input:checked ~ .radio_state_layer .radio_dot::after {
+  width: 10px;
+  height: 10px;
+}
+.radio_size_lg .radio_input:checked ~ .radio_state_layer .radio_dot::after {
+  width: 10px;
+  height: 10px;
+}
 
 /* src/ui/select/style.scss */
 @keyframes skeleton_loading {
@@ -1615,7 +1643,7 @@
   border-radius: 9999px;
   border: 2px solid #E5E5E5;
   border-top-color: #121212;
-  animation: spinner_spin 0.6s cubic-bezier(0.25, 1, 0.5, 1) linear infinite;
+  animation: spinner_spin 0.8s linear infinite;
 }
 
 /* src/ui/switch/style.scss */
@@ -1791,7 +1819,7 @@
 .text_field_icon + .text_field_input_wrap {
   padding-left: 0;
 }
-.text_field_input_wrap:has(+ .text_field_icon) {
+.text_field_input_wrap_no_pad_right {
   padding-right: 0;
 }
 .text_field_input {
@@ -1826,6 +1854,29 @@
   width: 20px;
   height: 20px;
 }
+.text_field_clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: #888888;
+  border-radius: 9999px;
+  transition: color 0.2s ease-in-out, background 0.2s ease-in-out;
+  padding: 0;
+}
+.text_field_clear:hover {
+  color: #121212;
+  background: rgba(0, 0, 0, 0.05);
+}
+.text_field_clear:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.15);
+}
 .text_field_helper {
   padding: 4px 16px 0;
   font-family: "Pretendard", sans-serif;
@@ -1979,7 +2030,7 @@
 }
 .toast_icon {
   flex-shrink: 0;
-  margin-top: 1px;
+  margin-top: 3px;
   display: flex;
 }
 .toast_icon_success {

package/dist/index.d.ts

@@ -548,12 +548,14 @@ interface ChipProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onClic
     removable?: boolean;
     /** 비활성화 상태 */
     disabled?: boolean;
+    /** 팝업 열림 상태 (filter 타입에서 aria-expanded로 사용) */
+    open?: boolean;
     /** 칩 클릭 시 콜백 */
     onClick?: (event: React$1.MouseEvent<HTMLButtonElement>) => void;
     /** 삭제 버튼 클릭 시 콜백 */
     onRemove?: () => void;
 }
-declare const Chip: ({ type, label, selected, removable, disabled, onClick, onRemove, className, ...props }: ChipProps) => react_jsx_runtime.JSX.Element;
+declare const Chip: ({ type, label, selected, removable, disabled, open, onClick, onRemove, className, ...props }: ChipProps) => react_jsx_runtime.JSX.Element;
 
 type DatePickerMode = "year-month" | "year-month-day";
 type SelectableRange = "all" | "until-today";
@@ -653,6 +655,36 @@ interface FileInputProps extends React$1.InputHTMLAttributes<HTMLInputElement> {
  */
 declare const FileInput: ({ label, onFiles, supportingText, preview, className, disabled, ...props }: FileInputProps) => react_jsx_runtime.JSX.Element;
 
+/**
+ * ⚠️  AUTO-GENERATED — DO NOT EDIT MANUALLY
+ * Run `node scripts/generate-icons.mjs` to regenerate.
+ *
+ * Source: @material-symbols/svg-300, @material-symbols/svg-400 (outlined)
+ * Icons: 57 icons × 4 variants (weight 300/400 × fill/no-fill)
+ * ViewBox: "0 -960 960 960" (Material Symbols standard)
+ */
+type IconName = "add_a_photo" | "add_circle" | "add_lg" | "add_md" | "apartment" | "arrow_back" | "calendar_today" | "check" | "check_box" | "check_circle" | "close" | "close_small" | "cloud_download" | "cloud_upload" | "content_copy" | "delete_forever" | "edit" | "edit_note" | "error" | "event" | "fiber_manual_record" | "forward_5" | "group" | "groups" | "help" | "id" | "id_card" | "image" | "indeterminate_check_box" | "info" | "keyboard_arrow_down" | "keyboard_arrow_left" | "keyboard_arrow_right" | "keyboard_arrow_up" | "location_on" | "login" | "logout" | "more_vert" | "open_in_browser" | "open_in_new" | "pause" | "person" | "photo_camera" | "photo_library" | "play_arrow" | "replay_5" | "search" | "settings" | "share" | "speed_1_2x" | "speed_1_5x" | "speed_1_7x" | "speed_1x" | "speed_2x" | "stop" | "visibility" | "visibility_off";
+type IconWeight = 300 | 400;
+
+interface IconProps extends Omit<React$1.SVGProps<SVGSVGElement>, "fill"> {
+    /** 아이콘 이름 */
+    name: IconName;
+    /** 아이콘 크기 (px, 기본값: 24) */
+    size?: 20 | 24;
+    /** 선의 굵기 (기본값: 400) */
+    weight?: IconWeight;
+    /** 채움 스타일 여부 (기본값: false) */
+    fill?: boolean;
+}
+/**
+ * Material Symbols 기반 인라인 SVG 아이콘 컴포넌트.
+ * weight(300/400) × fill(true/false) × size(20/24) 조합을 지원한다.
+ */
+declare const Icon: {
+    ({ name, size, weight, fill, style, ...props }: IconProps): react_jsx_runtime.JSX.Element | null;
+    displayName: string;
+};
+
 type IconButtonVariant = "standard" | "filled" | "tonal" | "outlined";
 type IconButtonSize = "sm" | "md";
 interface IconButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -873,6 +905,8 @@ interface TextFieldProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEleme
     leadingIcon?: React$1.ReactNode;
     /** 입력 필드 오른쪽에 표시할 아이콘 */
     trailingIcon?: React$1.ReactNode;
+    /** 값이 있을 때 오른쪽에 지우기(X) 버튼 표시 여부 */
+    clearable?: boolean;
     /** 컨테이너 전체 너비 차지 여부 */
     fullWidth?: boolean;
     /** 값 변경 시 호출되는 콜백 (IME 조합 완료 후 실행) */
@@ -893,7 +927,7 @@ interface TextFieldProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEleme
  * @returns 렌더링된 텍스트 필드 UI
  */
 declare const TextField: {
-    ({ id, label, showLabel, supportingText, error, leadingIcon, trailingIcon, fullWidth, className, onChangeAction, value, defaultValue, transformValue, ref, ...props }: TextFieldProps): react_jsx_runtime.JSX.Element;
+    ({ id, label, showLabel, supportingText, error, leadingIcon, trailingIcon, clearable, fullWidth, className, onChangeAction, value, defaultValue, transformValue, ref, ...props }: TextFieldProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -951,4 +985,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, Divider, type DividerProps, FAB, type FABProps, type FABVariant, FileInput, type FileInputProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, LinearProgress, type LinearProgressProps, ListItem, type ListItemProps, Modal, type ModalProps, Pagination, type PaginationProps, Radio, type RadioProps, Select, type SelectOption, type SelectProps, Spinner, type SpinnerProps, Switch, type SwitchProps, TextField, type TextFieldProps, ToastProvider, 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, Pagination, type PaginationProps, Radio, type RadioProps, Select, type SelectOption, type SelectProps, Spinner, type SpinnerProps, Switch, type SwitchProps, TextField, type TextFieldProps, ToastProvider, TopLoading, type TopLoadingProps, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, colors, elevation, motion, opacity, radius, skeleton, spacing, typography, useAlert, useToast, zIndex };