@uniai-fe/uds-primitives 0.1.13 → 0.2.0

package/src/components/select/styles/select.scss

@@ -0,0 +1,316 @@
+.select {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: var(--spacing-gap-2);
+}
+
+.select-block {
+  width: 100%;
+}
+
+.select-button {
+  --select-icon-fill: var(--select-icon-color-default);
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: var(--select-primary-gap-inline);
+  min-height: var(--select-primary-height-medium);
+  padding: var(--select-primary-padding-block)
+    var(--select-primary-padding-inline);
+  border: var(--select-primary-border-width-default) solid
+    var(--select-primary-color-border);
+  border-radius: var(--select-primary-radius-medium);
+  background-color: var(--input-surface-color);
+  cursor: pointer;
+  transition:
+    border-color 150ms ease,
+    background-color 150ms ease,
+    color 150ms ease;
+  text-align: left;
+
+  &[data-size="small"] {
+    min-height: var(--select-primary-height-small);
+    border-radius: var(--select-primary-radius-small);
+  }
+
+  &[data-size="large"] {
+    min-height: var(--select-primary-height-large);
+    border-radius: var(--select-primary-radius-large);
+  }
+
+  &[data-multiple="true"] {
+    align-items: center;
+    flex-wrap: nowrap;
+    overflow: hidden;
+  }
+
+  &[data-priority="secondary"] {
+    width: fit-content;
+    max-width: 100%;
+    min-height: auto;
+    border: none;
+    border-radius: var(--select-secondary-radius);
+    padding: var(--select-secondary-padding-block)
+      var(--select-secondary-padding-inline);
+    background-color: transparent;
+    gap: var(--select-secondary-gap);
+    position: relative;
+    --select-icon-fill: currentColor;
+    transition:
+      background-color 150ms ease,
+      color 150ms ease;
+
+    &:hover:not([data-state="disabled"]) {
+      background-color: var(--select-color-surface-secondary-hover);
+    }
+
+    &:active:not([data-state="disabled"]) {
+      background-color: var(--select-color-surface-secondary-active);
+    }
+
+    &[data-state="focused"],
+    &[data-open="true"] {
+      background-color: var(--select-color-surface-secondary-hover);
+
+      &::after {
+        height: var(--select-secondary-underline-width-focus);
+        background-color: var(--select-color-border-secondary-focused);
+      }
+    }
+
+    &[data-state="disabled"],
+    &:disabled {
+      color: var(--color-label-disabled);
+      cursor: not-allowed;
+    }
+  }
+
+  &:not([data-priority="secondary"])[data-state="focused"],
+  &:not([data-priority="secondary"])[data-open="true"],
+  &:not([data-priority="secondary"]):focus-visible {
+    border-color: var(--select-primary-color-border-focused);
+    border-width: var(--select-primary-border-width-focus);
+    --select-icon-fill: var(--select-icon-color-focused);
+  }
+
+  // &:not([data-priority="secondary"]):hover:not(:disabled) {
+  // }
+
+  &:not([data-priority="secondary"])[data-state="disabled"],
+  &:not([data-priority="secondary"]):disabled {
+    border-color: var(--select-primary-color-border-disabled);
+    background-color: var(--select-primary-color-surface-disabled);
+    cursor: not-allowed;
+    --select-icon-fill: var(--select-icon-color-disabled);
+  }
+
+  &[data-priority="secondary"][data-state="disabled"],
+  &[data-priority="secondary"]:disabled {
+    border-color: transparent;
+    background-color: var(--select-color-surface-secondary-disabled);
+
+    &::after {
+      background-color: var(--select-color-border-secondary-disabled);
+      height: var(--select-secondary-underline-width-default);
+    }
+  }
+}
+
+.select-value {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-2);
+}
+
+.select-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-family: var(--font-body-medium-family);
+  font-size: var(--select-text-medium-size);
+  font-weight: var(--select-text-medium-weight);
+  line-height: var(--select-text-medium-line-height);
+  letter-spacing: var(--select-text-medium-letter-spacing);
+  color: var(--select-primary-color-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  .select-button[data-priority="secondary"] & {
+    color: var(--select-secondary-color-text);
+  }
+
+  .select-button[data-state="focused"] &,
+  .select-button[data-open="true"] & {
+    color: var(--select-primary-color-text-focused);
+  }
+
+  .select-button[data-state="disabled"] & {
+    color: var(--select-primary-color-text-disabled);
+  }
+
+  .select-button[data-priority="secondary"][data-state="disabled"] & {
+    color: var(--color-label-disabled);
+  }
+}
+
+.select-label-placeholder {
+  color: var(--select-primary-color-placeholder);
+
+  .select-button[data-priority="secondary"] & {
+    color: var(--select-secondary-color-placeholder);
+  }
+}
+
+.select-button[data-size="small"] .select-label {
+  font-size: var(--select-text-small-size);
+  line-height: var(--select-text-small-line-height);
+  letter-spacing: var(--select-text-small-letter-spacing);
+  font-weight: var(--select-text-small-weight);
+}
+
+.select-button[data-size="large"] .select-label {
+  font-size: var(--select-text-large-size);
+  line-height: var(--select-text-large-line-height);
+  letter-spacing: var(--select-text-large-letter-spacing);
+  font-weight: var(--select-text-large-weight);
+}
+
+.select-button[data-priority="secondary"][data-size="large"] .select-label {
+  font-weight: 600;
+}
+
+.select-tags {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: var(--select-multiple-chip-gap);
+  align-items: center;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.select-tag {
+  display: flex;
+  align-items: center;
+  gap: var(--select-multiple-chip-gap);
+  padding: var(--select-multiple-chip-padding-block)
+    var(--select-multiple-chip-padding-inline);
+  border-radius: var(--select-multiple-chip-radius);
+  border: 1px solid
+    var(
+      --select-multiple-chip-border-color,
+      var(--color-border-standard-cool-gray)
+    );
+  background-color: var(--select-multiple-chip-surface);
+  color: var(--select-multiple-chip-color);
+  font-size: var(--select-multiple-chip-font-size);
+  line-height: var(--select-multiple-chip-line-height);
+  font-weight: var(--select-multiple-chip-font-weight);
+  white-space: nowrap;
+  min-height: var(--select-multiple-chip-height);
+
+  &:focus-within {
+    border-color: var(--select-color-border-secondary-focused);
+  }
+
+  &[data-removable="true"] {
+    padding-right: var(--spacing-padding-2);
+  }
+}
+
+.select-tag[data-kind="summary"],
+.select-tag-summary {
+  background-color: var(--select-multiple-chip-summary-surface);
+  border-color: var(--select-multiple-chip-summary-border-color);
+  color: var(--select-multiple-chip-summary-color);
+  padding: var(--select-multiple-chip-summary-padding-block)
+    var(--select-multiple-chip-summary-padding-inline);
+  border-radius: var(--select-multiple-chip-summary-radius);
+  font-size: var(--select-multiple-chip-summary-font-size);
+  line-height: var(--select-multiple-chip-summary-line-height);
+  font-weight: var(--select-multiple-chip-summary-font-weight);
+  min-height: auto;
+}
+
+.select-tag-label {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap-1);
+  min-width: 0;
+}
+
+.select-tag-suffix {
+  color: var(--select-multiple-chip-suffix-color);
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.select-tag-remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--select-icon-size-small);
+  height: var(--select-icon-size-small);
+  border: none;
+  background-color: transparent;
+  padding: 0;
+  cursor: pointer;
+  color: var(--select-multiple-chip-remove-color);
+  flex-shrink: 0;
+  border-radius: 9999px;
+  transition: color 150ms ease;
+
+  &:focus-visible {
+    outline: 0.2rem solid var(--color-border-strong);
+    outline-offset: 0.1rem;
+  }
+
+  &:hover {
+    color: var(--select-multiple-chip-remove-hover-color);
+  }
+
+  svg {
+    width: 100%;
+    height: 100%;
+
+    path {
+      fill: currentColor;
+    }
+  }
+}
+
+.select-icon {
+  flex-shrink: 0;
+  width: var(--select-icon-size-medium);
+  height: var(--select-icon-size-medium);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: auto;
+
+  &[data-size="small"] {
+    width: var(--select-icon-size-small);
+    height: var(--select-icon-size-small);
+  }
+
+  &[data-size="large"] {
+    width: var(--select-icon-size-large);
+    height: var(--select-icon-size-large);
+  }
+
+  [data-open="true"] & {
+    transform: rotate(180deg);
+  }
+
+  svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+
+    path {
+      fill: var(--select-icon-fill);
+    }
+  }
+}

