@uniai-fe/uds-primitives 0.3.6 → 0.3.7

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

@@ -3,6 +3,8 @@
   /* layout presets */
   --select-width: 100%;
   --select-flex: 0 1 auto;
+  --select-layout-gap: var(--spacing-gap-2);
+  --select-value-gap: var(--spacing-gap-2);
 
   --select-primary-height-small: var(--input-default-height-small);
   --select-primary-height-medium: var(--input-default-height-medium);
@@ -28,9 +30,16 @@
   --select-table-border-default-color: var(--input-border-table-default-color);
   --select-table-border-focus-color: var(--input-border-active-color);
   --select-table-border-disabled-color: var(--input-border-disabled-color);
+  --select-table-border-readonly-color: var(
+    --select-table-border-disabled-color
+  );
   --select-table-surface-color: transparent;
   --select-table-surface-disabled-color: var(--input-surface-disabled-color);
+  --select-table-surface-readonly-color: var(
+    --select-table-surface-disabled-color
+  );
   --select-table-color-text: var(--input-text-color);
+  --select-table-color-text-readonly: var(--select-primary-color-text-readonly);
   --select-table-color-placeholder: var(--input-placeholder-color);
   --select-table-icon-color-default: var(--select-icon-color-default);
   --select-table-icon-color-focused: var(--select-icon-color-focused);
@@ -68,9 +77,11 @@
   --select-icon-size-large: 2rem;
 
   --select-primary-color-placeholder: var(--input-placeholder-color);
+  --select-primary-color-surface: var(--input-surface-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-text-readonly: var(--color-label-strong);
   --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);
@@ -82,7 +93,15 @@
   );
   --select-primary-color-surface-disabled: var(--input-surface-disabled-color);
   --select-secondary-color-text: var(--color-label-standard);
+  --select-secondary-color-text-disabled: var(--color-label-disabled);
+  --select-secondary-color-text-readonly: var(
+    --select-primary-color-text-readonly
+  );
   --select-secondary-color-placeholder: var(--color-label-alternative);
+  --select-secondary-color-placeholder-disabled: var(--color-label-disabled);
+  --select-secondary-color-placeholder-readonly: var(
+    --select-secondary-color-placeholder-disabled
+  );
   --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);
@@ -94,8 +113,10 @@
 
   /* Multi select chip */
   --select-multiple-chip-gap: var(--spacing-gap-2);
+  --select-multiple-tag-label-gap: var(--spacing-gap-1);
   --select-multiple-chip-padding-inline: var(--spacing-padding-4);
   --select-multiple-chip-padding-block: 0px;
+  --select-multiple-chip-removable-padding-right: var(--spacing-padding-2);
   --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);
@@ -104,9 +125,10 @@
   --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-border-color: transparent;
   --select-multiple-chip-remove-color: var(--color-label-strong);
   --select-multiple-chip-remove-hover-color: var(--color-label-strong);
+  --select-multiple-chip-remove-focus-outline-color: var(--color-border-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;
@@ -118,4 +140,7 @@
     --font-body-medium-line-height
   );
   --select-multiple-chip-summary-font-weight: 400;
+
+  /* Typography tokens */
+  --select-text-font-family: var(--font-body-medium-family);
 }

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

@@ -223,6 +223,7 @@ export interface SelectDropdownBehaviorProps {
  * @property {boolean} [block] block 여부
  * @property {boolean} [isOpen] dropdown open 여부
  * @property {boolean} [disabled] disabled 여부
+ * @property {boolean} [readOnly] readOnly 여부
  * @property {SelectTriggerButtonType} [buttonType] button type
  * @property {FormFieldWidth} [width] width preset 옵션
  * @property {SelectDropdownOption[]} [options] dropdown option 리스트
@@ -255,6 +256,7 @@ export type SelectDefaultComponentProps = SelectTriggerDefaultProps &
  * @property {boolean} [block] block 여부
  * @property {boolean} [isOpen] dropdown open 여부
  * @property {boolean} [disabled] disabled 여부
+ * @property {boolean} [readOnly] readOnly 여부
  * @property {FormFieldWidth} [width] width preset 옵션
  * @property {SelectDropdownOption[]} [options] dropdown option 리스트
  * @property {string[]} [selectedOptionIds] 선택된 option id 리스트

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

@@ -17,6 +17,7 @@ import type { SelectMultipleTag } from "./multiple";
  * @property {boolean} [block] block 여부
  * @property {boolean} [multiple] multi select 여부
  * @property {boolean} [disabled] disabled 여부
+ * @property {boolean} [readOnly] readOnly 여부
  * @property {ElementType} [as] polymorphic element
  * @property {SelectTriggerButtonType} [buttonType] button type
  * @property {ReactNode} children 콘텐츠
@@ -59,6 +60,10 @@ export interface SelectTriggerBaseProps extends HTMLAttributes<HTMLElement> {
    * disabled 여부
    */
   disabled?: boolean;
+  /**
+   * readOnly 여부
+   */
+  readOnly?: boolean;
   /**
    * polymorphic element
    */
@@ -120,6 +125,10 @@ export interface SelectTriggerDefaultProps extends HTMLAttributes<HTMLElement> {
    * disabled 여부
    */
   disabled?: boolean;
+  /**
+   * readOnly 여부
+   */
+  readOnly?: boolean;
   /**
    * button type
    */
@@ -176,6 +185,10 @@ export interface SelectTriggerMultipleProps extends HTMLAttributes<HTMLElement>
    * disabled 여부
    */
   disabled?: boolean;
+  /**
+   * readOnly 여부
+   */
+  readOnly?: boolean;
 }
 
 /**