@uniai-fe/uds-primitives 0.1.13 → 0.2.0

package/src/components/input/types/text.ts

@@ -0,0 +1,203 @@
+import type { ComponentPropsWithoutRef, MouseEvent, ReactNode } from "react";
+import type { ButtonPriority } from "../../button/types";
+import type { InputProps } from "./foundation";
+
+/**
+ * 입력 유틸리티 버튼 클릭 이벤트 타입.
+ */
+export type InputUtilityButtonClickHandler = (
+  event?: MouseEvent<HTMLButtonElement> | MouseEvent<HTMLAnchorElement>,
+) => void;
+
+/**
+ * 입력 유틸리티 버튼 props 정의.
+ * @property {ReactNode} children 버튼 라벨
+ * @property {ButtonPriority} [priority] 버튼 우선순위
+ * @property {boolean} [disabled] 버튼 disabled 상태
+ * @property {InputUtilityButtonClickHandler} [onClick] 클릭 핸들러
+ */
+export interface InputUtilityButtonProps {
+  /**
+   * 버튼 라벨
+   */
+  children: ReactNode;
+  /**
+   * 버튼 우선순위
+   */
+  priority?: ButtonPriority;
+  /**
+   * disabled 여부
+   */
+  disabled?: boolean;
+  /**
+   * 클릭 핸들러
+   */
+  onClick?: InputUtilityButtonClickHandler;
+}
+
+/**
+ * Search Input props; type 만 search 로 고정한다.
+ */
+export interface SearchInputProps extends Omit<InputProps, "type"> {}
+
+/**
+ * Password Input props; 보기/숨김 토글 옵션 포함.
+ * @property {boolean} [defaultVisible=false] 초기 표시 여부
+ * @property {{show:string; hide:string}} [toggleLabel] 토글 버튼 라벨 세트
+ */
+export interface InputPasswordProps extends Omit<InputProps, "type"> {
+  /**
+   * 초기 표시 여부
+   */
+  defaultVisible?: boolean;
+  /**
+   * 토글 버튼 라벨 세트
+   */
+  toggleLabel?: {
+    show: string;
+    hide: string;
+  };
+}
+
+/**
+ * AuthCode Input props; 자리수/카운트다운 옵션을 담는다.
+ * @property {string} [value] 제어형 값
+ * @property {string} [defaultValue] 비제어 초기값
+ * @property {(value:string)=>void} [onValueChange] 값 변경 시 호출
+ * @property {ComponentPropsWithoutRef<"input">["onChange"]} [onChange] native onChange override
+ * @property {number} [length] 자리수 제한
+ * @property {(code:string)=>void} [onComplete] 입력 완료 콜백
+ * @property {string} [placeholder] placeholder 텍스트
+ * @property {ReactNode} [countdownText] 제한 시간 안내
+ * @property {ReactNode} [countdownActionLabel] 연장 버튼 라벨
+ * @property {InputUtilityButtonClickHandler} [onCountdownAction] 연장 버튼 클릭 시 호출
+ * @property {boolean} [countdownActionDisabled] 연장 버튼 disabled 여부
+ */
+export interface AuthCodeInputProps extends Omit<
+  InputProps,
+  "type" | "inputMode" | "pattern" | "onChange" | "value" | "defaultValue"
+> {
+  /**
+   * 제어형 코드 값
+   */
+  value?: string;
+  /**
+   * 비제어 초기값
+   */
+  defaultValue?: string;
+  /**
+   * 값 변경 콜백
+   */
+  onValueChange?: (value: string) => void;
+  /**
+   * native onChange override
+   */
+  onChange?: ComponentPropsWithoutRef<"input">["onChange"];
+  /**
+   * 자리수 제한
+   */
+  length?: number;
+  /**
+   * 입력 완료 콜백
+   */
+  onComplete?: (code: string) => void;
+  /**
+   * placeholder 텍스트
+   */
+  placeholder?: string;
+  /**
+   * 제한 시간 안내 텍스트
+   */
+  countdownText?: ReactNode;
+  /**
+   * 연장 버튼 라벨
+   */
+  countdownActionLabel?: ReactNode;
+  /**
+   * 연장 버튼 클릭 핸들러
+   */
+  onCountdownAction?: InputUtilityButtonClickHandler;
+  /**
+   * 연장 버튼 disabled 여부
+   */
+  countdownActionDisabled?: boolean;
+}
+
+/**
+ * Email Input props; 기본 이메일 입력과 인증요청 버튼만을 담당한다.
+ * @property {InputUtilityButtonClickHandler} [onRequestCode] 인증 요청 클릭 핸들러
+ * @property {ReactNode} [requestButtonLabel] 인증 요청 버튼 라벨
+ * @property {boolean} [requestButtonDisabled] 인증 요청 disabled
+ */
+export interface EmailInputProps extends Omit<
+  InputProps,
+  "type" | "inputMode" | "pattern" | "onChange" | "value" | "defaultValue"
+> {
+  /**
+   * 제어형 이메일 값
+   */
+  value?: string;
+  /**
+   * 비제어 초기값
+   */
+  defaultValue?: string;
+  /**
+   * 값 변경 콜백
+   */
+  onValueChange?: (value: string) => void;
+  /**
+   * native onChange override
+   */
+  onChange?: ComponentPropsWithoutRef<"input">["onChange"];
+  /**
+   * 인증 요청 클릭 핸들러
+   */
+  onRequestCode?: InputUtilityButtonClickHandler;
+  /**
+   * 인증 요청 버튼 라벨
+   */
+  requestButtonLabel?: ReactNode;
+  /**
+   * 인증 요청 버튼 disabled
+   */
+  requestButtonDisabled?: boolean;
+}
+
+/**
+ * Phone Input props; 전화번호 포맷팅과 인증요청 버튼만 담당한다.
+ * @property {(value:string,digits:string)=>void} [onValueChange] 포맷/숫자 콜백
+ * 나머지 props는 InputProps 기반이며 type 관련 속성을 제외한다.
+ */
+export interface PhoneInputProps extends Omit<
+  InputProps,
+  "type" | "inputMode" | "pattern" | "onChange" | "value" | "defaultValue"
+> {
+  /**
+   * 제어형 포맷 값
+   */
+  value?: string;
+  /**
+   * 비제어 초기값
+   */
+  defaultValue?: string;
+  /**
+   * 포맷/숫자 콜백
+   */
+  onValueChange?: (value: string, digits: string) => void;
+  /**
+   * native onChange override
+   */
+  onChange?: ComponentPropsWithoutRef<"input">["onChange"];
+  /**
+   * 인증 요청 핸들러
+   */
+  onRequestCode?: InputUtilityButtonClickHandler;
+  /**
+   * 인증 요청 라벨
+   */
+  requestButtonLabel?: ReactNode;
+  /**
+   * 인증 요청 disabled
+   */
+  requestButtonDisabled?: boolean;
+}