package/src/components/select/styles/variables.scss

@@ -0,0 +1,91 @@
+/* Select tokens mapped to Input primary tokens for visual parity */
+:root {
+  --select-primary-height-small: var(--input-default-height-small);
+  --select-primary-height-medium: var(--input-default-height-medium);
+  --select-primary-height-large: var(--input-default-height-large);
+
+  --select-primary-radius-small: var(--input-default-radius-base);
+  --select-primary-radius-medium: var(--input-default-radius-base);
+  --select-primary-radius-large: var(--input-default-radius-base);
+
+  --select-primary-padding-inline: var(--input-default-padding-inline);
+  --select-primary-padding-block: var(--input-default-padding-block);
+  --select-primary-gap-inline: var(--input-default-gap);
+  --select-primary-border-width-default: var(--input-border-width-default);
+  --select-primary-border-width-focus: var(--input-border-width-emphasis);
+
+  --select-secondary-radius: var(--theme-radius-medium-1);
+  --select-secondary-padding-inline: var(--spacing-padding-4);
+  --select-secondary-padding-block: var(--spacing-padding-2);
+  --select-secondary-gap: var(--spacing-gap-2);
+  --select-secondary-underline-width-default: 1px;
+  --select-secondary-underline-width-focus: 1.4px;
+  --select-text-small-size: 15px;
+  --select-text-small-line-height: 1.4;
+  --select-text-small-letter-spacing: 0.2px;
+  --select-text-small-weight: 400;
+  --select-text-medium-size: var(--font-body-medium-size);
+  --select-text-medium-line-height: var(--font-body-medium-line-height);
+  --select-text-medium-letter-spacing: 0;
+  --select-text-medium-weight: 400;
+  --select-text-large-size: var(--font-body-large-size);
+  --select-text-large-line-height: var(--font-body-large-line-height);
+  --select-text-large-letter-spacing: 0;
+  --select-text-large-weight: 400;
+
+  --select-icon-size-small: 1.6rem;
+  --select-icon-size-medium: 2rem;
+  --select-icon-size-large: 2rem;
+
+  --select-primary-color-placeholder: var(--input-placeholder-color);
+  --select-primary-color-text: var(--color-label-alternative);
+  --select-primary-color-text-focused: var(--color-label-strong);
+  --select-primary-color-text-disabled: var(--color-label-disabled);
+  --select-primary-color-border: var(--input-border-color);
+  --select-primary-color-border-focused: var(--input-border-active-color);
+  --select-primary-color-border-disabled: var(--input-border-disabled-color);
+  --select-color-border-secondary: var(--input-border-color);
+  --select-color-border-secondary-hover: var(--input-border-active-color);
+  --select-color-border-secondary-focused: var(--input-border-active-color);
+  --select-color-border-secondary-disabled: var(
+    --input-border-underline-disabled-color
+  );
+  --select-primary-color-surface-disabled: var(--input-surface-disabled-color);
+  --select-secondary-color-text: var(--color-label-standard);
+  --select-secondary-color-placeholder: var(--color-label-alternative);
+  --select-color-surface-secondary: transparent;
+  --select-color-surface-secondary-hover: var(--color-surface-static-cool-gray);
+  --select-color-surface-secondary-active: var(--color-surface-standard);
+  --select-color-surface-secondary-disabled: var(--color-surface-neutral);
+
+  --select-icon-color-default: var(--color-cool-gray-75);
+  --select-icon-color-focused: var(--color-cool-gray-20);
+  --select-icon-color-disabled: var(--color-cool-gray-85);
+
+  /* Multi select chip */
+  --select-multiple-chip-gap: var(--spacing-gap-2);
+  --select-multiple-chip-padding-inline: var(--spacing-padding-4);
+  --select-multiple-chip-padding-block: 0px;
+  --select-multiple-chip-radius: var(--theme-radius-medium-2);
+  --select-multiple-chip-font-size: var(--font-body-small-size);
+  --select-multiple-chip-line-height: var(--font-body-small-line-height);
+  --select-multiple-chip-font-weight: 400;
+  --select-multiple-chip-height: 29px;
+  --select-multiple-chip-color: var(--color-primary-default);
+  --select-multiple-chip-suffix-color: var(--color-label-alternative);
+  --select-multiple-chip-surface: var(--color-surface-static-blue);
+  --select-multiple-chip-border-color: transparent; // var(--color-border-standard-cool-gray);
+  --select-multiple-chip-remove-color: var(--color-label-strong);
+  --select-multiple-chip-remove-hover-color: var(--color-label-strong);
+  --select-multiple-chip-summary-color: var(--color-label-standard);
+  --select-multiple-chip-summary-surface: var(--color-surface-standard);
+  --select-multiple-chip-summary-border-color: transparent;
+  --select-multiple-chip-summary-padding-inline: var(--spacing-padding-4);
+  --select-multiple-chip-summary-padding-block: var(--spacing-padding-2);
+  --select-multiple-chip-summary-radius: var(--theme-radius-medium-1);
+  --select-multiple-chip-summary-font-size: var(--font-body-medium-size);
+  --select-multiple-chip-summary-line-height: var(
+    --font-body-medium-line-height
+  );
+  --select-multiple-chip-summary-font-weight: 400;
+}

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

