@croquiscom/pds 5.4.0 → 5.5.0

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 (35) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/assets/images/FastshipBasicKor.svg +18 -13
  3. package/assets/images/FastshipSimpleKor.svg +13 -18
  4. package/dist/components/category-selector/CategorySelector.d.ts +56 -0
  5. package/dist/components/category-selector/CategorySelector.stories.d.ts +9 -0
  6. package/dist/components/category-selector/ChipsDropdown.d.ts +28 -0
  7. package/dist/components/category-selector/List.d.ts +14 -0
  8. package/dist/components/category-selector/ListItem.d.ts +13 -0
  9. package/dist/components/category-selector/index.d.ts +1 -0
  10. package/dist/components/category-selector/styles.d.ts +6 -0
  11. package/dist/components/chip/Chip.d.ts +8 -0
  12. package/dist/components/chip/Chip.stories.d.ts +7 -0
  13. package/dist/components/chip/index.d.ts +1 -0
  14. package/dist/components/chip/styles.d.ts +6 -0
  15. package/dist/components/popover/Popover.d.ts +5 -0
  16. package/dist/index.es.js +1 -1
  17. package/dist/index.es.js.map +1 -1
  18. package/dist/index.js +2 -2
  19. package/dist/index.js.map +1 -1
  20. package/dist/locales/en.d.ts +5 -0
  21. package/dist/locales/ja.d.ts +5 -0
  22. package/dist/locales/ko.d.ts +5 -0
  23. package/locales/en.esm.js +5 -0
  24. package/locales/en.esm.js.map +1 -1
  25. package/locales/en.js +5 -0
  26. package/locales/en.js.map +1 -1
  27. package/locales/ja.esm.js +5 -0
  28. package/locales/ja.esm.js.map +1 -1
  29. package/locales/ja.js +5 -0
  30. package/locales/ja.js.map +1 -1
  31. package/locales/ko.esm.js +5 -0
  32. package/locales/ko.esm.js.map +1 -1
  33. package/locales/ko.js +5 -0
  34. package/locales/ko.js.map +1 -1
  35. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @croquiscom/pds
2
2
 
3
+ ## 5.5.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 672f21d: CategorySelector, Chip 추가 및 Popover.padding 추가
8
+
9
+ ## 5.4.1
10
+
11
+ ### Patch Changes
12
+
13
+ - d12c008: Fastship Kor 로고 이름 뒤바뀐 것 수정
14
+
3
15
  ## 5.4.0
4
16
 
5
17
  ### Minor Changes