package/src/components/input/types/verification.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+import type { InputUtilityButtonClickHandler } from "./text";
+
+/**
+ * 인증 요청 버튼 옵션.
+ * @property {InputUtilityButtonClickHandler} [onRequestCode] 클릭 핸들러
+ * @property {ReactNode} [requestButtonLabel] 버튼 라벨
+ * @property {boolean} [requestButtonDisabled] disabled 여부
+ */
+export interface VerificationRequestButtonOptions {
+  /**
+   * 인증 요청 클릭 핸들러
+   */
+  onRequestCode?: InputUtilityButtonClickHandler;
+  /**
+   * 버튼 라벨
+   */
+  requestButtonLabel?: ReactNode;
+  /**
+   * 버튼 disabled 상태
+   */
+  requestButtonDisabled?: boolean;
+}

package/src/components/input/utils/index.tsx

@@ -0,0 +1 @@
+export * from "./verification";

package/src/components/input/utils/verification.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import InputBaseUtilityButton from "../markup/foundation/Button";
+import type { VerificationRequestButtonOptions } from "../types";
+
+/**
+ * 인증 요청 버튼의 기본 라벨.
+ */
+const DEFAULT_REQUEST_LABEL = "인증번호 요청";
+/**
+ * 인증 요청 버튼을 렌더링한다.
+ * @function
+ * @param {VerificationRequestButtonOptions} options 버튼 옵션
+ * @returns {React.ReactNode} 버튼 노드
+ */
+export const renderVerificationRequestButton = ({
+  onRequestCode,
+  requestButtonDisabled,
+  requestButtonLabel = DEFAULT_REQUEST_LABEL,
+}: VerificationRequestButtonOptions): React.ReactNode => {
+  // 인증 요청 핸들러가 없으면 버튼 자체를 렌더링하지 않는다.
+  if (!onRequestCode) {
+    return null;
+  }
+
+  return (
+    <InputBaseUtilityButton
+      priority="primary"
+      onClick={onRequestCode}
+      disabled={requestButtonDisabled}
+    >
+      {requestButtonLabel}
+    </InputBaseUtilityButton>
+  );
+};

