@uniai-fe/uds-primitives 0.3.19 → 0.3.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/dist/styles.css +171 -87
  2. package/package.json +1 -1
  3. package/src/components/dropdown/styles/dropdown.scss +44 -23
  4. package/src/components/dropdown/styles/variables.scss +25 -0
  5. package/src/components/dropdown/types/base.ts +2 -2
  6. package/src/components/select/hooks/interaction.ts +5 -5
  7. package/src/components/select/img/chevron/primary/xsmall.svg +3 -0
  8. package/src/components/select/markup/Default.tsx +183 -212
  9. package/src/components/select/markup/foundation/Base.tsx +16 -4
  10. package/src/components/select/markup/foundation/Icon.tsx +9 -3
  11. package/src/components/select/markup/foundation/Selected.tsx +115 -11
  12. package/src/components/select/markup/multiple/Multiple.tsx +63 -135
  13. package/src/components/select/styles/select.scss +128 -72
  14. package/src/components/select/styles/variables.scss +11 -0
  15. package/src/components/select/types/base.ts +3 -2
  16. package/src/components/select/types/icon.ts +34 -3
  17. package/src/components/select/types/interaction.ts +1 -1
  18. package/src/components/select/types/option.ts +0 -80
  19. package/src/components/select/types/props.ts +167 -92
  20. package/src/components/select/types/trigger.ts +52 -1
package/src/components/dropdown/styles/dropdown.scss CHANGED
@@ -1,39 +1,60 @@
1
1
  .dropdown-panel {
2
2
  display: flex;
3
3
  flex-direction: column;
4
- gap: var(--dropdown-panel-gap);
5
- padding: var(--dropdown-panel-padding);
6
- border-radius: var(--dropdown-panel-radius);
4
+ gap: var(--dropdown-panel-gap-selected);
5
+ padding: var(--dropdown-panel-padding-selected);
6
+ border-radius: var(--dropdown-panel-radius-selected);
7
7
  border: 1px solid var(--dropdown-panel-border-color);
8
8
  background-color: var(--dropdown-panel-background);
9
- box-shadow: var(--dropdown-panel-shadow);
9
+ box-shadow: var(--dropdown-panel-shadow-selected);
10
10
  max-height: var(--dropdown-panel-max-height);
11
11
  overflow-y: auto;
12
12
  }
13
13
 
