@uniai-fe/uds-primitives 0.1.13 → 0.2.0

package/src/components/select/types/props.ts

@@ -0,0 +1,208 @@
+import type { ReactNode } from "react";
+
+import type {
+  DropdownContainerProps,
+  DropdownMenuListProps,
+  DropdownRootProps,
+  DropdownTemplateItem,
+} from "../../dropdown/types";
+import type { SelectPriority, SelectSize, SelectState } from "./base";
+import type {
+  SelectTriggerDefaultProps,
+  SelectTriggerMultipleProps,
+} from "./trigger";
+
+/**
+ * Select; 스타일 옵션
+ * @property {SelectPriority} [priority] priority scale
+ * @property {SelectSize} [size] size scale
+ * @property {SelectState} [state] visual state
+ * @property {boolean} [block] block 여부
+ */
+export interface SelectStyleOptions {
+  /**
+   * priority scale
+   */
+  priority?: SelectPriority;
+  /**
+   * size scale
+   */
+  size?: SelectSize;
+  /**
+   * visual state
+   */
+  state?: SelectState;
+  /**
+   * block 여부
+   */
+  block?: boolean;
+}
+
+/**
+ * Select; 값 옵션
+ * @property {ReactNode} [displayLabel] 선택된 라벨
+ * @property {ReactNode} [placeholder] placeholder 텍스트
+ * @property {ReactNode[]} [tags] multi select 태그 리스트
+ * @property {boolean} [multiple] multi select 여부
+ */
+export interface SelectValueOptions {
+  /**
+   * 선택된 라벨
+   */
+  displayLabel?: ReactNode;
+  /**
+   * placeholder 텍스트
+   */
+  placeholder?: ReactNode;
+  /**
+   * multi select 태그 리스트
+   */
+  tags?: ReactNode[];
+  /**
+   * multi select 여부
+   */
+  multiple?: boolean;
+}
+
+/**
+ * Select; 상태 옵션
+ * @property {boolean} [isOpen] dropdown open 여부
+ */
+export interface SelectComponentState {
+  /**
+   * dropdown open 여부
+   */
+  isOpen?: boolean;
+}
+
+/**
+ * Select container props
+ * @property {string} [className] 사용자 정의 className
+ * @property {ReactNode} children trigger/Dropdown 등 내부 콘텐츠
+ * @property {boolean} [block] block 여부
+ */
+export interface SelectContainerProps {
+  /**
+   * 사용자 정의 className
+   */
+  className?: string;
+  /**
+   * trigger/Dropdown 등 내부 콘텐츠
+   */
+  children: ReactNode;
+  /**
+   * block 여부
+   */
+  block?: boolean;
+}
+
+/**
+ * Select root props
+ * @typedef {SelectStyleOptions & SelectValueOptions & SelectComponentState} SelectProps
+ */
+export type SelectProps = SelectStyleOptions &
+  SelectValueOptions &
+  SelectComponentState;
+
+/**
+ * Select dropdown option; Dropdown.Template item 계약을 그대로 따른다.
+ * @extends DropdownTemplateItem
+ */
+export interface SelectDropdownOption extends DropdownTemplateItem {}
+
+/**
+ * Select dropdown 옵션 구성 props
+ * @property {SelectDropdownOption[]} [options] dropdown option 리스트
+ * @property {string[]} [selectedOptionIds] 선택된 option id 리스트
+ * @property {(option: SelectDropdownOption) => void} [onOptionSelect] option 선택 콜백
+ * @property {SelectSize} [dropdownSize] dropdown surface size 스케일
+ * @property {boolean} [dropdownMatchTriggerWidth] trigger width 동기화 여부
+ * @property {DropdownRootProps} [dropdownRootProps] Dropdown.Root 전달 props(제어 props 제외)
+ * @property {DropdownContainerProps} [dropdownContainerProps] Dropdown.Container 전달 props(children/size 제외)
+ * @property {DropdownMenuListProps} [dropdownMenuListProps] Dropdown.Menu.List 전달 props
+ */
+export interface SelectDropdownConfigProps {
+  /**
+   * dropdown option 리스트
+   */
+  options?: SelectDropdownOption[];
+  /**
+   * 선택된 option id 리스트
+   */
+  selectedOptionIds?: string[];
+  /**
+   * option 선택 콜백
+   */
+  onOptionSelect?: (option: SelectDropdownOption) => void;
+  /**
+   * dropdown surface size 스케일
+   */
+  dropdownSize?: SelectSize;
+  /**
+   * trigger width 동기화 여부
+   */
+  dropdownMatchTriggerWidth?: boolean;
+  /**
+   * Dropdown.Root 전달 props(제어 props 제외)
+   */
+  dropdownRootProps?: Omit<
+    DropdownRootProps,
+    "open" | "defaultOpen" | "onOpenChange"
+  >;
+  /**
+   * Dropdown.Container 전달 props(children/size 제외)
+   */
+  dropdownContainerProps?: Omit<
+    DropdownContainerProps,
+    "children" | "size" | "matchTriggerWidth"
+  >;
+  /**
+   * Dropdown.Menu.List 전달 props
+   */
+  dropdownMenuListProps?: DropdownMenuListProps;
+}
+
+/**
+ * Select dropdown 개방 제어 props
+ * @property {boolean} [open] dropdown open 상태
+ * @property {boolean} [defaultOpen] uncontrolled 초기 open 상태
+ * @property {(open: boolean) => void} [onOpenChange] open state change 콜백
+ */
+export interface SelectDropdownBehaviorProps {
+  /**
+   * dropdown open 상태
+   */
+  open?: boolean;
+  /**
+   * uncontrolled 초기 open 상태
+   */
+  defaultOpen?: boolean;
+  /**
+   * open state change 콜백
+   */
+  onOpenChange?: (open: boolean) => void;
+}
+
+/**
+ * Select.Default 컴포넌트 props
+ * @extends SelectTriggerDefaultProps
+ * @extends SelectDropdownConfigProps
+ * @extends SelectDropdownBehaviorProps
+ */
+export interface SelectDefaultComponentProps
+  extends
+    SelectTriggerDefaultProps,
+    SelectDropdownConfigProps,
+    SelectDropdownBehaviorProps {}
+
+/**
+ * Select.Multiple 컴포넌트 props
+ * @extends SelectTriggerMultipleProps
+ * @extends SelectDropdownConfigProps
+ * @extends SelectDropdownBehaviorProps
+ */
+export interface SelectMultipleComponentProps
+  extends
+    SelectTriggerMultipleProps,
+    SelectDropdownConfigProps,
+    SelectDropdownBehaviorProps {}