package/src/components/select/hooks/index.ts

@@ -1,4 +1,45 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+import type { SelectDropdownBehaviorProps } from "../types/props";
+
 /**
- * TODO(select): 접근성/상태 계산 hook을 정의한다.
+ * Select dropdown open 상태를 제어하는 hook
+ * @hook
+ * @param {SelectDropdownBehaviorProps} props open 제어 옵션
+ * @returns {{
+ *   open: boolean;
+ *   setOpen: (next: boolean) => void;
+ *   isControlled: boolean;
+ * }} resolved open state
  */
-export {};
+export const useSelectDropdownOpenState = ({
+  open,
+  defaultOpen,
+  onOpenChange,
+}: SelectDropdownBehaviorProps) => {
+  const isControlled = useMemo(() => typeof open === "boolean", [open]);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(
+    defaultOpen ?? false,
+  );
+
+  useEffect(() => {
+    if (isControlled) {
+      return;
+    }
+    setUncontrolledOpen(defaultOpen ?? false);
+  }, [defaultOpen, isControlled]);
+
+  const resolvedOpen = isControlled ? (open as boolean) : uncontrolledOpen;
+
+  const setOpen = useCallback(
+    (nextOpen: boolean) => {
+      if (!isControlled) {
+        setUncontrolledOpen(nextOpen);
+      }
+      onOpenChange?.(nextOpen);
+    },
+    [isControlled, onOpenChange],
+  );
+
+  return { open: resolvedOpen, setOpen, isControlled };
+};

package/src/components/select/img/chevron/primary/large.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.9592 6.79278L9.99992 12.7521L4.04061 6.79278C3.65009 6.40225 3.01669 6.40225 2.62617 6.79278C2.23564 7.1833 2.23564 7.8167 2.62617 8.20722L9.2927 14.8738C9.68322 15.2643 10.3166 15.2643 10.7071 14.8738L17.3737 8.20722C17.7642 7.8167 17.7642 7.1833 17.3737 6.79278C16.9831 6.40239 16.3497 6.4023 15.9592 6.79278Z" fill="#BCBEC2"/>
+</svg>

package/src/components/select/img/chevron/primary/medium.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.7674 5.43422L7.99994 10.2017L3.23249 5.43422C2.92007 5.1218 2.41335 5.1218 2.10093 5.43422C1.78851 5.74664 1.78851 6.25336 2.10093 6.56578L7.43416 11.899C7.74658 12.2114 8.25329 12.2114 8.56571 11.899L13.8989 6.56578C14.2114 6.25336 14.2114 5.74664 13.8989 5.43422C13.5865 5.12191 13.0798 5.12184 12.7674 5.43422Z" fill="#BCBEC2"/>
+</svg>

package/src/components/select/img/chevron/primary/small.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.57554 4.07567L5.99995 7.65125L2.42437 4.07567C2.19005 3.84135 1.81001 3.84135 1.5757 4.07567C1.34139 4.30998 1.34139 4.69002 1.5757 4.92433L5.57562 8.92425C5.80993 9.15857 6.18997 9.15857 6.42428 8.92425L10.4242 4.92433C10.6585 4.69002 10.6585 4.30998 10.4242 4.07567C10.1899 3.84143 9.80982 3.84138 9.57554 4.07567Z" fill="#BCBEC2"/>
+</svg>