@@ -1,18 +1,23 @@
1
- <svg width="54" height="16" viewBox="0 0 54 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <g clip-path="url(#clip0_24600_4160)">
3
- <path d="M6.07865 3.15626H12.3004C12.6015 3.15626 12.8501 2.98133 12.9433 2.68159L13.4726 1.00906C13.5765 0.678394 13.3687 0.399994 13.0269 0.399994H6.80508C6.50401 0.399994 6.25544 0.574927 6.16222 0.87466L5.63294 2.54719C5.52901 2.87786 5.73687 3.15626 6.07865 3.15626Z" fill="#4B7CFB"/>
4
- <path d="M0.426864 6.88319C0.322936 7.21386 0.530793 7.49226 0.872579 7.49226H10.9322C11.2333 7.49226 11.4819 7.31733 11.5751 7.01759L12.1044 5.34506C12.2083 5.01439 12.0004 4.73599 11.6587 4.73599H1.59901C1.29794 4.73599 1.04936 4.91093 0.95615 5.21066L0.426864 6.88319Z" fill="#4B7CFB"/>
5
- <path d="M19.1747 3.18719L21.6122 8.19413H21.6133C21.7162 8.41066 21.7376 8.66879 21.6647 8.89599L20.7004 11.9317C20.6072 12.2304 20.3587 12.4064 20.0576 12.4064H18.4194C18.3358 12.4064 18.2629 12.4587 18.2426 12.5408C17.6201 14.3168 16.0644 15.5659 14.7165 15.5659C13.3686 15.5659 12.6326 14.3989 13.0472 12.7061C13.089 12.5408 12.9851 12.4064 12.819 12.4064H8.56758C8.48401 12.4064 8.41115 12.4587 8.39079 12.5408C7.76829 14.3168 6.21258 15.5659 4.86472 15.5659C3.51687 15.5659 2.78079 14.3989 3.19544 12.7061C3.23722 12.5408 3.13329 12.4064 2.96722 12.4064H1.86794C1.52615 12.4064 1.31829 12.128 1.42222 11.7973L2.11651 9.57759C2.20972 9.27893 2.45829 9.10293 2.75936 9.10293H11.7497C12.2276 9.10293 12.6208 8.82453 12.7665 8.35946L14.4358 3.08373C14.529 2.78506 14.7776 2.60906 15.0787 2.60906H18.2522C18.6562 2.60906 18.9979 2.82559 19.1747 3.18719Z" fill="#4B7CFB"/>
6
- <path d="M37.9815 0.612274H35.9286V15.3589H37.9815V7.78561H39.4826V6.06827H37.9815V0.612274Z" fill="#4B7CFB"/>
7
- <path d="M49.8133 3.55519H41.6769V7.63625H52.1651V6.08532H43.7415V5.03145H51.8951V0.955719H41.6533V2.55252H49.8133V3.55519Z" fill="#4B7CFB"/>
8
- <path fill-rule="evenodd" clip-rule="evenodd" d="M27.5276 5.36959H28.4704V1.94666H30.1558V11.9477H25.8144V1.94666H27.5276V5.36959ZM27.5276 10.2645H28.4704V7.00159H27.5276V10.2645Z" fill="#4B7CFB"/>
9
- <path fill-rule="evenodd" clip-rule="evenodd" d="M33.3979 5.36959H32.4315V1.94666H30.7579V11.9477H35.094V1.94666H33.3979V5.36959ZM33.3979 10.2645H32.4315V7.00159H33.3979V10.2645Z" fill="#4B7CFB"/>
10
- <path d="M43.7758 11.0539H41.6994V15.1019H52.2176V13.4357H43.7758V11.0539Z" fill="#4B7CFB"/>
11
- <path d="M39.9915 8.58133H53.5279V10.2411H39.9915V8.58133Z" fill="#4B7CFB"/>
1
+ <svg width="83" height="16" viewBox="0 0 83 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g clip-path="url(#clip0_24600_4159)">
3
+ <path d="M6.09841 3.15626H12.3418C12.644 3.15626 12.8934 2.98133 12.9869 2.68159L13.5181 1.00906C13.6224 0.678394 13.4138 0.399994 13.0708 0.399994H6.82737C6.52525 0.399994 6.27581 0.574927 6.18227 0.87466L5.65114 2.54719C5.54685 2.87786 5.75543 3.15626 6.09841 3.15626Z" fill="#4B7CFB"/>
4
+ <path d="M0.426958 6.88319C0.322668 7.21386 0.531248 7.49226 0.874223 7.49226H10.9689C11.271 7.49226 11.5204 7.31733 11.614 7.01759L12.1451 5.34506C12.2494 5.01439 12.0408 4.73599 11.6978 4.73599H1.60318C1.30106 4.73599 1.05162 4.91093 0.958085 5.21066L0.426958 6.88319Z" fill="#4B7CFB"/>
5
+ <path d="M19.24 3.18719L21.686 8.19413H21.6871C21.7903 8.41066 21.8118 8.66879 21.7387 8.89599L20.7711 11.9317C20.6775 12.2304 20.4281 12.4064 20.126 12.4064H18.4821C18.3982 12.4064 18.3251 12.4587 18.3047 12.5408C17.68 14.3168 16.1189 15.5659 14.7663 15.5659C13.4138 15.5659 12.6751 14.3989 13.0912 12.7061C13.1332 12.5408 13.0289 12.4064 12.8622 12.4064H8.596C8.51214 12.4064 8.43902 12.4587 8.4186 12.5408C7.79393 14.3168 6.2328 15.5659 4.88026 15.5659C3.52771 15.5659 2.78908 14.3989 3.20516 12.7061C3.24709 12.5408 3.1428 12.4064 2.97615 12.4064H1.87304C1.53007 12.4064 1.32149 12.128 1.42578 11.7973L2.12248 9.57759C2.21602 9.27893 2.46546 9.10293 2.76757 9.10293H11.7892C12.2687 9.10293 12.6633 8.82453 12.8095 8.35946L14.4846 3.08373C14.5782 2.78506 14.8276 2.60906 15.1297 2.60906H18.3143C18.7197 2.60906 19.0626 2.82559 19.24 3.18719Z" fill="#4B7CFB"/>
6
+ <path d="M59.4466 3.7952C59.0961 4.10773 58.5435 4.3712 57.7877 4.5856C57.0318 4.79893 56.0846 4.9312 54.946 4.98027L55.5169 6.50347C56.863 6.4352 58.007 6.23893 58.9477 5.9168C59.8885 5.59467 60.5992 5.16693 61.0798 4.63467C61.0919 4.6215 61.1029 4.60765 61.1139 4.59389L61.1258 4.57908L61.1347 4.56827L61.14 4.56213L61.1591 4.5856C61.1718 4.60124 61.1844 4.61689 61.198 4.63253C61.6808 5.16693 62.3925 5.59573 63.3333 5.91787C64.2741 6.24 65.4116 6.43627 66.7469 6.50453L67.3587 4.98133C66.2008 4.93227 65.2439 4.8 64.488 4.58667C63.7322 4.37333 63.1774 4.10987 62.8237 3.79627C62.6452 3.6384 62.513 3.472 62.4248 3.29813H66.6201V1.7696H62.1711V0.606934H60.1057V1.7696H55.6857V3.29813H59.8455C59.7573 3.472 59.6251 3.6384 59.4488 3.79627L59.4466 3.7952Z" fill="#4B7CFB"/>
7
+ <path d="M41.8205 3.55519H49.9852V2.55252H41.7968V0.955719H52.0743V5.03145H43.8923V6.08532H52.3452V7.63625H41.8205V3.55519Z" fill="#4B7CFB"/>
8
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M28.5681 5.36959H27.622V1.94666H25.9028V11.9477H30.2593V1.94666H28.5681V5.36959ZM28.5681 10.2645H27.622V7.00159H28.5681V10.2645Z" fill="#4B7CFB"/>
9
+ <path d="M38.1123 6.06827H39.6186V7.7856H38.1123V15.3589H36.0523V0.612274H38.1123V6.06827Z" fill="#4B7CFB"/>
10
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M32.5429 5.36959H33.5127V1.94666H35.2147V11.9477H30.8636V1.94666H32.5429V5.36959ZM32.5429 10.2645H33.5127V7.00159H32.5429V10.2645Z" fill="#4B7CFB"/>
11
+ <path d="M53.7128 8.58133H40.1293V10.2411H53.7128V8.58133Z" fill="#4B7CFB"/>
12
+ <path d="M43.9267 11.0539H41.843V15.1019H52.3979V13.4357H43.9267V11.0539Z" fill="#4B7CFB"/>
13
+ <path d="M60.1164 8.4032H54.4149V6.89813H67.9006V8.4032H62.1764V9.3312H66.2792V12.9259H58.0038V13.7333H66.6652V15.2565H55.961V11.5413H64.2246V10.8085H55.9502V9.3312H60.1164V8.4032Z" fill="#4B7CFB"/>
14
+ <path d="M80.5186 0.612274V3.48587H82.5152V5.15734H80.5186V8.12267H78.4296V0.612274H80.5186Z" fill="#4B7CFB"/>
15
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M74.2859 1.28214H76.3631V7.71093H69.1736V1.28214H71.2389V3.02827H74.2859V1.28214ZM71.2389 6.09067H74.2859V4.5792H71.2389V6.09067Z" fill="#4B7CFB"/>
16
+ <path d="M80.5186 12.6741H72.7398V13.6309H80.9454V15.2565H70.6852V11.1915H78.4403V10.2645H70.6626V8.66666H80.5186V12.6741Z" fill="#4B7CFB"/>
12
17
  </g>
13
18
  <defs>
14
- <clipPath id="clip0_24600_4160">
15
- <rect width="54" height="16" fill="white"/>
19
+ <clipPath id="clip0_24600_4159">
20
+ <rect width="83" height="16" fill="white"/>
16
21
  </clipPath>
17
22
  </defs>
18
23
  </svg>
@@ -1,23 +1,18 @@
1
- <svg width="83" height="16" viewBox="0 0 83 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <g clip-path="url(#clip0_24600_4159)">
3
- <path d="M6.09841 3.15626H12.3418C12.644 3.15626 12.8934 2.98133 12.9869 2.68159L13.5181 1.00906C13.6224 0.678394 13.4138 0.399994 13.0708 0.399994H6.82737C6.52525 0.399994 6.27581 0.574927 6.18227 0.87466L5.65114 2.54719C5.54685 2.87786 5.75543 3.15626 6.09841 3.15626Z" fill="#4B7CFB"/>
4
- <path d="M0.426958 6.88319C0.322668 7.21386 0.531248 7.49226 0.874223 7.49226H10.9689C11.271 7.49226 11.5204 7.31733 11.614 7.01759L12.1451 5.34506C12.2494 5.01439 12.0408 4.73599 11.6978 4.73599H1.60318C1.30106 4.73599 1.05162 4.91093 0.958085 5.21066L0.426958 6.88319Z" fill="#4B7CFB"/>
5
- <path d="M19.24 3.18719L21.686 8.19413H21.6871C21.7903 8.41066 21.8118 8.66879 21.7387 8.89599L20.7711 11.9317C20.6775 12.2304 20.4281 12.4064 20.126 12.4064H18.4821C18.3982 12.4064 18.3251 12.4587 18.3047 12.5408C17.68 14.3168 16.1189 15.5659 14.7663 15.5659C13.4138 15.5659 12.6751 14.3989 13.0912 12.7061C13.1332 12.5408 13.0289 12.4064 12.8622 12.4064H8.596C8.51214 12.4064 8.43902 12.4587 8.4186 12.5408C7.79393 14.3168 6.2328 15.5659 4.88026 15.5659C3.52771 15.5659 2.78908 14.3989 3.20516 12.7061C3.24709 12.5408 3.1428 12.4064 2.97615 12.4064H1.87304C1.53007 12.4064 1.32149 12.128 1.42578 11.7973L2.12248 9.57759C2.21602 9.27893 2.46546 9.10293 2.76757 9.10293H11.7892C12.2687 9.10293 12.6633 8.82453 12.8095 8.35946L14.4846 3.08373C14.5782 2.78506 14.8276 2.60906 15.1297 2.60906H18.3143C18.7197 2.60906 19.0626 2.82559 19.24 3.18719Z" fill="#4B7CFB"/>
6
- <path d="M59.4466 3.7952C59.0961 4.10773 58.5435 4.3712 57.7877 4.5856C57.0318 4.79893 56.0846 4.9312 54.946 4.98027L55.5169 6.50347C56.863 6.4352 58.007 6.23893 58.9477 5.9168C59.8885 5.59467 60.5992 5.16693 61.0798 4.63467C61.0919 4.6215 61.1029 4.60765 61.1139 4.59389L61.1258 4.57908L61.1347 4.56827L61.14 4.56213L61.1591 4.5856C61.1718 4.60124 61.1844 4.61689 61.198 4.63253C61.6808 5.16693 62.3925 5.59573 63.3333 5.91787C64.2741 6.24 65.4116 6.43627 66.7469 6.50453L67.3587 4.98133C66.2008 4.93227 65.2439 4.8 64.488 4.58667C63.7322 4.37333 63.1774 4.10987 62.8237 3.79627C62.6452 3.6384 62.513 3.472 62.4248 3.29813H66.6201V1.7696H62.1711V0.606934H60.1057V1.7696H55.6857V3.29813H59.8455C59.7573 3.472 59.6251 3.6384 59.4488 3.79627L59.4466 3.7952Z" fill="#4B7CFB"/>
7
- <path d="M41.8205 3.55519H49.9852V2.55252H41.7968V0.955719H52.0743V5.03145H43.8923V6.08532H52.3452V7.63625H41.8205V3.55519Z" fill="#4B7CFB"/>
8
- <path fill-rule="evenodd" clip-rule="evenodd" d="M28.5681 5.36959H27.622V1.94666H25.9028V11.9477H30.2593V1.94666H28.5681V5.36959ZM28.5681 10.2645H27.622V7.00159H28.5681V10.2645Z" fill="#4B7CFB"/>
9
- <path d="M38.1123 6.06827H39.6186V7.7856H38.1123V15.3589H36.0523V0.612274H38.1123V6.06827Z" fill="#4B7CFB"/>
10
- <path fill-rule="evenodd" clip-rule="evenodd" d="M32.5429 5.36959H33.5127V1.94666H35.2147V11.9477H30.8636V1.94666H32.5429V5.36959ZM32.5429 10.2645H33.5127V7.00159H32.5429V10.2645Z" fill="#4B7CFB"/>
11
- <path d="M53.7128 8.58133H40.1293V10.2411H53.7128V8.58133Z" fill="#4B7CFB"/>
12
- <path d="M43.9267 11.0539H41.843V15.1019H52.3979V13.4357H43.9267V11.0539Z" fill="#4B7CFB"/>
13
- <path d="M60.1164 8.4032H54.4149V6.89813H67.9006V8.4032H62.1764V9.3312H66.2792V12.9259H58.0038V13.7333H66.6652V15.2565H55.961V11.5413H64.2246V10.8085H55.9502V9.3312H60.1164V8.4032Z" fill="#4B7CFB"/>
14
- <path d="M80.5186 0.612274V3.48587H82.5152V5.15734H80.5186V8.12267H78.4296V0.612274H80.5186Z" fill="#4B7CFB"/>
15
- <path fill-rule="evenodd" clip-rule="evenodd" d="M74.2859 1.28214H76.3631V7.71093H69.1736V1.28214H71.2389V3.02827H74.2859V1.28214ZM71.2389 6.09067H74.2859V4.5792H71.2389V6.09067Z" fill="#4B7CFB"/>
16
- <path d="M80.5186 12.6741H72.7398V13.6309H80.9454V15.2565H70.6852V11.1915H78.4403V10.2645H70.6626V8.66666H80.5186V12.6741Z" fill="#4B7CFB"/>
1
+ <svg width="54" height="16" viewBox="0 0 54 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g clip-path="url(#clip0_24600_4160)">
3
+ <path d="M6.07865 3.15626H12.3004C12.6015 3.15626 12.8501 2.98133 12.9433 2.68159L13.4726 1.00906C13.5765 0.678394 13.3687 0.399994 13.0269 0.399994H6.80508C6.50401 0.399994 6.25544 0.574927 6.16222 0.87466L5.63294 2.54719C5.52901 2.87786 5.73687 3.15626 6.07865 3.15626Z" fill="#4B7CFB"/>
4
+ <path d="M0.426864 6.88319C0.322936 7.21386 0.530793 7.49226 0.872579 7.49226H10.9322C11.2333 7.49226 11.4819 7.31733 11.5751 7.01759L12.1044 5.34506C12.2083 5.01439 12.0004 4.73599 11.6587 4.73599H1.59901C1.29794 4.73599 1.04936 4.91093 0.95615 5.21066L0.426864 6.88319Z" fill="#4B7CFB"/>
5
+ <path d="M19.1747 3.18719L21.6122 8.19413H21.6133C21.7162 8.41066 21.7376 8.66879 21.6647 8.89599L20.7004 11.9317C20.6072 12.2304 20.3587 12.4064 20.0576 12.4064H18.4194C18.3358 12.4064 18.2629 12.4587 18.2426 12.5408C17.6201 14.3168 16.0644 15.5659 14.7165 15.5659C13.3686 15.5659 12.6326 14.3989 13.0472 12.7061C13.089 12.5408 12.9851 12.4064 12.819 12.4064H8.56758C8.48401 12.4064 8.41115 12.4587 8.39079 12.5408C7.76829 14.3168 6.21258 15.5659 4.86472 15.5659C3.51687 15.5659 2.78079 14.3989 3.19544 12.7061C3.23722 12.5408 3.13329 12.4064 2.96722 12.4064H1.86794C1.52615 12.4064 1.31829 12.128 1.42222 11.7973L2.11651 9.57759C2.20972 9.27893 2.45829 9.10293 2.75936 9.10293H11.7497C12.2276 9.10293 12.6208 8.82453 12.7665 8.35946L14.4358 3.08373C14.529 2.78506 14.7776 2.60906 15.0787 2.60906H18.2522C18.6562 2.60906 18.9979 2.82559 19.1747 3.18719Z" fill="#4B7CFB"/>
6
+ <path d="M37.9815 0.612274H35.9286V15.3589H37.9815V7.78561H39.4826V6.06827H37.9815V0.612274Z" fill="#4B7CFB"/>
7
+ <path d="M49.8133 3.55519H41.6769V7.63625H52.1651V6.08532H43.7415V5.03145H51.8951V0.955719H41.6533V2.55252H49.8133V3.55519Z" fill="#4B7CFB"/>
8
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M27.5276 5.36959H28.4704V1.94666H30.1558V11.9477H25.8144V1.94666H27.5276V5.36959ZM27.5276 10.2645H28.4704V7.00159H27.5276V10.2645Z" fill="#4B7CFB"/>
9
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M33.3979 5.36959H32.4315V1.94666H30.7579V11.9477H35.094V1.94666H33.3979V5.36959ZM33.3979 10.2645H32.4315V7.00159H33.3979V10.2645Z" fill="#4B7CFB"/>
10
+ <path d="M43.7758 11.0539H41.6994V15.1019H52.2176V13.4357H43.7758V11.0539Z" fill="#4B7CFB"/>
11
+ <path d="M39.9915 8.58133H53.5279V10.2411H39.9915V8.58133Z" fill="#4B7CFB"/>
17
12
  </g>
18
13
  <defs>
19
- <clipPath id="clip0_24600_4159">
20
- <rect width="83" height="16" fill="white"/>
14
+ <clipPath id="clip0_24600_4160">
15
+ <rect width="54" height="16" fill="white"/>
21
16
  </clipPath>
22
17
  </defs>
23
18
  </svg>
@@ -0,0 +1,56 @@
1
+ /// <reference types="react" />
2
+ export interface Category {
3
+ /**
4
+ * 루트 ~ 해당 카테고리 텍스트
5
+ * ex) 패션의류/아우터/코트/트렌치코트
6
+ * @see DropdownChip - label
7
+ */
8
+ label: string;
9
+ /**
10
+ * 해당 카테고리 텍스트
11
+ * ex) 트렌치코트
12
+ * @see ListItem - category.name
13
+ */
14
+ name: string;
15
+ key: string;
16
+ parentKey: string;
17
+ childrenKeys?: Array<string>;
18
+ level: number;
19
+ }
20
+ export interface CategorySelectorProps {
21
+ className?: string;
22
+ /**
23
+ * 레벨별 카테고리 데이터
24
+ * @see CategorySelector.stories - categories_by_levels
25
+ */
26
+ categoriesByLevels: Array<Array<Category>>;
27
+ selectedKeys: Array<string>;
28
+ /**
29
+ * 선택값 변경 이벤트
30
+ * @param selectedKeys 선택된 카테고리 키 리스트
31
+ * @param isLeaf selectedKeys의 리프 여부 (multiple == false 일 때만 내려감)
32
+ * @returns
33
+ */
34
+ onSelectedKeysChange: (selectedKeys: Array<string>, isLeaf?: boolean) => void;
35
+ /**
36
+ * 체크박스 사용여부
37
+ * true일 경우 멀티 셀렉트 가능
38
+ * @default false
39
+ */
40
+ multiple?: boolean;
41
+ /**
42
+ * @default false
43
+ */
44
+ disabled?: boolean;
45
+ /**
46
+ * 각 ListItem의 너비
47
+ * @default 240
48
+ */
49
+ width?: number;
50
+ /**
51
+ * 각 List의 높이
52
+ * @default 332
53
+ */
54
+ height?: number;
55
+ }
56
+ export declare const CategorySelector: ({ className, categoriesByLevels, selectedKeys, onSelectedKeysChange, multiple, disabled, width, height, }: CategorySelectorProps) => JSX.Element;
@@ -0,0 +1,9 @@
1
+ /// <reference types="react" />
2
+ import { ComponentMeta, ComponentStory } from '@storybook/react';
3
+ import { CategorySelector } from './CategorySelector';
4
+ declare const _default: ComponentMeta<({ className, categoriesByLevels, selectedKeys, onSelectedKeysChange, multiple, disabled, width, height, }: import("./CategorySelector").CategorySelectorProps) => JSX.Element>;
5
+ export default _default;
6
+ export declare const Base: any;
7
+ export declare const MultiSelectable: any;
8
+ export declare const Disabled: any;
9
+ export declare const WithDropdownChip: ComponentStory<typeof CategorySelector>;
@@ -0,0 +1,28 @@
1
+ import React, { PropsWithChildren } from 'react';
2
+ import { CSSValueWithLength } from '../../styles';
3
+ import { DropdownLabelProps } from '../dropdown/DropdownLabel';
4
+ import { InputSize } from '../input/types';
5
+ export interface ChipsDropdownOption<OptionValue> {
6
+ label: string;
7
+ value: OptionValue;
8
+ }
9
+ export interface ChipsDropdownProps<OptionValue> {
10
+ /**
11
+ * Input 너비를 지정할 수 있습니다.
12
+ * @default 240
13
+ */
14
+ width?: CSSValueWithLength;
15
+ /**
16
+ * 기본값으로 [ZIndexOrder](https://github.com/croquiscom/pds/blob/main/src/styles/zIndex.ts) 규칙을 적용합니다.
17
+ * @default 1030
18
+ */
19
+ zIndex?: number;
20
+ /** @default large */
21
+ size?: InputSize;
22
+ disabled?: boolean;
23
+ selectedOptions: Array<ChipsDropdownOption<OptionValue>>;
24
+ onOptionValuesChange?: (values: Array<OptionValue>) => void;
25
+ placeholder?: string;
26
+ status?: DropdownLabelProps['status'];
27
+ }
28
+ export declare const ChipsDropdown: <OptionValue extends string | number>({ children, width, zIndex, disabled, selectedOptions, onOptionValuesChange, placeholder, status, size: sizeProp, }: React.PropsWithChildren<ChipsDropdownProps<OptionValue>>) => JSX.Element;
@@ -0,0 +1,14 @@
1
+ /// <reference types="react" />
2
+ import { Category } from './CategorySelector';
3
+ export interface ListProps {
4
+ level: number;
5
+ categories: Array<Category>;
6
+ selectedKeys: Array<string>;
7
+ onSelect: (category: Category) => void;
8
+ onClick: (category: Category) => void;
9
+ isSelected: (category: Category) => boolean;
10
+ isIndeterminate: (category: Category) => boolean;
11
+ multiple?: boolean;
12
+ disabled?: boolean;
13
+ }
14
+ export declare const List: ({ level, categories, selectedKeys, onSelect, onClick, isSelected, isIndeterminate, multiple, disabled, }: ListProps) => JSX.Element;
@@ -0,0 +1,13 @@
1
+ /// <reference types="react" />
2
+ import { Category } from './CategorySelector';
3
+ export interface ListItemProps {
4
+ category: Category;
5
+ selectedKeys: Array<string>;
6
+ onSelect: (category: Category) => void;
7
+ onClick: (category: Category) => void;
8
+ isSelected: (category: Category) => boolean;
9
+ isIndeterminate: (category: Category) => boolean;
10
+ multiple?: boolean;
11
+ disabled?: boolean;
12
+ }
13
+ export declare const ListItem: ({ category, multiple, disabled, selectedKeys, onSelect, onClick, isSelected, isIndeterminate, }: ListItemProps) => JSX.Element;
@@ -0,0 +1 @@
1
+ export * from './CategorySelector';
@@ -0,0 +1,6 @@
1
+ import { InputSize } from '../input/types';
2
+ export declare const input_chip_base_css: import("@emotion/utils").SerializedStyles;
3
+ export declare const list_item_enabled_css: import("@emotion/utils").SerializedStyles;
4
+ export declare const list_item_selected_css: import("@emotion/utils").SerializedStyles;
5
+ export declare const list_item_disabled_css: import("@emotion/utils").SerializedStyles;
6
+ export declare const input_chip_size_css: Record<InputSize, string>;
@@ -0,0 +1,8 @@
1
+ import React, { ButtonHTMLAttributes } from 'react';
2
+ import { InputSize } from '../input/types';
3
+ export interface ChipProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
4
+ /** @default medium */
5
+ size?: InputSize;
6
+ onDelete: () => void;
7
+ }
8
+ export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLButtonElement>>;
@@ -0,0 +1,7 @@
1
+ import { ComponentMeta, ComponentStory } from '@storybook/react';
2
+ import React from 'react';
3
+ import { Chip } from './Chip';
4
+ declare const _default: ComponentMeta<React.ForwardRefExoticComponent<import("./Chip").ChipProps & React.RefAttributes<HTMLButtonElement>>>;
5
+ export default _default;
6
+ export declare const InputChip: any;
7
+ export declare const InputChipDelete: ComponentStory<typeof Chip>;
@@ -0,0 +1 @@
1
+ export * from './Chip';
@@ -0,0 +1,6 @@
1
+ import { InputSize } from '../input/types';
2
+ export declare const input_chip_base_css: import("@emotion/utils").SerializedStyles;
3
+ export declare const input_chip_x_enabled_css: import("@emotion/utils").SerializedStyles;
4
+ export declare const input_chip_x_disabled_css: import("@emotion/utils").SerializedStyles;
5
+ export declare const input_chip_height_size_css: Record<InputSize, string>;
6
+ export declare const input_chip_size_css: Record<InputSize, string>;
@@ -52,6 +52,11 @@ export interface PopoverProps {
52
52
  * @default true
53
53
  */
54
54
  arrow?: boolean;
55
+ /**
56
+ * 팝오버 내부여백
57
+ * @default 16,20(arrow)
58
+ */
59
+ padding?: number;
55
60
  }
56
61
  export declare const Popover: React.FC<PopoverProps>;
57
62
  export {};