package/src/components/select/types/trigger.ts

@@ -0,0 +1,196 @@
+import type { ElementType, HTMLAttributes, ReactNode } from "react";
+
+import type {
+  SelectPriority,
+  SelectSize,
+  SelectState,
+  SelectTriggerButtonType,
+} from "./base";
+import type { SelectMultipleTag } from "./multiple";
+
+/**
+ * Select trigger layout props
+ * @property {SelectPriority} [priority] priority scale
+ * @property {SelectSize} [size] size scale
+ * @property {SelectState} [state] visual state
+ * @property {boolean} [open] dropdown open 여부
+ * @property {boolean} [block] block 여부
+ * @property {boolean} [multiple] multi select 여부
+ * @property {boolean} [disabled] disabled 여부
+ * @property {ElementType} [as] polymorphic element
+ * @property {SelectTriggerButtonType} [buttonType] button type
+ * @property {ReactNode} children 콘텐츠
+ */
+export interface SelectTriggerBaseProps extends HTMLAttributes<HTMLElement> {
+  /**
+   * priority scale
+   * - primary
+   * - secondary
+   */
+  priority?: SelectPriority;
+  /**
+   * size scale
+   * - small
+   * - medium
+   * - large
+   */
+  size?: SelectSize;
+  /**
+   * visual state
+   * - default
+   * - focused
+   * - disabled
+   */
+  state?: SelectState;
+  /**
+   * dropdown open 여부
+   */
+  open?: boolean;
+  /**
+   * block 여부
+   */
+  block?: boolean;
+  /**
+   * multi select 여부
+   */
+  multiple?: boolean;
+  /**
+   * disabled 여부
+   */
+  disabled?: boolean;
+  /**
+   * polymorphic element
+   */
+  as?: ElementType;
+  /**
+   * button type
+   */
+  buttonType?: SelectTriggerButtonType;
+  /**
+   * 콘텐츠
+   */
+  children: ReactNode;
+}
+
+/**
+ * Select trigger default props
+ * @property {ReactNode} [displayLabel] 선택된 라벨
+ * @property {ReactNode} [placeholder] placeholder 텍스트
+ */
+export interface SelectTriggerDefaultProps extends HTMLAttributes<HTMLElement> {
+  /**
+   * 선택된 라벨
+   */
+  displayLabel?: ReactNode;
+  /**
+   * placeholder 텍스트
+   */
+  placeholder?: ReactNode;
+  /**
+   * priority scale
+   * - primary
+   * - secondary
+   */
+  priority?: SelectPriority;
+  /**
+   * size scale
+   * - small
+   * - medium
+   * - large
+   */
+  size?: SelectSize;
+  /**
+   * visual state
+   * - default
+   * - focused
+   * - disabled
+   */
+  state?: SelectState;
+  /**
+   * block 여부
+   */
+  block?: boolean;
+  /**
+   * dropdown open 여부
+   */
+  isOpen?: boolean;
+  /**
+   * disabled 여부
+   */
+  disabled?: boolean;
+  /**
+   * button type
+   */
+  buttonType?: SelectTriggerButtonType;
+}
+
+/**
+ * Select trigger multiple props
+ * @property {ReactNode[]} [tags] multi select tag 리스트
+ */
+export interface SelectTriggerMultipleProps extends HTMLAttributes<HTMLElement> {
+  /**
+   * 선택된 라벨
+   */
+  displayLabel?: ReactNode;
+  /**
+   * placeholder 텍스트
+   */
+  placeholder?: ReactNode;
+  /**
+   * multi select tag 리스트
+   */
+  tags?: SelectMultipleTag[];
+  /**
+   * priority scale
+   * - primary
+   */
+  priority?: SelectPriority;
+  /**
+   * size scale
+   * - small
+   * - medium
+   * - large
+   */
+  size?: SelectSize;
+  /**
+   * visual state
+   * - default
+   * - focused
+   * - disabled
+   */
+  state?: SelectState;
+  /**
+   * block 여부
+   */
+  block?: boolean;
+  /**
+   * dropdown open 여부
+   */
+  isOpen?: boolean;
+  /**
+   * disabled 여부
+   */
+  disabled?: boolean;
+}
+
+/**
+ * Select selected view props
+ * @property {ReactNode} [label] 표시할 라벨
+ * @property {ReactNode} [placeholder] placeholder 텍스트
+ * @property {boolean} [isPlaceholder] placeholder 상태 여부
+ */
+export interface SelectSelectedProps {
+  /**
+   * 표시할 라벨
+   */
+  label?: ReactNode;
+  /**
+   * placeholder 텍스트
+   */
+  placeholder?: ReactNode;
+  /**
+   * placeholder 상태 여부
+   */
+  isPlaceholder?: boolean;
+}

package/src/index.scss

@@ -6,14 +6,15 @@
 @use "./components/chip";
 @use "./components/drawer";
 @use "./components/dropdown";
-@use "./components/input";
 @use "./components/label";
+@use "./components/input";
+@use "./components/select";
+@use "./components/form";
 @use "./components/navigation";
 @use "./components/pagination";
 @use "./components/radio";
 @use "./components/scrollbar";
 @use "./components/segmented-control";
-@use "./components/select";
 @use "./components/spinner";
 @use "./components/tab";
 @use "./components/table";