package/src/components/select/img/chevron/secondary/large.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.9592 6.79278L9.99992 12.7521L4.04061 6.79278C3.65009 6.40225 3.01669 6.40225 2.62617 6.79278C2.23564 7.1833 2.23564 7.8167 2.62617 8.20722L9.2927 14.8738C9.68322 15.2643 10.3166 15.2643 10.7071 14.8738L17.3737 8.20722C17.7642 7.8167 17.7642 7.1833 17.3737 6.79278C16.9831 6.40239 16.3497 6.4023 15.9592 6.79278Z" fill="#313235"/>
+</svg>

package/src/components/select/img/chevron/secondary/medium.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.7674 5.43422L7.99994 10.2017L3.23249 5.43422C2.92007 5.1218 2.41335 5.1218 2.10093 5.43422C1.78851 5.74664 1.78851 6.25336 2.10093 6.56578L7.43416 11.899C7.74658 12.2114 8.25329 12.2114 8.56571 11.899L13.8989 6.56578C14.2114 6.25336 14.2114 5.74664 13.8989 5.43422C13.5865 5.12191 13.0798 5.12184 12.7674 5.43422Z" fill="#313235"/>
+</svg>

package/src/components/select/img/chevron/secondary/small.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.57554 4.07567L5.99995 7.65125L2.42437 4.07567C2.19005 3.84135 1.81001 3.84135 1.5757 4.07567C1.34139 4.30998 1.34139 4.69002 1.5757 4.92433L5.57562 8.92425C5.80993 9.15857 6.18997 9.15857 6.42428 8.92425L10.4242 4.92433C10.6585 4.69002 10.6585 4.30998 10.4242 4.07567C10.1899 3.84143 9.80982 3.84138 9.57554 4.07567Z" fill="#313235"/>
+</svg>

package/src/components/select/img/remove.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 2C11.3137 2 14 4.68629 14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2ZM10.0267 5.97331C9.81841 5.76513 9.48103 5.76506 9.27279 5.97331L7.99935 7.24609L6.72656 5.97331C6.51827 5.76513 6.1809 5.76506 5.97266 5.97331C5.76468 6.18157 5.76457 6.51902 5.97266 6.72721L7.24544 8L5.97266 9.27279C5.76457 9.48099 5.76468 9.81843 5.97266 10.0267C6.1809 10.2349 6.51827 10.2349 6.72656 10.0267L7.99935 8.75326L9.27279 10.0267C9.48103 10.2349 9.81841 10.2349 10.0267 10.0267C10.2348 9.8184 10.2349 9.48101 10.0267 9.27279L8.75326 8L10.0267 6.72721C10.2349 6.51899 10.2348 6.1816 10.0267 5.97331Z" fill="#313235"/>
+</svg>

package/src/components/select/index.scss

@@ -1 +1,2 @@
-@use "./styles/index.scss";
+@use "./styles/variables.scss";
+@use "./styles/select.scss";

package/src/components/select/index.tsx

@@ -1,4 +1,9 @@
 /**
  * select 카테고리 배럴 placeholder: 실제 구현은 markup/ 하위에 추가한다.
  */
+import "./index.scss";
+
 export * from "./markup";
+export * from "./types";
+export * from "./hooks";
+export * from "./utils";

package/src/components/select/markup/Default.tsx