@@ -0,0 +1,34 @@
+/**
+ * Select priority scale
+ * @typedef {"primary" | "secondary"} SelectPriority
+ * - primary: input primary 스타일과 동일한 기본 형태
+ * - secondary: borderless + underline 스타일
+ */
+export type SelectPriority = "primary" | "secondary";
+
+/**
+ * Select size scale
+ * @typedef {"small" | "medium" | "large"} SelectSize
+ * - small: 컴팩트 레이아웃
+ * - medium: 기본 사이즈
+ * - large: 확장 레이아웃
+ */
+export type SelectSize = "small" | "medium" | "large";
+
+/**
+ * Select visual state
+ * @typedef {"default" | "focused" | "disabled"} SelectState
+ * - default: 기본 상태
+ * - focused: focus/open 상태
+ * - disabled: 비활성 상태
+ */
+export type SelectState = "default" | "focused" | "disabled";
+
+/**
+ * Select trigger button type
+ * @typedef {"button" | "submit" | "reset"} SelectTriggerButtonType
+ * - button: 기본 trigger type
+ * - submit: form submit trigger
+ * - reset: form reset trigger
+ */
+export type SelectTriggerButtonType = "button" | "submit" | "reset";

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

@@ -0,0 +1,45 @@
+import type { ElementType } from "react";
+
+import type { SelectPriority, SelectSize } from "./base";
+
+/**
+ * Select 아이콘 사이즈 맵
+ * @property {ElementType} small small 사이즈 아이콘 컴포넌트
+ * @property {ElementType} medium medium 사이즈 아이콘 컴포넌트
+ * @property {ElementType} large large 사이즈 아이콘 컴포넌트
+ */
+export type SelectIconSizeMap = Record<SelectSize, ElementType>;
+
+/**
+ * Select 아이콘 priority 맵
+ * @property {SelectIconSizeMap} primary primary priority용 아이콘 컬렉션
+ * @property {SelectIconSizeMap} secondary secondary priority용 아이콘 컬렉션
+ */
+export type SelectIconPriorityMap = Record<SelectPriority, SelectIconSizeMap>;
+
+/**
+ * Select multi remove priority 맵
+ * @property {SelectIconSizeMap} primary primary priority remove 아이콘
+ */
+export interface SelectIconRemovePriorityMap {
+  /**
+   * primary priority remove 아이콘
+   */
+  primary: SelectIconSizeMap;
+}
+
+/**
+ * Select 아이콘 전체 컬렉션
+ * @property {SelectIconPriorityMap} Chevron trigger Chevron 아이콘 세트
+ * @property {SelectIconRemovePriorityMap} Remove multi select remove 아이콘 세트
+ */
+export interface SelectIconCollection {
+  /**
+   * trigger Chevron 아이콘 세트
+   */
+  Chevron: SelectIconPriorityMap;
+  /**
+   * multi select remove 아이콘 세트
+   */
+  Remove: SelectIconRemovePriorityMap;
+}

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

