@petnow/ui 5.1.0 → 5.3.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.
- package/CHANGELOG.md +50 -0
- package/README.md +10 -8
- package/dist/{Popup-B2Q-le-6.js → Popup-DRf-ERpL.js} +3 -3
- package/dist/Popup-DRf-ERpL.js.map +1 -0
- package/dist/badge.js +338 -0
- package/dist/badge.js.map +1 -0
- package/dist/checkbox.js +38 -0
- package/dist/checkbox.js.map +1 -0
- package/dist/chip.js +53 -0
- package/dist/chip.js.map +1 -0
- package/dist/combobox.js +201 -0
- package/dist/combobox.js.map +1 -0
- package/dist/cta-button.js +62 -0
- package/dist/cta-button.js.map +1 -0
- package/dist/fieldStyles-DyZu__hI.js +42 -0
- package/dist/fieldStyles-DyZu__hI.js.map +1 -0
- package/dist/icons/action/cancel-filled.js +22 -0
- package/dist/icons/action/cancel-filled.js.map +1 -0
- package/dist/icons/action/cancel.js +19 -0
- package/dist/icons/action/cancel.js.map +1 -0
- package/dist/icons/action/chevron-down.js +19 -0
- package/dist/icons/action/chevron-down.js.map +1 -0
- package/dist/icons/action/chevron-left.js +19 -0
- package/dist/icons/action/chevron-left.js.map +1 -0
- package/dist/icons/action/chevron-right.js +19 -0
- package/dist/icons/action/chevron-right.js.map +1 -0
- package/dist/icons/action/chevron-up.js +19 -0
- package/dist/icons/action/chevron-up.js.map +1 -0
- package/dist/icons/action/filter.js +19 -0
- package/dist/icons/action/filter.js.map +1 -0
- package/dist/icons/action/retry.js +19 -0
- package/dist/icons/action/retry.js.map +1 -0
- package/dist/icons/action/sorting.js +19 -0
- package/dist/icons/action/sorting.js.map +1 -0
- package/dist/icons/static/close.js +19 -0
- package/dist/icons/static/close.js.map +1 -0
- package/dist/icons/static/delete.js +30 -0
- package/dist/icons/static/delete.js.map +1 -0
- package/dist/icons/static/recent.js +32 -0
- package/dist/icons/static/recent.js.map +1 -0
- package/dist/icons/static/report.js +28 -0
- package/dist/icons/static/report.js.map +1 -0
- package/dist/icons/static/shield-done.js +21 -0
- package/dist/icons/static/shield-done.js.map +1 -0
- package/dist/index.d.ts +25 -23
- package/dist/index.es.js +26 -24
- package/dist/mergeRefs-BHwdBwNQ.js +27 -0
- package/dist/mergeRefs-BHwdBwNQ.js.map +1 -0
- package/dist/popup.js +4 -0
- package/dist/radio.js +17 -0
- package/dist/radio.js.map +1 -0
- package/dist/select.js +82 -0
- package/dist/select.js.map +1 -0
- package/dist/src/components/checkbox/Checkbox.d.ts +11 -0
- package/dist/src/components/combobox/Combobox.d.ts +35 -0
- package/dist/src/components/select/Select.d.ts +24 -0
- package/dist/src/components/ui/field.d.ts +15 -0
- package/dist/src/components/ui/fieldStyles.d.ts +14 -0
- package/dist/src/utils/mergeRefs.d.ts +2 -0
- package/dist/tabs.js +73 -0
- package/dist/tabs.js.map +1 -0
- package/dist/text-field.js +252 -0
- package/dist/text-field.js.map +1 -0
- package/dist/toggle.js +21 -0
- package/dist/toggle.js.map +1 -0
- package/dist/v0/checkbox.js +1 -38
- package/dist/v0/radio.js +1 -17
- package/dist/v0/tabs.js +1 -73
- package/dist/v0/toggle.js +1 -21
- package/dist/v1/badge.js +1 -338
- package/dist/v1/chip.js +1 -53
- package/dist/v1/cta-button.js +1 -62
- package/dist/v1/icons/action/cancel-filled.js +1 -22
- package/dist/v1/icons/action/cancel.js +1 -19
- package/dist/v1/icons/action/chevron-down.js +1 -19
- package/dist/v1/icons/action/chevron-left.js +1 -19
- package/dist/v1/icons/action/chevron-right.js +1 -19
- package/dist/v1/icons/action/chevron-up.js +1 -19
- package/dist/v1/icons/action/filter.js +1 -19
- package/dist/v1/icons/action/retry.js +1 -19
- package/dist/v1/icons/action/sorting.js +1 -19
- package/dist/v1/icons/static/close.js +1 -19
- package/dist/v1/icons/static/delete.js +1 -30
- package/dist/v1/icons/static/recent.js +1 -32
- package/dist/v1/icons/static/report.js +1 -28
- package/dist/v1/icons/static/shield-done.js +1 -21
- package/dist/v1/popup.js +1 -4
- package/dist/v1/text-field.js +1 -286
- package/package.json +149 -48
- package/dist/Popup-B2Q-le-6.js.map +0 -1
- package/dist/src/components/v0/checkbox/Checkbox.d.ts +0 -10
- package/dist/v0/checkbox.js.map +0 -1
- package/dist/v0/radio.js.map +0 -1
- package/dist/v0/tabs.js.map +0 -1
- package/dist/v0/toggle.js.map +0 -1
- package/dist/v1/badge.js.map +0 -1
- package/dist/v1/chip.js.map +0 -1
- package/dist/v1/cta-button.js.map +0 -1
- package/dist/v1/icons/action/cancel-filled.js.map +0 -1
- package/dist/v1/icons/action/cancel.js.map +0 -1
- package/dist/v1/icons/action/chevron-down.js.map +0 -1
- package/dist/v1/icons/action/chevron-left.js.map +0 -1
- package/dist/v1/icons/action/chevron-right.js.map +0 -1
- package/dist/v1/icons/action/chevron-up.js.map +0 -1
- package/dist/v1/icons/action/filter.js.map +0 -1
- package/dist/v1/icons/action/retry.js.map +0 -1
- package/dist/v1/icons/action/sorting.js.map +0 -1
- package/dist/v1/icons/static/close.js.map +0 -1
- package/dist/v1/icons/static/delete.js.map +0 -1
- package/dist/v1/icons/static/recent.js.map +0 -1
- package/dist/v1/icons/static/report.js.map +0 -1
- package/dist/v1/icons/static/shield-done.js.map +0 -1
- package/dist/v1/text-field.js.map +0 -1
- /package/dist/src/components/{v1/badge → badge}/Badge.d.ts +0 -0
- /package/dist/src/components/{v1/chip → chip}/Chip.d.ts +0 -0
- /package/dist/src/components/{v1/cta-button → cta-button}/CTAButton.d.ts +0 -0
- /package/dist/src/components/{v1/icons → icons}/action/CancelFilledIcon.d.ts +0 -0
- /package/dist/src/components/{v1/icons → icons}/action/CancelIcon.d.ts +0 -0
- /package/dist/src/components/{v1/icons → icons}/action/ChevronDownIcon.d.ts +0 -0
- /package/dist/src/components/{v1/icons → icons}/action/ChevronLeftIcon.d.ts +0 -0
- /package/dist/src/components/{v1/icons → icons}/action/ChevronRightIcon.d.ts +0 -0
- /package/dist/src/components/{v1/icons → icons}/action/ChevronUpIcon.d.ts +0 -0
- /package/dist/src/components/{v1/icons → icons}/action/FilterIcon.d.ts +0 -0
- /package/dist/src/components/{v1/icons → icons}/action/RetryIcon.d.ts +0 -0
- /package/dist/src/components/{v1/icons → icons}/action/SortingIcon.d.ts +0 -0
- /package/dist/src/components/{v1/icons → icons}/static/CloseIcon.d.ts +0 -0
- /package/dist/src/components/{v1/icons → icons}/static/DeleteIcon.d.ts +0 -0
- /package/dist/src/components/{v1/icons → icons}/static/RecentIcon.d.ts +0 -0
- /package/dist/src/components/{v1/icons → icons}/static/ReportIcon.d.ts +0 -0
- /package/dist/src/components/{v1/icons → icons}/static/ShieldDoneIcon.d.ts +0 -0
- /package/dist/src/components/{v1/popup → popup}/Popup.d.ts +0 -0
- /package/dist/src/components/{v0/radio → radio}/Radio.d.ts +0 -0
- /package/dist/src/components/{v0/tabs → tabs}/Tabs.d.ts +0 -0
- /package/dist/src/components/{v1/text-field → text-field}/TextField.d.ts +0 -0
- /package/dist/src/components/{v0/toggle → toggle}/Toggle.d.ts +0 -0
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
+
//#region src/components/icons/static/CloseIcon.tsx
|
|
3
|
+
var t = (t) => /* @__PURE__ */ e("svg", {
|
|
4
|
+
width: "24",
|
|
5
|
+
height: "24",
|
|
6
|
+
viewBox: "0 0 24 24",
|
|
7
|
+
fill: "none",
|
|
8
|
+
...t,
|
|
9
|
+
children: /* @__PURE__ */ e("path", {
|
|
10
|
+
fillRule: "evenodd",
|
|
11
|
+
clipRule: "evenodd",
|
|
12
|
+
d: "M19.7071 4.29289C20.0976 4.68342 20.0976 5.31658 19.7071 5.70711L13.4142 12L19.7071 18.2929C20.0976 18.6834 20.0976 19.3166 19.7071 19.7071C19.3166 20.0976 18.6834 20.0976 18.2929 19.7071L12 13.4142L5.70711 19.7071C5.31658 20.0976 4.68342 20.0976 4.29289 19.7071C3.90237 19.3166 3.90237 18.6834 4.29289 18.2929L10.5858 12L4.29289 5.70711C3.90237 5.31659 3.90237 4.68342 4.29289 4.2929C4.68342 3.90237 5.31658 3.90237 5.70711 4.2929L12 10.5858L18.2929 4.29289C18.6834 3.90237 19.3166 3.90237 19.7071 4.29289Z",
|
|
13
|
+
fill: "currentColor"
|
|
14
|
+
})
|
|
15
|
+
});
|
|
16
|
+
//#endregion
|
|
17
|
+
export { t as CloseIcon };
|
|
18
|
+
|
|
19
|
+
//# sourceMappingURL=close.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"close.js","names":[],"sources":["../../../src/components/icons/static/CloseIcon.tsx"],"sourcesContent":["import type { SVGProps } from \"react\";\n\nconst CloseIcon = (props: SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" {...props}>\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M19.7071 4.29289C20.0976 4.68342 20.0976 5.31658 19.7071 5.70711L13.4142 12L19.7071 18.2929C20.0976 18.6834 20.0976 19.3166 19.7071 19.7071C19.3166 20.0976 18.6834 20.0976 18.2929 19.7071L12 13.4142L5.70711 19.7071C5.31658 20.0976 4.68342 20.0976 4.29289 19.7071C3.90237 19.3166 3.90237 18.6834 4.29289 18.2929L10.5858 12L4.29289 5.70711C3.90237 5.31659 3.90237 4.68342 4.29289 4.2929C4.68342 3.90237 5.31658 3.90237 5.70711 4.2929L12 10.5858L18.2929 4.29289C18.6834 3.90237 19.3166 3.90237 19.7071 4.29289Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n};\n\nexport { CloseIcon };\n"],"mappings":";;AAEA,IAAM,KAAa,MAEf,kBAAC,OAAD;CAAK,OAAM;CAAK,QAAO;CAAK,SAAQ;CAAY,MAAK;CAAO,GAAI;WAC9D,kBAAC,QAAD;EACE,UAAS;EACT,UAAS;EACT,GAAE;EACF,MAAK;CACN,CAAA;AACE,CAAA"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { jsx as e, jsxs as t } from "react/jsx-runtime";
|
|
2
|
+
//#region src/components/icons/static/DeleteIcon.tsx
|
|
3
|
+
var n = (n) => /* @__PURE__ */ t("svg", {
|
|
4
|
+
width: "24",
|
|
5
|
+
height: "24",
|
|
6
|
+
viewBox: "0 0 24 24",
|
|
7
|
+
fill: "none",
|
|
8
|
+
...n,
|
|
9
|
+
children: [
|
|
10
|
+
/* @__PURE__ */ e("path", {
|
|
11
|
+
opacity: "0.399",
|
|
12
|
+
d: "M19.23 8.14C18.99 7.89 18.66 7.75 18.32 7.75H5.67999C5.33999 7.75 4.99999 7.89 4.76999 8.14C4.53999 8.39 4.40999 8.73 4.42999 9.08L5.04999 19.34C5.15999 20.86 5.29999 22.76 8.78999 22.76H15.21C18.7 22.76 18.84 20.87 18.95 19.34L19.57 9.09C19.59 8.73 19.46 8.39 19.23 8.14Z",
|
|
13
|
+
fill: "currentColor"
|
|
14
|
+
}),
|
|
15
|
+
/* @__PURE__ */ e("path", {
|
|
16
|
+
d: "M21.0699 5.23C19.4599 5.07 17.8499 4.95 16.2299 4.86V4.85L16.0099 3.55C15.8599 2.63 15.6399 1.25 13.2999 1.25H10.6799C8.34991 1.25 8.12991 2.57 7.96991 3.54L7.75991 4.82C6.82991 4.88 5.89991 4.94 4.96991 5.03L2.92991 5.23C2.50991 5.27 2.20991 5.64 2.24991 6.05C2.28991 6.46 2.64991 6.76 3.06991 6.72L5.10991 6.52C10.3499 6 15.6299 6.2 20.9299 6.73H21.0099C21.3899 6.73 21.7199 6.44 21.7599 6.05C21.775 5.85024 21.7112 5.65253 21.5822 5.49925C21.4532 5.34596 21.2693 5.24931 21.0699 5.23Z",
|
|
17
|
+
fill: "currentColor"
|
|
18
|
+
}),
|
|
19
|
+
/* @__PURE__ */ e("path", {
|
|
20
|
+
fillRule: "evenodd",
|
|
21
|
+
clipRule: "evenodd",
|
|
22
|
+
d: "M9.57994 17C9.57994 16.8011 9.65896 16.6103 9.79961 16.4697C9.94026 16.329 10.131 16.25 10.3299 16.25H13.6599C13.8589 16.25 14.0496 16.329 14.1903 16.4697C14.3309 16.6103 14.4099 16.8011 14.4099 17C14.4099 17.1989 14.3309 17.3897 14.1903 17.5303C14.0496 17.671 13.8589 17.75 13.6599 17.75H10.3299C10.131 17.75 9.94026 17.671 9.79961 17.5303C9.65896 17.3897 9.57994 17.1989 9.57994 17ZM8.74994 13C8.74994 12.8011 8.82896 12.6103 8.96961 12.4697C9.11026 12.329 9.30103 12.25 9.49994 12.25H14.4999C14.6989 12.25 14.8896 12.329 15.0303 12.4697C15.1709 12.6103 15.2499 12.8011 15.2499 13C15.2499 13.1989 15.1709 13.3897 15.0303 13.5303C14.8896 13.671 14.6989 13.75 14.4999 13.75H9.49994C9.30103 13.75 9.11026 13.671 8.96961 13.5303C8.82896 13.3897 8.74994 13.1989 8.74994 13Z",
|
|
23
|
+
fill: "currentColor"
|
|
24
|
+
})
|
|
25
|
+
]
|
|
26
|
+
});
|
|
27
|
+
//#endregion
|
|
28
|
+
export { n as DeleteIcon };
|
|
29
|
+
|
|
30
|
+
//# sourceMappingURL=delete.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"delete.js","names":[],"sources":["../../../src/components/icons/static/DeleteIcon.tsx"],"sourcesContent":["import type { SVGProps } from \"react\";\n\nconst DeleteIcon = (props: SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" {...props}>\n <path\n opacity=\"0.399\"\n d=\"M19.23 8.14C18.99 7.89 18.66 7.75 18.32 7.75H5.67999C5.33999 7.75 4.99999 7.89 4.76999 8.14C4.53999 8.39 4.40999 8.73 4.42999 9.08L5.04999 19.34C5.15999 20.86 5.29999 22.76 8.78999 22.76H15.21C18.7 22.76 18.84 20.87 18.95 19.34L19.57 9.09C19.59 8.73 19.46 8.39 19.23 8.14Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M21.0699 5.23C19.4599 5.07 17.8499 4.95 16.2299 4.86V4.85L16.0099 3.55C15.8599 2.63 15.6399 1.25 13.2999 1.25H10.6799C8.34991 1.25 8.12991 2.57 7.96991 3.54L7.75991 4.82C6.82991 4.88 5.89991 4.94 4.96991 5.03L2.92991 5.23C2.50991 5.27 2.20991 5.64 2.24991 6.05C2.28991 6.46 2.64991 6.76 3.06991 6.72L5.10991 6.52C10.3499 6 15.6299 6.2 20.9299 6.73H21.0099C21.3899 6.73 21.7199 6.44 21.7599 6.05C21.775 5.85024 21.7112 5.65253 21.5822 5.49925C21.4532 5.34596 21.2693 5.24931 21.0699 5.23Z\"\n fill=\"currentColor\"\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M9.57994 17C9.57994 16.8011 9.65896 16.6103 9.79961 16.4697C9.94026 16.329 10.131 16.25 10.3299 16.25H13.6599C13.8589 16.25 14.0496 16.329 14.1903 16.4697C14.3309 16.6103 14.4099 16.8011 14.4099 17C14.4099 17.1989 14.3309 17.3897 14.1903 17.5303C14.0496 17.671 13.8589 17.75 13.6599 17.75H10.3299C10.131 17.75 9.94026 17.671 9.79961 17.5303C9.65896 17.3897 9.57994 17.1989 9.57994 17ZM8.74994 13C8.74994 12.8011 8.82896 12.6103 8.96961 12.4697C9.11026 12.329 9.30103 12.25 9.49994 12.25H14.4999C14.6989 12.25 14.8896 12.329 15.0303 12.4697C15.1709 12.6103 15.2499 12.8011 15.2499 13C15.2499 13.1989 15.1709 13.3897 15.0303 13.5303C14.8896 13.671 14.6989 13.75 14.4999 13.75H9.49994C9.30103 13.75 9.11026 13.671 8.96961 13.5303C8.82896 13.3897 8.74994 13.1989 8.74994 13Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n};\n\nexport { DeleteIcon };\n"],"mappings":";;AAEA,IAAM,KAAc,MAEhB,kBAAC,OAAD;CAAK,OAAM;CAAK,QAAO;CAAK,SAAQ;CAAY,MAAK;CAAO,GAAI;WAAhE;EACE,kBAAC,QAAD;GACE,SAAQ;GACR,GAAE;GACF,MAAK;EACN,CAAA;EACD,kBAAC,QAAD;GACE,GAAE;GACF,MAAK;EACN,CAAA;EACD,kBAAC,QAAD;GACE,UAAS;GACT,UAAS;GACT,GAAE;GACF,MAAK;EACN,CAAA;CACE"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { jsx as e, jsxs as t } from "react/jsx-runtime";
|
|
2
|
+
//#region src/components/icons/static/RecentIcon.tsx
|
|
3
|
+
var n = (n) => /* @__PURE__ */ t("svg", {
|
|
4
|
+
width: "24",
|
|
5
|
+
height: "24",
|
|
6
|
+
viewBox: "0 0 24 24",
|
|
7
|
+
fill: "none",
|
|
8
|
+
...n,
|
|
9
|
+
children: [
|
|
10
|
+
/* @__PURE__ */ e("path", {
|
|
11
|
+
opacity: "0.4",
|
|
12
|
+
d: "M19 2H5C3.34315 2 2 3.34315 2 5V19C2 20.6569 3.34315 22 5 22H19C20.6569 22 22 20.6569 22 19V5C22 3.34315 20.6569 2 19 2Z",
|
|
13
|
+
fill: "currentColor"
|
|
14
|
+
}),
|
|
15
|
+
/* @__PURE__ */ e("path", {
|
|
16
|
+
fillRule: "evenodd",
|
|
17
|
+
clipRule: "evenodd",
|
|
18
|
+
d: "M14.6689 6.32707C14.9253 6.20088 15.2312 6.2314 15.4576 6.40576L18.4576 8.71576C18.7858 8.96847 18.847 9.43938 18.5943 9.76758C18.3416 10.0958 17.8707 10.157 17.5425 9.90425L15.75 8.52408V17C15.75 17.4142 15.4143 17.75 15 17.75C14.5858 17.75 14.25 17.4142 14.25 17V7.00001C14.25 6.71421 14.4125 6.45326 14.6689 6.32707Z",
|
|
19
|
+
fill: "currentColor"
|
|
20
|
+
}),
|
|
21
|
+
/* @__PURE__ */ e("path", {
|
|
22
|
+
fillRule: "evenodd",
|
|
23
|
+
clipRule: "evenodd",
|
|
24
|
+
d: "M9.00004 6.25001C9.41425 6.25001 9.75004 6.58579 9.75004 7.00001V17C9.75004 17.2858 9.58761 17.5468 9.33119 17.6729C9.07476 17.7991 8.76891 17.7686 8.54247 17.5943L5.54247 15.2843C5.21427 15.0315 5.15308 14.5606 5.40579 14.2324C5.6585 13.9042 6.12941 13.843 6.45761 14.0958L8.25004 15.4759V7.00001C8.25004 6.58579 8.58582 6.25001 9.00004 6.25001Z",
|
|
25
|
+
fill: "currentColor"
|
|
26
|
+
})
|
|
27
|
+
]
|
|
28
|
+
});
|
|
29
|
+
//#endregion
|
|
30
|
+
export { n as RecentIcon };
|
|
31
|
+
|
|
32
|
+
//# sourceMappingURL=recent.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"recent.js","names":[],"sources":["../../../src/components/icons/static/RecentIcon.tsx"],"sourcesContent":["import type { SVGProps } from \"react\";\n\nconst RecentIcon = (props: SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" {...props}>\n <path\n opacity=\"0.4\"\n d=\"M19 2H5C3.34315 2 2 3.34315 2 5V19C2 20.6569 3.34315 22 5 22H19C20.6569 22 22 20.6569 22 19V5C22 3.34315 20.6569 2 19 2Z\"\n fill=\"currentColor\"\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M14.6689 6.32707C14.9253 6.20088 15.2312 6.2314 15.4576 6.40576L18.4576 8.71576C18.7858 8.96847 18.847 9.43938 18.5943 9.76758C18.3416 10.0958 17.8707 10.157 17.5425 9.90425L15.75 8.52408V17C15.75 17.4142 15.4143 17.75 15 17.75C14.5858 17.75 14.25 17.4142 14.25 17V7.00001C14.25 6.71421 14.4125 6.45326 14.6689 6.32707Z\"\n fill=\"currentColor\"\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M9.00004 6.25001C9.41425 6.25001 9.75004 6.58579 9.75004 7.00001V17C9.75004 17.2858 9.58761 17.5468 9.33119 17.6729C9.07476 17.7991 8.76891 17.7686 8.54247 17.5943L5.54247 15.2843C5.21427 15.0315 5.15308 14.5606 5.40579 14.2324C5.6585 13.9042 6.12941 13.843 6.45761 14.0958L8.25004 15.4759V7.00001C8.25004 6.58579 8.58582 6.25001 9.00004 6.25001Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n};\n\nexport { RecentIcon };\n"],"mappings":";;AAEA,IAAM,KAAc,MAEhB,kBAAC,OAAD;CAAK,OAAM;CAAK,QAAO;CAAK,SAAQ;CAAY,MAAK;CAAO,GAAI;WAAhE;EACE,kBAAC,QAAD;GACE,SAAQ;GACR,GAAE;GACF,MAAK;EACN,CAAA;EACD,kBAAC,QAAD;GACE,UAAS;GACT,UAAS;GACT,GAAE;GACF,MAAK;EACN,CAAA;EACD,kBAAC,QAAD;GACE,UAAS;GACT,UAAS;GACT,GAAE;GACF,MAAK;EACN,CAAA;CACE"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { jsx as e, jsxs as t } from "react/jsx-runtime";
|
|
2
|
+
//#region src/components/icons/static/ReportIcon.tsx
|
|
3
|
+
var n = (n) => /* @__PURE__ */ t("svg", {
|
|
4
|
+
width: "24",
|
|
5
|
+
height: "24",
|
|
6
|
+
viewBox: "0 0 24 24",
|
|
7
|
+
fill: "none",
|
|
8
|
+
...n,
|
|
9
|
+
children: [
|
|
10
|
+
/* @__PURE__ */ e("path", {
|
|
11
|
+
d: "M11.9986 4.88802C11.3424 4.88802 10.7982 4.35925 10.7982 3.72162V2.16641C10.7982 1.52877 11.3424 1 11.9986 1C12.6547 1 13.1989 1.52877 13.1989 2.16641V3.72162C13.1989 4.35925 12.6547 4.88802 11.9986 4.88802ZM4.79709 8C4.49301 8 4.18892 7.89114 3.94886 7.65785L2.34842 6.10264C2.12519 5.88314 2 5.58698 2 5.27838C2 4.96978 2.12519 4.67362 2.34842 4.45412C2.81254 4.00311 3.58076 4.00311 4.04488 4.45412L5.64532 6.00933C6.10945 6.46034 6.10945 7.20684 5.64532 7.65785C5.40526 7.89114 5.10117 8 4.79709 8ZM19.2032 8C18.8991 8 18.5951 7.89114 18.355 7.65785C18.1318 7.43835 18.0066 7.14219 18.0066 6.83359C18.0066 6.52499 18.1318 6.22883 18.355 6.00933L19.9554 4.45412C20.4196 4.00311 21.1878 4.00311 21.6519 4.45412C22.116 4.90513 22.116 5.65163 21.6519 6.10264L20.0515 7.65785C19.8114 7.89114 19.5073 8 19.2032 8Z",
|
|
12
|
+
fill: "currentColor"
|
|
13
|
+
}),
|
|
14
|
+
/* @__PURE__ */ e("path", {
|
|
15
|
+
d: "M22 21C22 21.5467 21.6837 22 21.3023 22H2.69767C2.31628 22 2 21.5467 2 21C2 20.4533 2.31628 20 2.69767 20H21.3023C21.6837 20 22 20.4533 22 21Z",
|
|
16
|
+
fill: "currentColor"
|
|
17
|
+
}),
|
|
18
|
+
/* @__PURE__ */ e("path", {
|
|
19
|
+
opacity: "0.4",
|
|
20
|
+
d: "M20 14.6721V20H4V14.6721C4 12.6374 4.84285 10.6859 6.34315 9.24711C7.84344 7.80831 9.87827 7 12 7C14.1217 7 16.1566 7.80831 17.6569 9.24711C19.1572 10.6859 20 12.6374 20 14.6721Z",
|
|
21
|
+
fill: "currentColor"
|
|
22
|
+
})
|
|
23
|
+
]
|
|
24
|
+
});
|
|
25
|
+
//#endregion
|
|
26
|
+
export { n as ReportIcon };
|
|
27
|
+
|
|
28
|
+
//# sourceMappingURL=report.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"report.js","names":[],"sources":["../../../src/components/icons/static/ReportIcon.tsx"],"sourcesContent":["import type { SVGProps } from \"react\";\n\nconst ReportIcon = (props: SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" {...props}>\n <path\n d=\"M11.9986 4.88802C11.3424 4.88802 10.7982 4.35925 10.7982 3.72162V2.16641C10.7982 1.52877 11.3424 1 11.9986 1C12.6547 1 13.1989 1.52877 13.1989 2.16641V3.72162C13.1989 4.35925 12.6547 4.88802 11.9986 4.88802ZM4.79709 8C4.49301 8 4.18892 7.89114 3.94886 7.65785L2.34842 6.10264C2.12519 5.88314 2 5.58698 2 5.27838C2 4.96978 2.12519 4.67362 2.34842 4.45412C2.81254 4.00311 3.58076 4.00311 4.04488 4.45412L5.64532 6.00933C6.10945 6.46034 6.10945 7.20684 5.64532 7.65785C5.40526 7.89114 5.10117 8 4.79709 8ZM19.2032 8C18.8991 8 18.5951 7.89114 18.355 7.65785C18.1318 7.43835 18.0066 7.14219 18.0066 6.83359C18.0066 6.52499 18.1318 6.22883 18.355 6.00933L19.9554 4.45412C20.4196 4.00311 21.1878 4.00311 21.6519 4.45412C22.116 4.90513 22.116 5.65163 21.6519 6.10264L20.0515 7.65785C19.8114 7.89114 19.5073 8 19.2032 8Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M22 21C22 21.5467 21.6837 22 21.3023 22H2.69767C2.31628 22 2 21.5467 2 21C2 20.4533 2.31628 20 2.69767 20H21.3023C21.6837 20 22 20.4533 22 21Z\"\n fill=\"currentColor\"\n />\n <path\n opacity=\"0.4\"\n d=\"M20 14.6721V20H4V14.6721C4 12.6374 4.84285 10.6859 6.34315 9.24711C7.84344 7.80831 9.87827 7 12 7C14.1217 7 16.1566 7.80831 17.6569 9.24711C19.1572 10.6859 20 12.6374 20 14.6721Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n};\n\nexport { ReportIcon };\n"],"mappings":";;AAEA,IAAM,KAAc,MAEhB,kBAAC,OAAD;CAAK,OAAM;CAAK,QAAO;CAAK,SAAQ;CAAY,MAAK;CAAO,GAAI;WAAhE;EACE,kBAAC,QAAD;GACE,GAAE;GACF,MAAK;EACN,CAAA;EACD,kBAAC,QAAD;GACE,GAAE;GACF,MAAK;EACN,CAAA;EACD,kBAAC,QAAD;GACE,SAAQ;GACR,GAAE;GACF,MAAK;EACN,CAAA;CACE"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { jsx as e, jsxs as t } from "react/jsx-runtime";
|
|
2
|
+
//#region src/components/icons/static/ShieldDoneIcon.tsx
|
|
3
|
+
var n = (n) => /* @__PURE__ */ t("svg", {
|
|
4
|
+
width: "24",
|
|
5
|
+
height: "24",
|
|
6
|
+
viewBox: "0 0 24 24",
|
|
7
|
+
fill: "none",
|
|
8
|
+
...n,
|
|
9
|
+
children: [/* @__PURE__ */ e("path", {
|
|
10
|
+
opacity: "0.4",
|
|
11
|
+
d: "M10.9608 2.0588L5.46078 4.1188C4.41078 4.5188 3.55078 5.7588 3.55078 6.8888V14.9888C3.55078 15.7988 4.08078 16.8688 4.73078 17.3488L10.2308 21.4588C11.2008 22.1888 12.7908 22.1888 13.7608 21.4588L19.2608 17.3488C19.9108 16.8588 20.4408 15.7988 20.4408 14.9888V6.8888C20.4408 5.7688 19.5808 4.5188 18.5308 4.1288L13.0308 2.0688C12.4708 1.8488 11.5308 1.8488 10.9608 2.0588Z",
|
|
12
|
+
fill: "currentColor"
|
|
13
|
+
}), /* @__PURE__ */ e("path", {
|
|
14
|
+
d: "M10.657 14.2309C10.467 14.2309 10.277 14.1609 10.127 14.0109L8.51702 12.4009C8.37754 12.2598 8.29932 12.0693 8.29932 11.8709C8.29932 11.6725 8.37754 11.482 8.51702 11.3409C8.80702 11.0509 9.28702 11.0509 9.57702 11.3409L10.657 12.4209L14.427 8.65091C14.717 8.36091 15.197 8.36091 15.487 8.65091C15.777 8.94091 15.777 9.42091 15.487 9.71091L11.187 14.0109C11.037 14.1609 10.847 14.2309 10.657 14.2309Z",
|
|
15
|
+
fill: "currentColor"
|
|
16
|
+
})]
|
|
17
|
+
});
|
|
18
|
+
//#endregion
|
|
19
|
+
export { n as ShieldDoneIcon };
|
|
20
|
+
|
|
21
|
+
//# sourceMappingURL=shield-done.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"shield-done.js","names":[],"sources":["../../../src/components/icons/static/ShieldDoneIcon.tsx"],"sourcesContent":["import type { SVGProps } from \"react\";\n\nconst ShieldDoneIcon = (props: SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" {...props}>\n <path\n opacity=\"0.4\"\n d=\"M10.9608 2.0588L5.46078 4.1188C4.41078 4.5188 3.55078 5.7588 3.55078 6.8888V14.9888C3.55078 15.7988 4.08078 16.8688 4.73078 17.3488L10.2308 21.4588C11.2008 22.1888 12.7908 22.1888 13.7608 21.4588L19.2608 17.3488C19.9108 16.8588 20.4408 15.7988 20.4408 14.9888V6.8888C20.4408 5.7688 19.5808 4.5188 18.5308 4.1288L13.0308 2.0688C12.4708 1.8488 11.5308 1.8488 10.9608 2.0588Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M10.657 14.2309C10.467 14.2309 10.277 14.1609 10.127 14.0109L8.51702 12.4009C8.37754 12.2598 8.29932 12.0693 8.29932 11.8709C8.29932 11.6725 8.37754 11.482 8.51702 11.3409C8.80702 11.0509 9.28702 11.0509 9.57702 11.3409L10.657 12.4209L14.427 8.65091C14.717 8.36091 15.197 8.36091 15.487 8.65091C15.777 8.94091 15.777 9.42091 15.487 9.71091L11.187 14.0109C11.037 14.1609 10.847 14.2309 10.657 14.2309Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n};\n\nexport { ShieldDoneIcon };\n"],"mappings":";;AAEA,IAAM,KAAkB,MAEpB,kBAAC,OAAD;CAAK,OAAM;CAAK,QAAO;CAAK,SAAQ;CAAY,MAAK;CAAO,GAAI;WAAhE,CACE,kBAAC,QAAD;EACE,SAAQ;EACR,GAAE;EACF,MAAK;CACN,CAAA,GACD,kBAAC,QAAD;EACE,GAAE;EACF,MAAK;CACN,CAAA,CACE"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,23 +1,25 @@
|
|
|
1
|
-
export { default as Radio } from './src/components/
|
|
2
|
-
export { default as Tabs } from './src/components/
|
|
3
|
-
export { default as Checkbox } from './src/components/
|
|
4
|
-
export { default as Toggle } from './src/components/
|
|
5
|
-
export { Badge } from './src/components/
|
|
6
|
-
export { Chip } from './src/components/
|
|
7
|
-
export { CTAButton } from './src/components/
|
|
8
|
-
export { Popup } from './src/components/
|
|
9
|
-
export { TextFieldNormal, TextFieldSelect, TextFieldWithButton } from './src/components/
|
|
10
|
-
export {
|
|
11
|
-
export {
|
|
12
|
-
export {
|
|
13
|
-
export {
|
|
14
|
-
export {
|
|
15
|
-
export {
|
|
16
|
-
export {
|
|
17
|
-
export {
|
|
18
|
-
export {
|
|
19
|
-
export {
|
|
20
|
-
export {
|
|
21
|
-
export {
|
|
22
|
-
export {
|
|
23
|
-
export {
|
|
1
|
+
export { default as Radio } from './src/components/radio/Radio';
|
|
2
|
+
export { default as Tabs } from './src/components/tabs/Tabs';
|
|
3
|
+
export { default as Checkbox } from './src/components/checkbox/Checkbox';
|
|
4
|
+
export { default as Toggle } from './src/components/toggle/Toggle';
|
|
5
|
+
export { Badge } from './src/components/badge/Badge';
|
|
6
|
+
export { Chip } from './src/components/chip/Chip';
|
|
7
|
+
export { CTAButton } from './src/components/cta-button/CTAButton';
|
|
8
|
+
export { Popup } from './src/components/popup/Popup';
|
|
9
|
+
export { TextFieldNormal, TextFieldSelect, TextFieldWithButton } from './src/components/text-field/TextField';
|
|
10
|
+
export { Select, type SelectOption } from './src/components/select/Select';
|
|
11
|
+
export { Combobox, type ComboboxOption } from './src/components/combobox/Combobox';
|
|
12
|
+
export { CancelFilledIcon } from './src/components/icons/action/CancelFilledIcon';
|
|
13
|
+
export { CancelIcon } from './src/components/icons/action/CancelIcon';
|
|
14
|
+
export { ChevronDownIcon } from './src/components/icons/action/ChevronDownIcon';
|
|
15
|
+
export { ChevronLeftIcon } from './src/components/icons/action/ChevronLeftIcon';
|
|
16
|
+
export { ChevronRightIcon } from './src/components/icons/action/ChevronRightIcon';
|
|
17
|
+
export { ChevronUpIcon } from './src/components/icons/action/ChevronUpIcon';
|
|
18
|
+
export { FilterIcon } from './src/components/icons/action/FilterIcon';
|
|
19
|
+
export { RetryIcon } from './src/components/icons/action/RetryIcon';
|
|
20
|
+
export { SortingIcon } from './src/components/icons/action/SortingIcon';
|
|
21
|
+
export { CloseIcon } from './src/components/icons/static/CloseIcon';
|
|
22
|
+
export { DeleteIcon } from './src/components/icons/static/DeleteIcon';
|
|
23
|
+
export { RecentIcon } from './src/components/icons/static/RecentIcon';
|
|
24
|
+
export { ReportIcon } from './src/components/icons/static/ReportIcon';
|
|
25
|
+
export { ShieldDoneIcon } from './src/components/icons/static/ShieldDoneIcon';
|
package/dist/index.es.js
CHANGED
|
@@ -1,24 +1,26 @@
|
|
|
1
|
-
import e from "./
|
|
2
|
-
import t from "./
|
|
3
|
-
import n from "./
|
|
4
|
-
import r from "./
|
|
5
|
-
import { Badge as i } from "./
|
|
6
|
-
import { Chip as a } from "./
|
|
7
|
-
import { CTAButton as o } from "./
|
|
8
|
-
import { t as s } from "./Popup-
|
|
9
|
-
import { CancelFilledIcon as c } from "./
|
|
10
|
-
import { ChevronLeftIcon as l } from "./
|
|
11
|
-
import { TextFieldNormal as u, TextFieldSelect as d, TextFieldWithButton as f } from "./
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
21
|
-
import {
|
|
22
|
-
import {
|
|
23
|
-
import {
|
|
24
|
-
|
|
1
|
+
import e from "./radio.js";
|
|
2
|
+
import t from "./tabs.js";
|
|
3
|
+
import n from "./checkbox.js";
|
|
4
|
+
import r from "./toggle.js";
|
|
5
|
+
import { Badge as i } from "./badge.js";
|
|
6
|
+
import { Chip as a } from "./chip.js";
|
|
7
|
+
import { CTAButton as o } from "./cta-button.js";
|
|
8
|
+
import { t as s } from "./Popup-DRf-ERpL.js";
|
|
9
|
+
import { CancelFilledIcon as c } from "./icons/action/cancel-filled.js";
|
|
10
|
+
import { ChevronLeftIcon as l } from "./icons/action/chevron-left.js";
|
|
11
|
+
import { TextFieldNormal as u, TextFieldSelect as d, TextFieldWithButton as f } from "./text-field.js";
|
|
12
|
+
import { ChevronDownIcon as p } from "./icons/action/chevron-down.js";
|
|
13
|
+
import { Select as m } from "./select.js";
|
|
14
|
+
import { Combobox as h } from "./combobox.js";
|
|
15
|
+
import { CancelIcon as g } from "./icons/action/cancel.js";
|
|
16
|
+
import { ChevronRightIcon as _ } from "./icons/action/chevron-right.js";
|
|
17
|
+
import { ChevronUpIcon as v } from "./icons/action/chevron-up.js";
|
|
18
|
+
import { FilterIcon as y } from "./icons/action/filter.js";
|
|
19
|
+
import { RetryIcon as b } from "./icons/action/retry.js";
|
|
20
|
+
import { SortingIcon as x } from "./icons/action/sorting.js";
|
|
21
|
+
import { CloseIcon as S } from "./icons/static/close.js";
|
|
22
|
+
import { DeleteIcon as C } from "./icons/static/delete.js";
|
|
23
|
+
import { RecentIcon as w } from "./icons/static/recent.js";
|
|
24
|
+
import { ReportIcon as T } from "./icons/static/report.js";
|
|
25
|
+
import { ShieldDoneIcon as E } from "./icons/static/shield-done.js";
|
|
26
|
+
export { i as Badge, o as CTAButton, c as CancelFilledIcon, g as CancelIcon, n as Checkbox, p as ChevronDownIcon, l as ChevronLeftIcon, _ as ChevronRightIcon, v as ChevronUpIcon, a as Chip, S as CloseIcon, h as Combobox, C as DeleteIcon, y as FilterIcon, s as Popup, e as Radio, w as RecentIcon, T as ReportIcon, b as RetryIcon, m as Select, E as ShieldDoneIcon, x as SortingIcon, t as Tabs, u as TextFieldNormal, d as TextFieldSelect, f as TextFieldWithButton, r as Toggle };
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { t as e } from "./TailwindUtil-DiNvXuNl.js";
|
|
2
|
+
import { i as t, r as n } from "./fieldStyles-DyZu__hI.js";
|
|
3
|
+
import { jsx as r, jsxs as i } from "react/jsx-runtime";
|
|
4
|
+
//#region src/components/ui/field.tsx
|
|
5
|
+
var a = ({ id: t, htmlFor: a, size: o, required: s, children: c }) => /* @__PURE__ */ i("label", {
|
|
6
|
+
id: t,
|
|
7
|
+
htmlFor: a,
|
|
8
|
+
className: e(n(o), "text-text-base-neutral-5"),
|
|
9
|
+
children: [c, s && /* @__PURE__ */ r("span", {
|
|
10
|
+
className: "text-text-prominent-accent-1",
|
|
11
|
+
"aria-hidden": "true",
|
|
12
|
+
children: "*"
|
|
13
|
+
})]
|
|
14
|
+
}), o = ({ id: e, size: n, errorText: i, assistiveText: a }) => !i && !a ? null : /* @__PURE__ */ r("span", {
|
|
15
|
+
id: e,
|
|
16
|
+
className: t({
|
|
17
|
+
size: n,
|
|
18
|
+
hasError: !!i
|
|
19
|
+
}),
|
|
20
|
+
children: i || a
|
|
21
|
+
}), s = (...e) => (t) => {
|
|
22
|
+
for (let n of e) typeof n == "function" ? n(t) : n && (n.current = t);
|
|
23
|
+
};
|
|
24
|
+
//#endregion
|
|
25
|
+
export { a as n, o as r, s as t };
|
|
26
|
+
|
|
27
|
+
//# sourceMappingURL=mergeRefs-BHwdBwNQ.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"mergeRefs-BHwdBwNQ.js","names":[],"sources":["../src/components/ui/field.tsx","../src/utils/mergeRefs.ts"],"sourcesContent":["import { fieldLabelFontSize, fieldMessageVariants, type FieldSize } from \"./fieldStyles\";\n\nimport type { ReactNode } from \"react\";\n\nimport { cn } from \"@/utils/TailwindUtil\";\n\nexport const FieldLabel = ({\n id,\n htmlFor,\n size,\n required,\n children,\n}: {\n id?: string;\n htmlFor: string;\n size: FieldSize;\n required?: boolean;\n children: ReactNode;\n}) => (\n <label id={id} htmlFor={htmlFor} className={cn(fieldLabelFontSize(size), \"text-text-base-neutral-5\")}>\n {children}\n {required && (\n <span className=\"text-text-prominent-accent-1\" aria-hidden=\"true\">\n *\n </span>\n )}\n </label>\n);\n\nexport const FieldMessage = ({\n id,\n size,\n errorText,\n assistiveText,\n}: {\n id: string;\n size: FieldSize;\n errorText?: string;\n assistiveText?: ReactNode;\n}) => {\n if (!errorText && !assistiveText) return null;\n return (\n <span id={id} className={fieldMessageVariants({ size, hasError: Boolean(errorText) })}>\n {errorText || assistiveText}\n </span>\n );\n};\n","import type { Ref, RefCallback } from \"react\";\n\n// 내부 ref와 소비 레포가 넘긴 ref(React 19 ref prop)를 함께 연결한다.\nexport const mergeRefs =\n <T>(...refs: (Ref<T> | undefined)[]): RefCallback<T> =>\n (node) => {\n for (const ref of refs) {\n if (typeof ref === \"function\") ref(node);\n else if (ref) ref.current = node;\n }\n };\n"],"mappings":";;;;AAMA,IAAa,KAAc,EACzB,OACA,YACA,SACA,aACA,kBAQA,kBAAC,SAAD;CAAW;CAAa;CAAS,WAAW,EAAG,EAAmB,CAAI,GAAG,0BAA0B;WAAnG,CACG,GACA,KACC,kBAAC,QAAD;EAAM,WAAU;EAA+B,eAAY;YAAO;CAE5D,CAAA,CAEH;IAGI,KAAgB,EAC3B,OACA,SACA,cACA,uBAOI,CAAC,KAAa,CAAC,IAAsB,OAEvC,kBAAC,QAAD;CAAU;CAAI,WAAW,EAAqB;EAAE;EAAM,UAAU,EAAQ;CAAW,CAAC;WACjF,KAAa;AACV,CAAA,GCzCG,KACP,GAAG,OACN,MAAS;CACR,KAAK,IAAM,KAAO,GAChB,AAAI,OAAO,KAAQ,aAAY,EAAI,CAAI,IAC9B,MAAK,EAAI,UAAU;AAEhC"}
|
package/dist/popup.js
ADDED
package/dist/radio.js
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { t as e } from "./TailwindUtil-DiNvXuNl.js";
|
|
3
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
4
|
+
//#region src/components/radio/Radio.tsx
|
|
5
|
+
var n = ({ className: n, id: r, name: i, onChange: a, disabled: o, isChecked: s }) => /* @__PURE__ */ t("input", {
|
|
6
|
+
type: "radio",
|
|
7
|
+
disabled: o,
|
|
8
|
+
checked: s,
|
|
9
|
+
id: r,
|
|
10
|
+
name: i,
|
|
11
|
+
className: e("petnowRadio", n),
|
|
12
|
+
onChange: a
|
|
13
|
+
});
|
|
14
|
+
//#endregion
|
|
15
|
+
export { n as default };
|
|
16
|
+
|
|
17
|
+
//# sourceMappingURL=radio.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"radio.js","names":[],"sources":["../src/components/radio/Radio.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../../utils/TailwindUtil\";\n\ninterface Props {\n className?: string;\n id?: string;\n name?: string;\n onChange?: () => void;\n disabled?: boolean;\n isChecked?: boolean;\n}\n\nconst Radio = ({ className, id, name, onChange, disabled, isChecked }: Props) => {\n return (\n <input\n type=\"radio\"\n disabled={disabled}\n checked={isChecked}\n id={id}\n name={name}\n className={cn(\"petnowRadio\", className)}\n onChange={onChange}\n />\n );\n};\n\nexport default Radio;\n"],"mappings":";;;;AAaA,IAAM,KAAS,EAAE,cAAW,OAAI,SAAM,aAAU,aAAU,mBAEtD,kBAAC,SAAD;CACE,MAAK;CACK;CACV,SAAS;CACL;CACE;CACN,WAAW,EAAG,eAAe,CAAS;CAC5B;AACX,CAAA"}
|
package/dist/select.js
ADDED
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { t as e } from "./TailwindUtil-DiNvXuNl.js";
|
|
3
|
+
import { a as t, n, o as r } from "./fieldStyles-DyZu__hI.js";
|
|
4
|
+
import { ChevronDownIcon as i } from "./icons/action/chevron-down.js";
|
|
5
|
+
import { n as a, r as o, t as s } from "./mergeRefs-BHwdBwNQ.js";
|
|
6
|
+
import { jsx as c, jsxs as l } from "react/jsx-runtime";
|
|
7
|
+
import { useEffect as u, useId as d, useMemo as f, useRef as p, useState as m } from "react";
|
|
8
|
+
//#region src/components/select/Select.tsx
|
|
9
|
+
var h = ({ id: h, label: g, options: _, value: v, defaultValue: y, onChange: b, placeholder: x, errorText: S, assistiveText: C, size: w = "large", required: T, disabled: E = !1, className: D, "aria-describedby": O, ref: k, ...A }) => {
|
|
10
|
+
let j = d(), M = h ?? j, N = `${M}-message`, P = !!S, F = !!(S || C), [I, L] = m(y ?? ""), R = v ?? I, z = _.map((e) => typeof e == "string" ? {
|
|
11
|
+
value: e,
|
|
12
|
+
label: e
|
|
13
|
+
} : e), B = x === void 0 && !z.some((e) => e.value === R), V = p(null), H = f(() => s(V, k), [k]);
|
|
14
|
+
return u(() => {
|
|
15
|
+
let e = V.current?.form;
|
|
16
|
+
if (v !== void 0 || !e) return;
|
|
17
|
+
let t = () => setTimeout(() => L(V.current?.value ?? ""));
|
|
18
|
+
return e.addEventListener("reset", t), () => e.removeEventListener("reset", t);
|
|
19
|
+
}, [v]), /* @__PURE__ */ l("div", {
|
|
20
|
+
className: e("flex w-full min-w-0 flex-col gap-2", D),
|
|
21
|
+
children: [
|
|
22
|
+
g && /* @__PURE__ */ c(a, {
|
|
23
|
+
htmlFor: M,
|
|
24
|
+
size: w,
|
|
25
|
+
required: T,
|
|
26
|
+
children: g
|
|
27
|
+
}),
|
|
28
|
+
/* @__PURE__ */ l("div", {
|
|
29
|
+
className: "relative",
|
|
30
|
+
children: [/* @__PURE__ */ l("select", {
|
|
31
|
+
...A,
|
|
32
|
+
ref: H,
|
|
33
|
+
id: M,
|
|
34
|
+
value: v,
|
|
35
|
+
defaultValue: v === void 0 ? y ?? "" : void 0,
|
|
36
|
+
required: T,
|
|
37
|
+
disabled: E,
|
|
38
|
+
"aria-invalid": P || void 0,
|
|
39
|
+
"aria-describedby": r(O, F && N),
|
|
40
|
+
onChange: (e) => {
|
|
41
|
+
L(e.target.value), b?.(e.target.value);
|
|
42
|
+
},
|
|
43
|
+
className: e(n({
|
|
44
|
+
size: w,
|
|
45
|
+
hasError: P,
|
|
46
|
+
disabled: E
|
|
47
|
+
}), "w-full min-w-0 cursor-pointer appearance-none truncate outline-none disabled:cursor-not-allowed", !E && !P && "focus:border-border-base-neutral-4", w === "large" ? "pr-12" : "pr-11", t(w), R ? "text-text-base-neutral-5" : "text-text-base-neutral-2"),
|
|
48
|
+
children: [
|
|
49
|
+
x !== void 0 && /* @__PURE__ */ c("option", {
|
|
50
|
+
value: "",
|
|
51
|
+
children: x
|
|
52
|
+
}),
|
|
53
|
+
B && /* @__PURE__ */ c("option", {
|
|
54
|
+
value: R,
|
|
55
|
+
hidden: !0,
|
|
56
|
+
disabled: !0
|
|
57
|
+
}),
|
|
58
|
+
z.map((e) => /* @__PURE__ */ c("option", {
|
|
59
|
+
value: e.value,
|
|
60
|
+
disabled: e.disabled,
|
|
61
|
+
className: "text-text-base-neutral-5",
|
|
62
|
+
children: e.label
|
|
63
|
+
}, e.value))
|
|
64
|
+
]
|
|
65
|
+
}), /* @__PURE__ */ c(i, {
|
|
66
|
+
"aria-hidden": "true",
|
|
67
|
+
className: e("text-icon-base-neutral-3 pointer-events-none absolute top-1/2 size-6 -translate-y-1/2", w === "large" ? "right-4" : "right-3")
|
|
68
|
+
})]
|
|
69
|
+
}),
|
|
70
|
+
/* @__PURE__ */ c(o, {
|
|
71
|
+
id: N,
|
|
72
|
+
size: w,
|
|
73
|
+
errorText: S,
|
|
74
|
+
assistiveText: C
|
|
75
|
+
})
|
|
76
|
+
]
|
|
77
|
+
});
|
|
78
|
+
};
|
|
79
|
+
//#endregion
|
|
80
|
+
export { h as Select };
|
|
81
|
+
|
|
82
|
+
//# sourceMappingURL=select.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"select.js","names":[],"sources":["../src/components/select/Select.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useId, useMemo, useRef, useState } from \"react\";\n\nimport { ChevronDownIcon } from \"../icons/action/ChevronDownIcon\";\n\nimport type { ComponentPropsWithRef, ReactNode } from \"react\";\n\nimport { FieldLabel, FieldMessage } from \"@/components/ui/field\";\nimport { fieldContainerVariants, fieldValueFontSize, joinIds, type FieldSize } from \"@/components/ui/fieldStyles\";\nimport { mergeRefs } from \"@/utils/mergeRefs\";\nimport { cn } from \"@/utils/TailwindUtil\";\n\nexport interface SelectOption {\n value: string;\n label: string;\n disabled?: boolean;\n}\n\ninterface SelectProps\n extends Omit<ComponentPropsWithRef<\"select\">, \"size\" | \"value\" | \"defaultValue\" | \"onChange\" | \"children\"> {\n /** 칸 위에 보이는 이름. `<label>`로 `<select>`에 연결된다. */\n label?: string;\n /** 문자열 옵션은 값과 표시 이름이 같다. */\n options: (string | SelectOption)[];\n value?: string;\n defaultValue?: string;\n onChange?: (value: string) => void;\n /** 값이 없을 때 보이는 첫 옵션(값 `\"\"`). `required`이면 이 옵션으로는 제출되지 않는다. */\n placeholder?: string;\n errorText?: string;\n assistiveText?: ReactNode;\n size?: FieldSize;\n}\n\n/** 목록에서 하나를 고르는 입력. 브라우저 기본 `<select>`라 모바일 선택기·폼 검증·키보드 조작을 그대로 쓴다. */\nconst Select = ({\n id,\n label,\n options,\n value,\n defaultValue,\n onChange,\n placeholder,\n errorText,\n assistiveText,\n size = \"large\",\n required,\n disabled = false,\n className,\n \"aria-describedby\": ariaDescribedBy,\n ref,\n ...selectProps\n}: SelectProps) => {\n const generatedId = useId();\n const selectId = id ?? generatedId;\n const messageId = `${selectId}-message`;\n const hasError = Boolean(errorText);\n const hasMessage = Boolean(errorText || assistiveText);\n const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? \"\");\n const currentValue = value ?? uncontrolledValue;\n const normalized = options.map((option) => (typeof option === \"string\" ? { value: option, label: option } : option));\n // placeholder 없이 옵션에 없는 값(예: \"\")이면 브라우저가 첫 옵션을 보여 주므로, 숨긴 빈 옵션을 고른 상태로 둔다.\n const needsEmptyOption = placeholder === undefined && !normalized.some((option) => option.value === currentValue);\n const selectRef = useRef<HTMLSelectElement | null>(null);\n const setRef = useMemo(() => mergeRefs(selectRef, ref), [ref]);\n\n // 비제어일 때 form.reset()은 onChange 없이 값을 되돌리므로 placeholder 색을 다시 맞춘다.\n useEffect(() => {\n const form = selectRef.current?.form;\n if (value !== undefined || !form) return;\n const sync = () => setTimeout(() => setUncontrolledValue(selectRef.current?.value ?? \"\"));\n form.addEventListener(\"reset\", sync);\n return () => form.removeEventListener(\"reset\", sync);\n }, [value]);\n\n return (\n <div className={cn(\"flex w-full min-w-0 flex-col gap-2\", className)}>\n {label && (\n <FieldLabel htmlFor={selectId} size={size} required={required}>\n {label}\n </FieldLabel>\n )}\n <div className=\"relative\">\n <select\n {...selectProps}\n ref={setRef}\n id={selectId}\n value={value}\n defaultValue={value === undefined ? (defaultValue ?? \"\") : undefined}\n required={required}\n disabled={disabled}\n aria-invalid={hasError || undefined}\n aria-describedby={joinIds(ariaDescribedBy, hasMessage && messageId)}\n onChange={(event) => {\n setUncontrolledValue(event.target.value);\n onChange?.(event.target.value);\n }}\n className={cn(\n fieldContainerVariants({ size, hasError, disabled }),\n \"w-full min-w-0 cursor-pointer appearance-none truncate outline-none disabled:cursor-not-allowed\",\n !disabled && !hasError && \"focus:border-border-base-neutral-4\",\n size === \"large\" ? \"pr-12\" : \"pr-11\",\n fieldValueFontSize(size),\n currentValue ? \"text-text-base-neutral-5\" : \"text-text-base-neutral-2\",\n )}\n >\n {placeholder !== undefined && <option value=\"\">{placeholder}</option>}\n {needsEmptyOption && <option value={currentValue} hidden disabled />}\n {normalized.map((option) => (\n <option\n key={option.value}\n value={option.value}\n disabled={option.disabled}\n className=\"text-text-base-neutral-5\"\n >\n {option.label}\n </option>\n ))}\n </select>\n <ChevronDownIcon\n aria-hidden=\"true\"\n className={cn(\n \"text-icon-base-neutral-3 pointer-events-none absolute top-1/2 size-6 -translate-y-1/2\",\n size === \"large\" ? \"right-4\" : \"right-3\",\n )}\n />\n </div>\n <FieldMessage id={messageId} size={size} errorText={errorText} assistiveText={assistiveText} />\n </div>\n );\n};\n\nexport { Select };\n"],"mappings":";;;;;;;;AAoCA,IAAM,KAAU,EACd,OACA,UACA,YACA,UACA,iBACA,aACA,gBACA,cACA,kBACA,UAAO,SACP,aACA,cAAW,IACX,cACA,oBAAoB,GACpB,QACA,GAAG,QACc;CACjB,IAAM,IAAc,EAAM,GACpB,IAAW,KAAM,GACjB,IAAY,GAAG,EAAS,WACxB,IAAW,EAAQ,GACnB,IAAa,GAAQ,KAAa,IAClC,CAAC,GAAmB,KAAwB,EAAS,KAAgB,EAAE,GACvE,IAAe,KAAS,GACxB,IAAa,EAAQ,KAAK,MAAY,OAAO,KAAW,WAAW;EAAE,OAAO;EAAQ,OAAO;CAAO,IAAI,CAAO,GAE7G,IAAmB,MAAgB,KAAA,KAAa,CAAC,EAAW,MAAM,MAAW,EAAO,UAAU,CAAY,GAC1G,IAAY,EAAiC,IAAI,GACjD,IAAS,QAAc,EAAU,GAAW,CAAG,GAAG,CAAC,CAAG,CAAC;CAW7D,OARA,QAAgB;EACd,IAAM,IAAO,EAAU,SAAS;EAChC,IAAI,MAAU,KAAA,KAAa,CAAC,GAAM;EAClC,IAAM,UAAa,iBAAiB,EAAqB,EAAU,SAAS,SAAS,EAAE,CAAC;EAExF,OADA,EAAK,iBAAiB,SAAS,CAAI,SACtB,EAAK,oBAAoB,SAAS,CAAI;CACrD,GAAG,CAAC,CAAK,CAAC,GAGR,kBAAC,OAAD;EAAK,WAAW,EAAG,sCAAsC,CAAS;YAAlE;GACG,KACC,kBAAC,GAAD;IAAY,SAAS;IAAgB;IAAgB;cAClD;GACS,CAAA;GAEd,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,UAAD;KACE,GAAI;KACJ,KAAK;KACL,IAAI;KACG;KACP,cAAc,MAAU,KAAA,IAAa,KAAgB,KAAM,KAAA;KACjD;KACA;KACV,gBAAc,KAAY,KAAA;KAC1B,oBAAkB,EAAQ,GAAiB,KAAc,CAAS;KAClE,WAAW,MAAU;MAEnB,AADA,EAAqB,EAAM,OAAO,KAAK,GACvC,IAAW,EAAM,OAAO,KAAK;KAC/B;KACA,WAAW,EACT,EAAuB;MAAE;MAAM;MAAU;KAAS,CAAC,GACnD,mGACA,CAAC,KAAY,CAAC,KAAY,sCAC1B,MAAS,UAAU,UAAU,SAC7B,EAAmB,CAAI,GACvB,IAAe,6BAA6B,0BAC9C;eArBF;MAuBG,MAAgB,KAAA,KAAa,kBAAC,UAAD;OAAQ,OAAM;iBAAI;MAAoB,CAAA;MACnE,KAAoB,kBAAC,UAAD;OAAQ,OAAO;OAAc,QAAA;OAAO,UAAA;MAAU,CAAA;MAClE,EAAW,KAAK,MACf,kBAAC,UAAD;OAEE,OAAO,EAAO;OACd,UAAU,EAAO;OACjB,WAAU;iBAET,EAAO;MACF,GAND,EAAO,KAMN,CACT;KACK;QACR,kBAAC,GAAD;KACE,eAAY;KACZ,WAAW,EACT,yFACA,MAAS,UAAU,YAAY,SACjC;IACD,CAAA,CACE;;GACL,kBAAC,GAAD;IAAc,IAAI;IAAiB;IAAiB;IAA0B;GAAgB,CAAA;EAC3F;;AAET"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ComponentPropsWithRef } from 'react';
|
|
2
|
+
interface Props extends Omit<ComponentPropsWithRef<"input">, "type" | "checked" | "onChange"> {
|
|
3
|
+
className?: string;
|
|
4
|
+
id?: string;
|
|
5
|
+
onChange?: (newValue: boolean) => void;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
/** 제어 컴포넌트로 쓸 때의 체크 상태. 넘기지 않으면 비제어 컴포넌트가 되고, 처음 상태는 `defaultChecked`로 정한다. */
|
|
8
|
+
isChecked?: boolean;
|
|
9
|
+
}
|
|
10
|
+
declare const Checkbox: ({ className, id, onChange, disabled, isChecked, ...inputProps }: Props) => import("react").JSX.Element;
|
|
11
|
+
export default Checkbox;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { ComponentPropsWithRef, ReactNode } from 'react';
|
|
2
|
+
import { FieldSize } from '../ui/fieldStyles';
|
|
3
|
+
export interface ComboboxOption {
|
|
4
|
+
value: string;
|
|
5
|
+
label: string;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
}
|
|
8
|
+
interface ComboboxProps extends Omit<ComponentPropsWithRef<"input">, "size" | "value" | "defaultValue" | "onChange" | "type" | "role" | "children"> {
|
|
9
|
+
/** 칸 위에 보이는 이름. `<label>`로 입력에 연결된다. */
|
|
10
|
+
label?: string;
|
|
11
|
+
/** 문자열 옵션은 값과 표시 이름이 같다. */
|
|
12
|
+
options: (string | ComboboxOption)[];
|
|
13
|
+
/** 고른 옵션의 값. 고르지 않았으면 `""`. */
|
|
14
|
+
value: string;
|
|
15
|
+
/** 옵션을 고르면 그 값으로, 고른 뒤 다시 입력하기 시작하면 `""`로 호출된다. */
|
|
16
|
+
onChange: (value: string) => void;
|
|
17
|
+
/** 입력한 검색어로 옵션을 거른다. 기본은 대소문자·공백을 무시한 부분 일치. */
|
|
18
|
+
filter?: (option: ComboboxOption, query: string) => boolean;
|
|
19
|
+
/** 맞는 옵션이 없을 때 목록에 보이는 문구. 없으면 목록을 닫는다. */
|
|
20
|
+
emptyText?: ReactNode;
|
|
21
|
+
/** 목록 열기 버튼의 접근 가능한 이름. 기본은 `label`. */
|
|
22
|
+
toggleLabel?: string;
|
|
23
|
+
/** `required`인데 입력한 글자가 옵션으로 골라지지 않았을 때 브라우저 검증 메시지. 다국어 페이지에서는 번역해 넘긴다. */
|
|
24
|
+
invalidSelectionText?: string;
|
|
25
|
+
errorText?: string;
|
|
26
|
+
assistiveText?: ReactNode;
|
|
27
|
+
size?: FieldSize;
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* 입력해서 검색하고 목록에서 하나를 고르는 입력(WAI-ARIA combobox, list autocomplete).
|
|
31
|
+
* 포커스는 입력에 남고 목록의 현재 항목은 `aria-activedescendant`로 알린다.
|
|
32
|
+
* 고른 값만 `value`가 되고, 입력한 글자는 고르기 전까지 값이 아니다.
|
|
33
|
+
*/
|
|
34
|
+
declare const Combobox: ({ id, label, options, value, onChange, filter, emptyText, toggleLabel, invalidSelectionText, errorText, assistiveText, size, name, required, disabled, placeholder, className, autoComplete, "aria-describedby": ariaDescribedBy, onBlur, onKeyDown, onClick, ref, ...inputProps }: ComboboxProps) => import("react").JSX.Element;
|
|
35
|
+
export { Combobox };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { ComponentPropsWithRef, ReactNode } from 'react';
|
|
2
|
+
import { FieldSize } from '../ui/fieldStyles';
|
|
3
|
+
export interface SelectOption {
|
|
4
|
+
value: string;
|
|
5
|
+
label: string;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
}
|
|
8
|
+
interface SelectProps extends Omit<ComponentPropsWithRef<"select">, "size" | "value" | "defaultValue" | "onChange" | "children"> {
|
|
9
|
+
/** 칸 위에 보이는 이름. `<label>`로 `<select>`에 연결된다. */
|
|
10
|
+
label?: string;
|
|
11
|
+
/** 문자열 옵션은 값과 표시 이름이 같다. */
|
|
12
|
+
options: (string | SelectOption)[];
|
|
13
|
+
value?: string;
|
|
14
|
+
defaultValue?: string;
|
|
15
|
+
onChange?: (value: string) => void;
|
|
16
|
+
/** 값이 없을 때 보이는 첫 옵션(값 `""`). `required`이면 이 옵션으로는 제출되지 않는다. */
|
|
17
|
+
placeholder?: string;
|
|
18
|
+
errorText?: string;
|
|
19
|
+
assistiveText?: ReactNode;
|
|
20
|
+
size?: FieldSize;
|
|
21
|
+
}
|
|
22
|
+
/** 목록에서 하나를 고르는 입력. 브라우저 기본 `<select>`라 모바일 선택기·폼 검증·키보드 조작을 그대로 쓴다. */
|
|
23
|
+
declare const Select: ({ id, label, options, value, defaultValue, onChange, placeholder, errorText, assistiveText, size, required, disabled, className, "aria-describedby": ariaDescribedBy, ref, ...selectProps }: SelectProps) => import("react").JSX.Element;
|
|
24
|
+
export { Select };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { FieldSize } from './fieldStyles';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
export declare const FieldLabel: ({ id, htmlFor, size, required, children, }: {
|
|
4
|
+
id?: string;
|
|
5
|
+
htmlFor: string;
|
|
6
|
+
size: FieldSize;
|
|
7
|
+
required?: boolean;
|
|
8
|
+
children: ReactNode;
|
|
9
|
+
}) => import("react").JSX.Element;
|
|
10
|
+
export declare const FieldMessage: ({ id, size, errorText, assistiveText, }: {
|
|
11
|
+
id: string;
|
|
12
|
+
size: FieldSize;
|
|
13
|
+
errorText?: string;
|
|
14
|
+
assistiveText?: ReactNode;
|
|
15
|
+
}) => import("react").JSX.Element | null;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export declare const FIELD_RADIUS = "rounded-[4px]";
|
|
2
|
+
export declare const fieldContainerVariants: (props?: ({
|
|
3
|
+
size?: "small" | "large" | null | undefined;
|
|
4
|
+
hasError?: boolean | null | undefined;
|
|
5
|
+
disabled?: boolean | null | undefined;
|
|
6
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
7
|
+
export declare const fieldMessageVariants: (props?: ({
|
|
8
|
+
size?: "small" | "large" | null | undefined;
|
|
9
|
+
hasError?: boolean | null | undefined;
|
|
10
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
11
|
+
export type FieldSize = "large" | "small";
|
|
12
|
+
export declare const fieldLabelFontSize: (size: FieldSize) => "text-title-18-bold" | "text-title-14-bold";
|
|
13
|
+
export declare const fieldValueFontSize: (size: FieldSize) => "text-title-20-regular" | "text-body-16-regular";
|
|
14
|
+
export declare const joinIds: (...ids: (string | false | undefined)[]) => string | undefined;
|