@@ -0,0 +1,154 @@
+"use client";
+
+import clsx from "clsx";
+import { forwardRef } from "react";
+
+import type { DropdownSize } from "../../dropdown/types";
+import { Dropdown } from "../../dropdown/markup";
+import { SelectTriggerBase, SelectTriggerSelected } from "./foundation";
+import Container from "./foundation/Container";
+import { useSelectDropdownOpenState } from "../hooks";
+import type {
+  SelectDefaultComponentProps,
+  SelectDropdownOption,
+} from "../types/props";
+
+/**
+ * Select default trigger; 단일 선택 드롭다운을 렌더링한다.
+ * @component
+ * @param {SelectDefaultComponentProps} props default trigger props
+ * @param {SelectDropdownOption[]} [props.options] dropdown option 목록
+ * @param {string[]} [props.selectedOptionIds] 선택된 option id 리스트
+ * @param {(option: SelectDropdownOption) => void} [props.onOptionSelect] option 선택 콜백
+ * @param {"primary" | "secondary"} [props.priority="primary"] priority 스케일
+ * @param {"small" | "medium" | "large"} [props.size="medium"] size 스케일
+ * @param {"default" | "focused" | "disabled"} [props.state="default"] 시각 상태
+ * @param {boolean} [props.block] block 여부
+ * @param {boolean} [props.disabled] disabled 여부
+ */
+const SelectDefault = forwardRef<HTMLElement, SelectDefaultComponentProps>(
+  (
+    {
+      className,
+      displayLabel,
+      placeholder,
+      priority = "primary",
+      size = "medium",
+      state = "default",
+      block,
+      isOpen,
+      disabled,
+      buttonType,
+      options = [],
+      selectedOptionIds,
+      onOptionSelect,
+      dropdownSize,
+      dropdownMatchTriggerWidth = true,
+      dropdownRootProps,
+      dropdownContainerProps,
+      dropdownMenuListProps,
+      open,
+      defaultOpen,
+      onOpenChange,
+      ...rest
+    },
+    ref,
+  ) => {
+    const resolvedSelectedIds = selectedOptionIds ?? [];
+
+    const resolvedDisplayLabel =
+      displayLabel ??
+      (resolvedSelectedIds.length > 0
+        ? options.find(option => option.id === resolvedSelectedIds[0])?.label
+        : undefined);
+
+    const hasLabel =
+      resolvedDisplayLabel !== undefined &&
+      resolvedDisplayLabel !== null &&
+      resolvedDisplayLabel !== "";
+
+    const { open: dropdownOpen, setOpen } = useSelectDropdownOpenState({
+      open: open ?? isOpen,
+      defaultOpen,
+      onOpenChange,
+    });
+    // Dropdown open 상태를 trigger data-state와 동기화한다.
+
+    const handleOptionSelect = (option: SelectDropdownOption) => {
+      onOptionSelect?.(option);
+      setOpen(false);
+    };
+
+    const panelSize = (dropdownSize ?? size) as DropdownSize;
+    const shouldRenderDropdown = options.length > 0;
+
+    return (
+      <Container
+        className={clsx("select-trigger-container", className)}
+        block={block}
+      >
+        <Dropdown.Root
+          open={dropdownOpen}
+          onOpenChange={setOpen}
+          modal={false}
+          {...dropdownRootProps}
+        >
+          {/* Dropdown.Trigger를 통해 Select trigger를 그대로 재사용한다. */}
+          <Dropdown.Trigger asChild>
+            <SelectTriggerBase
+              ref={ref}
+              priority={priority}
+              size={size}
+              state={disabled ? "disabled" : state}
+              block={block}
+              open={dropdownOpen}
+              disabled={disabled}
+              buttonType={buttonType}
+              {...rest}
+            >
+              <SelectTriggerSelected
+                label={resolvedDisplayLabel}
+                placeholder={placeholder}
+                isPlaceholder={!hasLabel}
+              />
+            </SelectTriggerBase>
+          </Dropdown.Trigger>
+          {shouldRenderDropdown ? (
+            <Dropdown.Container
+              {...dropdownContainerProps}
+              size={panelSize}
+              matchTriggerWidth={dropdownMatchTriggerWidth}
+            >
+              <Dropdown.Menu.List {...dropdownMenuListProps}>
+                {/* Dropdown menu option들을 그대로 매핑해 선택 이벤트를 전달한다. */}
+                {options.map(option => (
+                  <Dropdown.Menu.Item
+                    key={option.id}
+                    label={option.label}
+                    description={option.description}
+                    disabled={option.disabled}
+                    leftSlot={option.leftSlot}
+                    rightSlot={option.rightSlot}
+                    multiple={Boolean(option.multiple)}
+                    isSelected={resolvedSelectedIds.includes(option.id)}
+                    onSelect={event => {
+                      if (option.disabled) {
+                        event.preventDefault();
+                        return;
+                      }
+                      handleOptionSelect(option);
+                    }}
+                  />
+                ))}
+              </Dropdown.Menu.List>
+            </Dropdown.Container>
+          ) : null}
+        </Dropdown.Root>
+      </Container>
+    );
+  },
+);
+
+SelectDefault.displayName = "SelectDefault";
+
+export { SelectDefault };