14
+ .dropdown-panel-xsmall {
15
+ --dropdown-option-height-selected: var(--dropdown-option-height-xsmall);
16
+ --dropdown-text-size-selected: var(--dropdown-text-xsmall-size);
17
+ --dropdown-text-line-height-selected: var(--dropdown-text-xsmall-line-height);
18
+ --dropdown-text-letter-spacing-selected: var(
19
+ --dropdown-text-xsmall-letter-spacing
20
+ );
21
+ --dropdown-option-padding-inline-selected: var(
22
+ --dropdown-option-padding-inline-xsmall
23
+ );
24
+ --dropdown-option-padding-block-selected: var(
25
+ --dropdown-option-padding-block-xsmall
26
+ );
27
+ --dropdown-option-radius-selected: var(--dropdown-option-radius-xsmall);
28
+ --dropdown-panel-padding-selected: var(--dropdown-panel-padding-xsmall);
29
+ --dropdown-panel-gap-selected: var(--dropdown-panel-gap-xsmall);
30
+ --dropdown-panel-radius-selected: var(--dropdown-panel-radius-xsmall);
31
+ --dropdown-panel-shadow-selected: var(--dropdown-panel-shadow-xsmall);
32
+ --dropdown-text-weight-selected: var(--dropdown-text-weight-selected-xsmall);
33
+ }
34
+
14
35
  .dropdown-panel-small {
15
- --dropdown-option-height-current: var(--dropdown-option-height-small);
16
- --dropdown-text-size-current: var(--dropdown-text-small-size);
17
- --dropdown-text-line-height-current: var(--dropdown-text-small-line-height);
18
- --dropdown-text-letter-spacing-current: var(
36
+ --dropdown-option-height-selected: var(--dropdown-option-height-small);
37
+ --dropdown-text-size-selected: var(--dropdown-text-small-size);
38
+ --dropdown-text-line-height-selected: var(--dropdown-text-small-line-height);
39
+ --dropdown-text-letter-spacing-selected: var(
19
40
  --dropdown-text-small-letter-spacing
20
41
  );
21
42
  }
22
43
 
23
44
  .dropdown-panel-medium {
24
- --dropdown-option-height-current: var(--dropdown-option-height-medium);
25
- --dropdown-text-size-current: var(--dropdown-text-medium-size);
26
- --dropdown-text-line-height-current: var(--dropdown-text-medium-line-height);
27
- --dropdown-text-letter-spacing-current: var(
45
+ --dropdown-option-height-selected: var(--dropdown-option-height-medium);
46
+ --dropdown-text-size-selected: var(--dropdown-text-medium-size);
47
+ --dropdown-text-line-height-selected: var(--dropdown-text-medium-line-height);
48
+ --dropdown-text-letter-spacing-selected: var(
28
49
  --dropdown-text-medium-letter-spacing
29
50
  );
30
51
  }
31
52
 
32
53
  .dropdown-panel-large {
33
- --dropdown-option-height-current: var(--dropdown-option-height-large);
34
- --dropdown-text-size-current: var(--dropdown-text-large-size);
35
- --dropdown-text-line-height-current: var(--dropdown-text-large-line-height);
36
- --dropdown-text-letter-spacing-current: var(
54
+ --dropdown-option-height-selected: var(--dropdown-option-height-large);
55
+ --dropdown-text-size-selected: var(--dropdown-text-large-size);
56
+ --dropdown-text-line-height-selected: var(--dropdown-text-large-line-height);
57
+ --dropdown-text-letter-spacing-selected: var(
37
58
  --dropdown-text-large-letter-spacing
38
59
  );
39
60
  }
@@ -61,12 +82,12 @@
61
82
  gap: var(--dropdown-option-gap-inline);
62
83
  width: 100%;
63
84
  min-height: var(
64
- --dropdown-option-height-current,
85
+ --dropdown-option-height-selected,
65
86
  var(--dropdown-option-height-medium)
66
87
  );
67
- padding: var(--dropdown-option-padding-block)
68
- var(--dropdown-option-padding-inline);
69
- border-radius: var(--dropdown-option-radius);
88
+ padding: var(--dropdown-option-padding-block-selected)
89
+ var(--dropdown-option-padding-inline-selected);
90
+ border-radius: var(--dropdown-option-radius-selected);
70
91
  background-color: transparent;
71
92
  color: var(--dropdown-option-color);
72
93
  cursor: pointer;
@@ -132,15 +153,15 @@
132
153
  min-width: 0;
133
154
  color: inherit;
134
155
  font-size: var(
135
- --dropdown-text-size-current,
156
+ --dropdown-text-size-selected,
136
157
  var(--dropdown-text-medium-size)
137
158
  );
138
159
  line-height: var(
139
- --dropdown-text-line-height-current,
160
+ --dropdown-text-line-height-selected,
140
161
  var(--dropdown-text-medium-line-height)
141
162
  );
142
163
  letter-spacing: var(
143
- --dropdown-text-letter-spacing-current,
164
+ --dropdown-text-letter-spacing-selected,
144
165
  var(--dropdown-text-medium-letter-spacing)
145
166
  );
146
167
  font-weight: var(--dropdown-text-weight);
package/src/components/dropdown/styles/variables.scss CHANGED
@@ -6,11 +6,27 @@
6
6
  --dropdown-panel-padding: var(--spacing-padding-3);
7
7
  --dropdown-panel-gap: var(--spacing-gap-2);
8
8
  --dropdown-panel-max-height: 32rem;
9
+ --dropdown-panel-radius-selected: var(--dropdown-panel-radius);
10
+ --dropdown-panel-shadow-selected: var(--dropdown-panel-shadow);
11
+ --dropdown-panel-padding-selected: var(--dropdown-panel-padding);
12
+ --dropdown-panel-gap-selected: var(--dropdown-panel-gap);
13
+ --dropdown-panel-radius-xsmall: var(--theme-radius-medium-2);
14
+ --dropdown-panel-shadow-xsmall: 2px 2px 8px rgba(0, 0, 0, 0.05);
15
+ --dropdown-panel-padding-xsmall: var(--spacing-padding-4)
16
+ var(--spacing-padding-3);
17
+ --dropdown-panel-gap-xsmall: var(--spacing-gap-2);
9
18
 
10
19
  --dropdown-option-radius: var(--theme-radius-medium-1);
11
20
  --dropdown-option-gap-inline: var(--spacing-gap-3);
12
21
  --dropdown-option-padding-inline: var(--spacing-padding-6);
13
22
  --dropdown-option-padding-block: var(--spacing-padding-2);
23
+ --dropdown-option-radius-selected: var(--dropdown-option-radius);
24
+ --dropdown-option-padding-inline-selected: var(
25
+ --dropdown-option-padding-inline
26
+ );
27
+ --dropdown-option-padding-block-selected: var(
28
+ --dropdown-option-padding-block
29
+ );
14
30
  --dropdown-option-color: var(--color-label-standard);
15
31
  --dropdown-option-color-hover: var(--color-label-strong);
16
32
  --dropdown-option-color-selected: var(--color-primary-default);
@@ -22,6 +38,9 @@
22
38
  --dropdown-text-small-size: 15px;
23
39
  --dropdown-text-small-line-height: 24px;
24
40
  --dropdown-text-small-letter-spacing: 0;
41
+ --dropdown-text-xsmall-size: 12px;
42
+ --dropdown-text-xsmall-line-height: 18px;
43
+ --dropdown-text-xsmall-letter-spacing: 0;
25
44
  --dropdown-text-medium-size: 16px;
26
45
  --dropdown-text-medium-line-height: 24px;
27
46
  --dropdown-text-medium-letter-spacing: 0;
@@ -34,7 +53,13 @@
34
53
  --dropdown-description-size: 14px;
35
54
  --dropdown-description-line-height: 22px;
36
55
 
56
+ --dropdown-option-height-selected: var(--dropdown-option-height-medium);
57
+ --dropdown-option-height-xsmall: 24px;
37
58
  --dropdown-option-height-small: var(--theme-size-medium-1, 40px);
38
59
  --dropdown-option-height-medium: var(--theme-size-medium-2, 48px);
39
60
  --dropdown-option-height-large: var(--theme-size-medium-3, 56px);
61
+ --dropdown-option-padding-inline-xsmall: var(--spacing-padding-3);
62
+ --dropdown-option-padding-block-xsmall: 0px;
63
+ --dropdown-option-radius-xsmall: 4px;
64
+ --dropdown-text-weight-selected-xsmall: var(--dropdown-text-weight);
40
65
  }
package/src/components/dropdown/types/base.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  /**
2
2
  * Dropdown size scale
3
- * @typedef {"small" | "medium" | "large"} DropdownSize
3
+ * @typedef {"xsmall" | "small" | "medium" | "large"} DropdownSize
4
4
  */
5
- export type DropdownSize = "small" | "medium" | "large";
5
+ export type DropdownSize = "xsmall" | "small" | "medium" | "large";
6
6
 
7
7
  /**
8
8
  * Dropdown panel width 옵션
package/src/components/select/hooks/interaction.ts CHANGED
@@ -13,7 +13,7 @@ import type {
13
13
  * @param {UseSelectDropdownOpenStateParams} params open 제어 옵션
14
14
  * @param {boolean} [params.open] 외부 제어형 open 상태
15
15
  * @param {boolean} [params.defaultOpen] 비제어형 초기 open 상태
16
- * @param {(open: boolean) => void} [params.onOpenChange] open 상태 변경 콜백
16
+ * @param {(open: boolean) => void} [params.onOpen] open 상태 변경 콜백
17
17
  * @returns {{
18
18
  * open: boolean;
19
19
  * setOpen: (next: boolean) => void;
@@ -23,13 +23,13 @@ import type {
23
23
  * const { open, setOpen } = useSelectDropdownOpenState({
24
24
  * open: controlledOpen,
25
25
  * defaultOpen: false,
26
- * onOpenChange: onOpenChangeHandler,
26
+ * onOpen: onOpenHandler,
27
27
  * });
28
28
  */
29
29
  export const useSelectDropdownOpenState = ({
30
30
  open,
31
31
  defaultOpen,
32
- onOpenChange,
32
+ onOpen,
33
33
  }: UseSelectDropdownOpenStateParams): UseSelectDropdownOpenStateReturn => {
34
34
  // 1) 제어형/비제어형 분기 기준을 먼저 확정한다.
35
35
  const isControlled = useMemo(() => typeof open === "boolean", [open]);
@@ -53,9 +53,9 @@ export const useSelectDropdownOpenState = ({
53
53
  (nextOpen: boolean) => {
54
54
  if (!isControlled) setUncontrolledOpen(nextOpen);
55
55
 
56
- onOpenChange?.(nextOpen);
56
+ onOpen?.(nextOpen);
57
57
  },
58
- [isControlled, onOpenChange],
58
+ [isControlled, onOpen],
59
59
  );
60
60
 
61
61
  return { open: resolvedOpen, setOpen, isControlled };
package/src/components/select/img/chevron/primary/xsmall.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M4.17139 6L6.99981 8.82843L9.82824 6" stroke="#BCBEC2" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
3
+ </svg>