@@ -1,4 +1,5 @@
-/**
- * TODO(select): variant/slot 타입 정의를 작성한다.
- */
-export {};
+export type * from "./base";
+export type * from "./icon";
+export type * from "./props";
+export type * from "./trigger";
+export type * from "./multiple";

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

@@ -0,0 +1,57 @@
+import type { ReactNode } from "react";
+
+/**
+ * Select multiple chip props
+ * @property {ReactNode} label 표시할 라벨
+ * @property {ReactNode} [suffix] 라벨 뒤에 붙는 서브 라벨
+ * @property {boolean} [removable] remove 버튼 노출 여부
+ * @property {() => void} [onRemove] remove 클릭 핸들러
+ */
+export interface SelectMultipleChipProps {
+  /**
+   * 표시할 라벨
+   */
+  label: ReactNode;
+  /**
+   * 라벨 뒤에 붙는 서브 라벨
+   */
+  suffix?: ReactNode;
+  /**
+   * remove 버튼 노출 여부
+   */
+  removable?: boolean;
+  /**
+   * remove 클릭 핸들러
+   */
+  onRemove?: () => void;
+  /**
+   * chip 용도 구분(default: value chip, summary: +n more)
+   */
+  kind?: "value" | "summary";
+}
+
+/**
+ * Select multiple tag 데이터
+ * @property {ReactNode} label chip 라벨
+ * @property {ReactNode} [suffix] 서브 라벨
+ * @property {boolean} [removable] remove 버튼 노출 여부
+ * @property {() => void} [onRemove] remove 핸들러
+ */
+export interface SelectMultipleTag {
+  /**
+   * chip 라벨
+   */
+  label: ReactNode;
+  /**
+   * 서브 라벨
+   */
+  suffix?: ReactNode;
+  /**
+   * remove 버튼 노출 여부
+   */
+  removable?: boolean;
+  /**
+   * remove 핸들러
+   */
+  onRemove?: () => void;
+}