package/src/components/select/markup/foundation/Base.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import clsx from "clsx";
+import { forwardRef } from "react";
+
+import { SlotComponent } from "../../../slot";
+import { SelectIcon } from "./Icon";
+import type { SelectTriggerBaseProps } from "../../types/trigger";
+
+/**
+ * Select trigger foundation; priority/size/state를 data attribute로 노출하고
+ * Chevron 아이콘을 자동 연결하는 기본 요소다.
+ * @component
+ * @param {SelectTriggerBaseProps} props trigger base props
+ * @param {"primary" | "secondary"} [props.priority="primary"] 스타일 우선순위
+ * @param {"small" | "medium" | "large"} [props.size="medium"] 높이 스케일
+ * @param {"default" | "focused" | "disabled"} [props.state="default"] 시각 상태
+ * @param {boolean} [props.multiple] multi select 여부
+ * @param {ElementType} [props.as="button"] polymorphic 태그
+ * @param {"button" | "submit" | "reset"} [props.buttonType="button"] native button type
+ */
+const SelectTriggerBase = forwardRef<HTMLElement, SelectTriggerBaseProps>(
+  (
+    {
+      priority = "primary",
+      size = "medium",
+      state = "default",
+      open = false,
+      block = false,
+      multiple = false,
+      disabled = false,
+      as = "button",
+      buttonType = "button",
+      className,
+      children,
+      ...rest
+    },
+    ref,
+  ) => {
+    const Icon = SelectIcon.Chevron[priority][size];
+    const {
+      ["aria-haspopup"]: ariaHasPopup,
+      ["aria-expanded"]: ariaExpanded,
+      ...restProps
+    } = rest;
+
+    const sharedProps = {
+      className: clsx("select-button", className),
+      "data-priority": priority,
+      "data-size": size,
+      "data-state": state,
+      "data-open": open || undefined,
+      "data-multiple": multiple || undefined,
+      "data-block": block ? "true" : undefined,
+      "aria-haspopup": ariaHasPopup ?? "listbox",
+      "aria-expanded": ariaExpanded ?? open,
+      ...restProps,
+    };
+
+    const elementSpecificProps =
+      typeof as === "string" && as === "button"
+        ? {
+            type: buttonType,
+            disabled,
+          }
+        : {
+            role: "button",
+            tabIndex: disabled ? -1 : 0,
+            "aria-disabled": disabled ? "true" : undefined,
+          };
+
+    return (
+      <SlotComponent
+        ref={ref}
+        as={as}
+        {...sharedProps}
+        {...elementSpecificProps}
+      >
+        {children}
+        <figure className="select-icon" data-size={size} aria-hidden="true">
+          <Icon />
+        </figure>
+      </SlotComponent>
+    );
+  },
+);
+
+SelectTriggerBase.displayName = "SelectBase";
+
+export { SelectTriggerBase };

package/src/components/select/markup/foundation/Container.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import clsx from "clsx";
+
+import type { SelectContainerProps } from "../../types/props";
+
+/**
+ * Select trigger/container wrapper
+ * @component
+ * @param {SelectContainerProps} props Select container props
+ * @param {string} [props.className] 사용자 정의 className
+ * @param {boolean} [props.block] wrapper 전체 폭 확장 여부
+ * @param {React.ReactNode} props.children trigger 및 dropdown 콘텐츠
+ */
+export default function SelectContainer({
+  className,
+  children,
+  block = false,
+}: SelectContainerProps) {
+  return (
+    <div
+      className={clsx("select select-container", className, {
+        "select-block": block,
+      })}
+    >
+      {/** dropdown root 및 dropdown menu 등 포함 예정 */}
+      {children}
+    </div>
+  );
+}