@tipp/ui 1.4.25 → 1.4.26
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/dist/atoms/index.cjs +37 -13
- package/dist/atoms/index.cjs.map +1 -1
- package/dist/atoms/index.js +1 -1
- package/dist/atoms/select.cjs +26 -2
- package/dist/atoms/select.cjs.map +1 -1
- package/dist/atoms/select.d.cts +9 -2
- package/dist/atoms/select.d.ts +9 -2
- package/dist/atoms/select.js +1 -1
- package/dist/chunk-AA46GU2O.js +59 -0
- package/dist/chunk-AA46GU2O.js.map +1 -0
- package/dist/chunk-EA4OHG4N.js +98 -0
- package/dist/chunk-EA4OHG4N.js.map +1 -0
- package/dist/chunk-JZCXPFFN.js +47 -0
- package/dist/chunk-JZCXPFFN.js.map +1 -0
- package/dist/chunk-QQTD44PM.js +49 -0
- package/dist/chunk-QQTD44PM.js.map +1 -0
- package/dist/chunk-QYTUXY23.js +41 -0
- package/dist/chunk-QYTUXY23.js.map +1 -0
- package/dist/chunk-QZ6PXWPS.js +36 -0
- package/dist/chunk-QZ6PXWPS.js.map +1 -0
- package/dist/chunk-TIPWA4O6.js +46 -0
- package/dist/chunk-TIPWA4O6.js.map +1 -0
- package/dist/chunk-UNBE7CCN.js +98 -0
- package/dist/chunk-UNBE7CCN.js.map +1 -0
- package/dist/chunk-WDIFRVLH.js +97 -0
- package/dist/chunk-WDIFRVLH.js.map +1 -0
- package/dist/chunk-XKRCZGMT.js +49 -0
- package/dist/chunk-XKRCZGMT.js.map +1 -0
- package/dist/chunk-XLLFOQLR.js +98 -0
- package/dist/chunk-XLLFOQLR.js.map +1 -0
- package/dist/chunk-Z4GDSP7H.js +59 -0
- package/dist/chunk-Z4GDSP7H.js.map +1 -0
- package/dist/chunk-ZCMYEIG5.js +98 -0
- package/dist/chunk-ZCMYEIG5.js.map +1 -0
- package/dist/index.cjs +39 -15
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +3 -0
- package/dist/index.css.map +1 -1
- package/dist/index.js +6 -6
- package/dist/molecules/expand-table/index.js +1 -1
- package/dist/molecules/expand-table/row.js +1 -1
- package/dist/molecules/index.js +2 -2
- package/dist/molecules/navigation.js +1 -1
- package/dist/molecules/tag-selector.js +1 -1
- package/package.json +1 -1
- package/src/atoms/select.tsx +43 -4
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import {
|
|
2
|
+
IconButton
|
|
3
|
+
} from "./chunk-O3DNDMV3.js";
|
|
4
|
+
import {
|
|
5
|
+
Heading
|
|
6
|
+
} from "./chunk-HK224ADT.js";
|
|
7
|
+
import {
|
|
8
|
+
Flex
|
|
9
|
+
} from "./chunk-25HMMI7R.js";
|
|
10
|
+
import {
|
|
11
|
+
ChevronLeftIcon,
|
|
12
|
+
ChevronRightIcon
|
|
13
|
+
} from "./chunk-F77ES5Y3.js";
|
|
14
|
+
import {
|
|
15
|
+
__objRest,
|
|
16
|
+
__spreadProps,
|
|
17
|
+
__spreadValues
|
|
18
|
+
} from "./chunk-N552FDTV.js";
|
|
19
|
+
|
|
20
|
+
// src/molecules/date-picker/index.tsx
|
|
21
|
+
import { forwardRef } from "react";
|
|
22
|
+
import * as RDP from "react-datepicker";
|
|
23
|
+
import { registerLocale, setDefaultLocale } from "react-datepicker";
|
|
24
|
+
import { ko as fnKo } from "date-fns/locale";
|
|
25
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
26
|
+
registerLocale("ko", fnKo);
|
|
27
|
+
setDefaultLocale("ko");
|
|
28
|
+
var ReactDatePicker = RDP.default.default || RDP.default || RDP;
|
|
29
|
+
var DatePicker = forwardRef(
|
|
30
|
+
(props, ref) => {
|
|
31
|
+
const _a = props, { size = "medium" } = _a, rest = __objRest(_a, ["size"]);
|
|
32
|
+
return /* @__PURE__ */ jsx(
|
|
33
|
+
ReactDatePicker,
|
|
34
|
+
__spreadProps(__spreadValues({
|
|
35
|
+
dateFormat: "YYYY/MM/dd",
|
|
36
|
+
nextMonthButtonLabel: "\uB2E4\uC74C \uB2EC",
|
|
37
|
+
placeholderText: "YYYY/mm/dd",
|
|
38
|
+
previousMonthButtonLabel: "\uC774\uC804 \uB2EC",
|
|
39
|
+
ref,
|
|
40
|
+
renderCustomHeader,
|
|
41
|
+
showPopperArrow: false,
|
|
42
|
+
timeIntervals: 10
|
|
43
|
+
}, rest), {
|
|
44
|
+
calendarClassName: `tipp_datePicker_calendar ${rest.calendarClassName || ""}`,
|
|
45
|
+
timeCaption: "\uC2DC\uAC04",
|
|
46
|
+
wrapperClassName: `tipp_datePicker ${size} ${rest.wrapperClassName || ""}`
|
|
47
|
+
})
|
|
48
|
+
);
|
|
49
|
+
}
|
|
50
|
+
);
|
|
51
|
+
DatePicker.displayName = "DatePicker";
|
|
52
|
+
var renderCustomHeader = (props) => {
|
|
53
|
+
const {
|
|
54
|
+
date,
|
|
55
|
+
decreaseMonth,
|
|
56
|
+
increaseMonth,
|
|
57
|
+
prevMonthButtonDisabled,
|
|
58
|
+
nextMonthButtonDisabled
|
|
59
|
+
} = props;
|
|
60
|
+
console.log({ date });
|
|
61
|
+
const year = date ? date.getFullYear() : "-";
|
|
62
|
+
const month = date ? date.getMonth() + 1 : "-";
|
|
63
|
+
return /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "between", pb: "2", pl: "2", pr: "2", children: [
|
|
64
|
+
/* @__PURE__ */ jsx(
|
|
65
|
+
IconButton,
|
|
66
|
+
{
|
|
67
|
+
disabled: prevMonthButtonDisabled,
|
|
68
|
+
onClick: decreaseMonth,
|
|
69
|
+
variant: "ghost",
|
|
70
|
+
children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
|
|
71
|
+
}
|
|
72
|
+
),
|
|
73
|
+
/* @__PURE__ */ jsxs(Flex, { gap: "3", children: [
|
|
74
|
+
/* @__PURE__ */ jsxs(Heading, { variant: "heading4", weight: "regular", children: [
|
|
75
|
+
year,
|
|
76
|
+
"\uB144"
|
|
77
|
+
] }),
|
|
78
|
+
/* @__PURE__ */ jsxs(Heading, { variant: "heading4", weight: "regular", children: [
|
|
79
|
+
month,
|
|
80
|
+
"\uC6D4"
|
|
81
|
+
] })
|
|
82
|
+
] }),
|
|
83
|
+
/* @__PURE__ */ jsx(
|
|
84
|
+
IconButton,
|
|
85
|
+
{
|
|
86
|
+
disabled: nextMonthButtonDisabled,
|
|
87
|
+
onClick: increaseMonth,
|
|
88
|
+
variant: "ghost",
|
|
89
|
+
children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
|
|
90
|
+
}
|
|
91
|
+
)
|
|
92
|
+
] });
|
|
93
|
+
};
|
|
94
|
+
|
|
95
|
+
export {
|
|
96
|
+
DatePicker
|
|
97
|
+
};
|
|
98
|
+
//# sourceMappingURL=chunk-XLLFOQLR.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/molecules/date-picker/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any -- ReactPicker의 렌더러가 object를 return함 버그를 해결하기 위해 강제 assertion 사용 */\n/* eslint-disable @typescript-eslint/no-unsafe-member-access -- ReactPicker의 렌더러가 object를 return함 버그를 해결하기 위해 강제 assertion 사용 */\nimport type { ElementRef } from 'react';\nimport React, { forwardRef } from 'react';\nimport type { DatePickerProps as ReactDatePickerProps } from 'react-datepicker';\nimport * as RDP from 'react-datepicker';\nimport { registerLocale, setDefaultLocale } from 'react-datepicker';\nimport { ko as fnKo } from 'date-fns/locale';\nimport { IconButton } from '../../atoms/icon-button';\nimport { Flex } from '../../atoms/flex';\nimport { ChevronLeftIcon, ChevronRightIcon } from '../../icon';\nimport { Heading } from '../../atoms/heading';\n\nregisterLocale('ko', fnKo);\nsetDefaultLocale('ko');\n\nexport type DatePickerProps = ReactDatePickerProps & {\n size?: 'small' | 'medium' | 'large';\n};\ntype DatePickerRef = ElementRef<typeof ReactDatePicker>;\n\nconst ReactDatePicker = ((RDP.default as any).default ||\n (RDP.default as any) ||\n (RDP as any)) as typeof RDP.default;\n\nexport const DatePicker = forwardRef<DatePickerRef, DatePickerProps>(\n (props, ref): React.ReactElement => {\n const { size = 'medium', ...rest } = props;\n return (\n <ReactDatePicker\n dateFormat=\"YYYY/MM/dd\"\n nextMonthButtonLabel=\"다음 달\"\n placeholderText=\"YYYY/mm/dd\"\n previousMonthButtonLabel=\"이전 달\"\n ref={ref}\n renderCustomHeader={renderCustomHeader}\n showPopperArrow={false}\n timeIntervals={10}\n {...rest}\n calendarClassName={`tipp_datePicker_calendar ${rest.calendarClassName || ''}`}\n timeCaption=\"시간\"\n wrapperClassName={`tipp_datePicker ${size} ${rest.wrapperClassName || ''}`}\n />\n );\n }\n);\n\nDatePicker.displayName = 'DatePicker';\n\nconst renderCustomHeader: ReactDatePickerProps['renderCustomHeader'] = (\n props\n) => {\n const {\n date,\n decreaseMonth,\n increaseMonth,\n prevMonthButtonDisabled,\n nextMonthButtonDisabled,\n } = props;\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- date가 undefined일 수 있음\n console.log({ date });\n const year = date ? date.getFullYear() : '-';\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- date가 undefined일 수 있음\n const month = date ? date.getMonth() + 1 : '-';\n\n return (\n <Flex align=\"center\" justify=\"between\" pb=\"2\" pl=\"2\" pr=\"2\">\n <IconButton\n disabled={prevMonthButtonDisabled}\n onClick={decreaseMonth}\n variant=\"ghost\"\n >\n <ChevronLeftIcon />\n </IconButton>\n <Flex gap=\"3\">\n <Heading variant=\"heading4\" weight=\"regular\">\n {year}년\n </Heading>\n <Heading variant=\"heading4\" weight=\"regular\">\n {month}월\n </Heading>\n </Flex>\n\n <IconButton\n disabled={nextMonthButtonDisabled}\n onClick={increaseMonth}\n variant=\"ghost\"\n >\n <ChevronRightIcon />\n </IconButton>\n </Flex>\n );\n};\n\n// DatePicker.displayName = 'DatePicker';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAGA,SAAgB,kBAAkB;AAElC,YAAY,SAAS;AACrB,SAAS,gBAAgB,wBAAwB;AACjD,SAAS,MAAM,YAAY;AAsBrB,cA+CE,YA/CF;AAhBN,eAAe,MAAM,IAAI;AACzB,iBAAiB,IAAI;AAOrB,IAAM,kBAAwB,YAAgB,WACvC,eACJ;AAEI,IAAM,aAAa;AAAA,EACxB,CAAC,OAAO,QAA4B;AAClC,UAAqC,YAA7B,SAAO,SA3BnB,IA2ByC,IAAT,iBAAS,IAAT,CAApB;AACR,WACE;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,sBAAqB;AAAA,QACrB,iBAAgB;AAAA,QAChB,0BAAyB;AAAA,QACzB;AAAA,QACA;AAAA,QACA,iBAAiB;AAAA,QACjB,eAAe;AAAA,SACX,OATL;AAAA,QAUC,mBAAmB,4BAA4B,KAAK,qBAAqB,EAAE;AAAA,QAC3E,aAAY;AAAA,QACZ,kBAAkB,mBAAmB,IAAI,IAAI,KAAK,oBAAoB,EAAE;AAAA;AAAA,IAC1E;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAM,qBAAiE,CACrE,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAGJ,UAAQ,IAAI,EAAE,KAAK,CAAC;AACpB,QAAM,OAAO,OAAO,KAAK,YAAY,IAAI;AAEzC,QAAM,QAAQ,OAAO,KAAK,SAAS,IAAI,IAAI;AAE3C,SACE,qBAAC,QAAK,OAAM,UAAS,SAAQ,WAAU,IAAG,KAAI,IAAG,KAAI,IAAG,KACtD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,SAAS;AAAA,QACT,SAAQ;AAAA,QAER,8BAAC,mBAAgB;AAAA;AAAA,IACnB;AAAA,IACA,qBAAC,QAAK,KAAI,KACR;AAAA,2BAAC,WAAQ,SAAQ,YAAW,QAAO,WAChC;AAAA;AAAA,QAAK;AAAA,SACR;AAAA,MACA,qBAAC,WAAQ,SAAQ,YAAW,QAAO,WAChC;AAAA;AAAA,QAAM;AAAA,SACT;AAAA,OACF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,SAAS;AAAA,QACT,SAAQ;AAAA,QAER,8BAAC,oBAAiB;AAAA;AAAA,IACpB;AAAA,KACF;AAEJ;","names":[]}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import {
|
|
2
|
+
__objRest,
|
|
3
|
+
__spreadProps,
|
|
4
|
+
__spreadValues
|
|
5
|
+
} from "./chunk-N552FDTV.js";
|
|
6
|
+
|
|
7
|
+
// src/atoms/select.tsx
|
|
8
|
+
import { Select as RadixSelect } from "@radix-ui/themes";
|
|
9
|
+
import { createContext, forwardRef, useContext, useMemo } from "react";
|
|
10
|
+
import { jsx } from "react/jsx-runtime";
|
|
11
|
+
var SelectContext = createContext({
|
|
12
|
+
error: false
|
|
13
|
+
});
|
|
14
|
+
var Content = forwardRef((props, ref) => {
|
|
15
|
+
const _a = props, { className, isNavigation } = _a, rest = __objRest(_a, ["className", "isNavigation"]);
|
|
16
|
+
const { error } = useContext(SelectContext);
|
|
17
|
+
const cls = useMemo(() => {
|
|
18
|
+
const etc = isNavigation ? "nav-select" : "";
|
|
19
|
+
const errorCls = error ? "tipp-error" : "";
|
|
20
|
+
return [etc, errorCls, className].join(" ");
|
|
21
|
+
}, [className, error, isNavigation]);
|
|
22
|
+
return /* @__PURE__ */ jsx(
|
|
23
|
+
RadixSelect.Content,
|
|
24
|
+
__spreadProps(__spreadValues({
|
|
25
|
+
position: "popper"
|
|
26
|
+
}, rest), {
|
|
27
|
+
className: cls,
|
|
28
|
+
ref
|
|
29
|
+
})
|
|
30
|
+
);
|
|
31
|
+
});
|
|
32
|
+
Content.displayName = "Select.Content";
|
|
33
|
+
var Trigger = forwardRef(
|
|
34
|
+
(props, ref) => {
|
|
35
|
+
const _a = props, { className } = _a, rest = __objRest(_a, ["className"]);
|
|
36
|
+
const { error } = useContext(SelectContext);
|
|
37
|
+
const cls = useMemo(() => {
|
|
38
|
+
const errorCls = error ? "tipp-error" : "";
|
|
39
|
+
return [errorCls, className].join(" ");
|
|
40
|
+
}, [className, error]);
|
|
41
|
+
return /* @__PURE__ */ jsx(RadixSelect.Trigger, __spreadProps(__spreadValues({}, rest), { className: cls, ref }));
|
|
42
|
+
}
|
|
43
|
+
);
|
|
44
|
+
Trigger.displayName = "Select.Trigger";
|
|
45
|
+
function Root(props) {
|
|
46
|
+
const _a = props, { error } = _a, rest = __objRest(_a, ["error"]);
|
|
47
|
+
return /* @__PURE__ */ jsx(SelectContext.Provider, { value: { error }, children: /* @__PURE__ */ jsx(RadixSelect.Root, __spreadValues({}, rest)) });
|
|
48
|
+
}
|
|
49
|
+
Root.displayName = "Select.Root";
|
|
50
|
+
var Select = __spreadProps(__spreadValues({}, RadixSelect), {
|
|
51
|
+
Root,
|
|
52
|
+
Trigger,
|
|
53
|
+
Content
|
|
54
|
+
});
|
|
55
|
+
|
|
56
|
+
export {
|
|
57
|
+
Select
|
|
58
|
+
};
|
|
59
|
+
//# sourceMappingURL=chunk-Z4GDSP7H.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/atoms/select.tsx"],"sourcesContent":["import { Select as RadixSelect } from '@radix-ui/themes';\nimport { createContext, forwardRef, useContext, useMemo } from 'react';\n\nconst SelectContext = createContext<{ error?: boolean }>({\n error: false,\n});\n\nexport type ContentProps = RadixSelect.ContentProps & {\n isNavigation?: boolean;\n};\n\nconst Content = forwardRef<HTMLDivElement, ContentProps>((props, ref) => {\n const { className, isNavigation, ...rest } = props;\n const { error } = useContext(SelectContext);\n\n const cls = useMemo(() => {\n const etc = isNavigation ? 'nav-select' : '';\n const errorCls = error ? 'tipp-error' : '';\n return [etc, errorCls, className].join(' ');\n }, [className, error, isNavigation]);\n\n return (\n <RadixSelect.Content\n position=\"popper\"\n {...rest}\n className={cls}\n ref={ref}\n />\n );\n});\nContent.displayName = 'Select.Content';\n\nconst Trigger = forwardRef<HTMLButtonElement, RadixSelect.TriggerProps>(\n (props, ref) => {\n const { className, ...rest } = props;\n const { error } = useContext(SelectContext);\n\n const cls = useMemo(() => {\n const errorCls = error ? 'tipp-error' : '';\n return [errorCls, className].join(' ');\n }, [className, error]);\n\n return <RadixSelect.Trigger {...rest} className={cls} ref={ref} />;\n }\n);\n\nTrigger.displayName = 'Select.Trigger';\n\ntype RootProps = RadixSelect.RootProps & {\n error?: boolean;\n};\n\nfunction Root(props: RootProps): React.ReactElement {\n const { error, ...rest } = props;\n\n return (\n <SelectContext.Provider value={{ error }}>\n <RadixSelect.Root {...rest} />\n </SelectContext.Provider>\n );\n}\n\nRoot.displayName = 'Select.Root';\n\nexport const Select = {\n ...RadixSelect,\n Root,\n Trigger,\n Content,\n};\n"],"mappings":";;;;;;;AAAA,SAAS,UAAU,mBAAmB;AACtC,SAAS,eAAe,YAAY,YAAY,eAAe;AAqB3D;AAnBJ,IAAM,gBAAgB,cAAmC;AAAA,EACvD,OAAO;AACT,CAAC;AAMD,IAAM,UAAU,WAAyC,CAAC,OAAO,QAAQ;AACvE,QAA6C,YAArC,aAAW,aAZrB,IAY+C,IAAT,iBAAS,IAAT,CAA5B,aAAW;AACnB,QAAM,EAAE,MAAM,IAAI,WAAW,aAAa;AAE1C,QAAM,MAAM,QAAQ,MAAM;AACxB,UAAM,MAAM,eAAe,eAAe;AAC1C,UAAM,WAAW,QAAQ,eAAe;AACxC,WAAO,CAAC,KAAK,UAAU,SAAS,EAAE,KAAK,GAAG;AAAA,EAC5C,GAAG,CAAC,WAAW,OAAO,YAAY,CAAC;AAEnC,SACE;AAAA,IAAC,YAAY;AAAA,IAAZ;AAAA,MACC,UAAS;AAAA,OACL,OAFL;AAAA,MAGC,WAAW;AAAA,MACX;AAAA;AAAA,EACF;AAEJ,CAAC;AACD,QAAQ,cAAc;AAEtB,IAAM,UAAU;AAAA,EACd,CAAC,OAAO,QAAQ;AACd,UAA+B,YAAvB,YAlCZ,IAkCmC,IAAT,iBAAS,IAAT,CAAd;AACR,UAAM,EAAE,MAAM,IAAI,WAAW,aAAa;AAE1C,UAAM,MAAM,QAAQ,MAAM;AACxB,YAAM,WAAW,QAAQ,eAAe;AACxC,aAAO,CAAC,UAAU,SAAS,EAAE,KAAK,GAAG;AAAA,IACvC,GAAG,CAAC,WAAW,KAAK,CAAC;AAErB,WAAO,oBAAC,YAAY,SAAZ,iCAAwB,OAAxB,EAA8B,WAAW,KAAK,MAAU;AAAA,EAClE;AACF;AAEA,QAAQ,cAAc;AAMtB,SAAS,KAAK,OAAsC;AAClD,QAA2B,YAAnB,QArDV,IAqD6B,IAAT,iBAAS,IAAT,CAAV;AAER,SACE,oBAAC,cAAc,UAAd,EAAuB,OAAO,EAAE,MAAM,GACrC,8BAAC,YAAY,MAAZ,mBAAqB,KAAM,GAC9B;AAEJ;AAEA,KAAK,cAAc;AAEZ,IAAM,SAAS,iCACjB,cADiB;AAAA,EAEpB;AAAA,EACA;AAAA,EACA;AACF;","names":[]}
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Flex
|
|
3
|
+
} from "./chunk-25HMMI7R.js";
|
|
4
|
+
import {
|
|
5
|
+
Heading
|
|
6
|
+
} from "./chunk-HK224ADT.js";
|
|
7
|
+
import {
|
|
8
|
+
IconButton
|
|
9
|
+
} from "./chunk-O3DNDMV3.js";
|
|
10
|
+
import {
|
|
11
|
+
ChevronLeftIcon,
|
|
12
|
+
ChevronRightIcon
|
|
13
|
+
} from "./chunk-F77ES5Y3.js";
|
|
14
|
+
import {
|
|
15
|
+
__objRest,
|
|
16
|
+
__spreadProps,
|
|
17
|
+
__spreadValues
|
|
18
|
+
} from "./chunk-N552FDTV.js";
|
|
19
|
+
|
|
20
|
+
// src/molecules/date-picker/index.tsx
|
|
21
|
+
import { forwardRef } from "react";
|
|
22
|
+
import * as RDP from "react-datepicker";
|
|
23
|
+
import { registerLocale, setDefaultLocale } from "react-datepicker";
|
|
24
|
+
import { ko as fnKo } from "date-fns/locale";
|
|
25
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
26
|
+
registerLocale("ko", fnKo);
|
|
27
|
+
setDefaultLocale("ko");
|
|
28
|
+
var ReactDatePicker = RDP.default.default || RDP.default || RDP;
|
|
29
|
+
var DatePicker = forwardRef(
|
|
30
|
+
(props, ref) => {
|
|
31
|
+
const _a = props, { size = "medium" } = _a, rest = __objRest(_a, ["size"]);
|
|
32
|
+
return /* @__PURE__ */ jsx(
|
|
33
|
+
ReactDatePicker,
|
|
34
|
+
__spreadProps(__spreadValues({
|
|
35
|
+
dateFormat: "YYYY/MM/dd",
|
|
36
|
+
nextMonthButtonLabel: "\uB2E4\uC74C \uB2EC",
|
|
37
|
+
placeholderText: "YYYY/mm/dd",
|
|
38
|
+
previousMonthButtonLabel: "\uC774\uC804 \uB2EC",
|
|
39
|
+
ref,
|
|
40
|
+
renderCustomHeader,
|
|
41
|
+
showPopperArrow: false,
|
|
42
|
+
timeIntervals: 10
|
|
43
|
+
}, rest), {
|
|
44
|
+
calendarClassName: `tipp_datePicker_calendar ${rest.calendarClassName || ""}`,
|
|
45
|
+
timeCaption: "\uC2DC\uAC04",
|
|
46
|
+
wrapperClassName: `tipp_datePicker ${size} ${rest.wrapperClassName || ""}`
|
|
47
|
+
})
|
|
48
|
+
);
|
|
49
|
+
}
|
|
50
|
+
);
|
|
51
|
+
DatePicker.displayName = "DatePicker";
|
|
52
|
+
var renderCustomHeader = (props) => {
|
|
53
|
+
const {
|
|
54
|
+
date,
|
|
55
|
+
decreaseMonth,
|
|
56
|
+
increaseMonth,
|
|
57
|
+
prevMonthButtonDisabled,
|
|
58
|
+
nextMonthButtonDisabled
|
|
59
|
+
} = props;
|
|
60
|
+
console.log({ date });
|
|
61
|
+
const year = date ? date.getFullYear() : "-";
|
|
62
|
+
const month = date ? date.getMonth() + 1 : "-";
|
|
63
|
+
return /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "between", pb: "2", pl: "2", pr: "2", children: [
|
|
64
|
+
/* @__PURE__ */ jsx(
|
|
65
|
+
IconButton,
|
|
66
|
+
{
|
|
67
|
+
disabled: prevMonthButtonDisabled,
|
|
68
|
+
onClick: decreaseMonth,
|
|
69
|
+
variant: "ghost",
|
|
70
|
+
children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
|
|
71
|
+
}
|
|
72
|
+
),
|
|
73
|
+
/* @__PURE__ */ jsxs(Flex, { gap: "3", children: [
|
|
74
|
+
/* @__PURE__ */ jsxs(Heading, { variant: "heading4", weight: "regular", children: [
|
|
75
|
+
year,
|
|
76
|
+
"\uB144"
|
|
77
|
+
] }),
|
|
78
|
+
/* @__PURE__ */ jsxs(Heading, { variant: "heading4", weight: "regular", children: [
|
|
79
|
+
month,
|
|
80
|
+
"\uC6D4"
|
|
81
|
+
] })
|
|
82
|
+
] }),
|
|
83
|
+
/* @__PURE__ */ jsx(
|
|
84
|
+
IconButton,
|
|
85
|
+
{
|
|
86
|
+
disabled: nextMonthButtonDisabled,
|
|
87
|
+
onClick: increaseMonth,
|
|
88
|
+
variant: "ghost",
|
|
89
|
+
children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
|
|
90
|
+
}
|
|
91
|
+
)
|
|
92
|
+
] });
|
|
93
|
+
};
|
|
94
|
+
|
|
95
|
+
export {
|
|
96
|
+
DatePicker
|
|
97
|
+
};
|
|
98
|
+
//# sourceMappingURL=chunk-ZCMYEIG5.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/molecules/date-picker/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any -- ReactPicker의 렌더러가 object를 return함 버그를 해결하기 위해 강제 assertion 사용 */\n/* eslint-disable @typescript-eslint/no-unsafe-member-access -- ReactPicker의 렌더러가 object를 return함 버그를 해결하기 위해 강제 assertion 사용 */\nimport type { ElementRef } from 'react';\nimport React, { forwardRef } from 'react';\nimport type { DatePickerProps as ReactDatePickerProps } from 'react-datepicker';\nimport * as RDP from 'react-datepicker';\nimport { registerLocale, setDefaultLocale } from 'react-datepicker';\nimport { ko as fnKo } from 'date-fns/locale';\nimport { IconButton } from '../../atoms/icon-button';\nimport { Flex } from '../../atoms/flex';\nimport { ChevronLeftIcon, ChevronRightIcon } from '../../icon';\nimport { Heading } from '../../atoms/heading';\n\nregisterLocale('ko', fnKo);\nsetDefaultLocale('ko');\n\nexport type DatePickerProps = ReactDatePickerProps & {\n size?: 'small' | 'medium' | 'large';\n};\ntype DatePickerRef = ElementRef<typeof ReactDatePicker>;\n\nconst ReactDatePicker = ((RDP.default as any).default ||\n (RDP.default as any) ||\n (RDP as any)) as typeof RDP.default;\n\nexport const DatePicker = forwardRef<DatePickerRef, DatePickerProps>(\n (props, ref): React.ReactElement => {\n const { size = 'medium', ...rest } = props;\n return (\n <ReactDatePicker\n dateFormat=\"YYYY/MM/dd\"\n nextMonthButtonLabel=\"다음 달\"\n placeholderText=\"YYYY/mm/dd\"\n previousMonthButtonLabel=\"이전 달\"\n ref={ref}\n renderCustomHeader={renderCustomHeader}\n showPopperArrow={false}\n timeIntervals={10}\n {...rest}\n calendarClassName={`tipp_datePicker_calendar ${rest.calendarClassName || ''}`}\n timeCaption=\"시간\"\n wrapperClassName={`tipp_datePicker ${size} ${rest.wrapperClassName || ''}`}\n />\n );\n }\n);\n\nDatePicker.displayName = 'DatePicker';\n\nconst renderCustomHeader: ReactDatePickerProps['renderCustomHeader'] = (\n props\n) => {\n const {\n date,\n decreaseMonth,\n increaseMonth,\n prevMonthButtonDisabled,\n nextMonthButtonDisabled,\n } = props;\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- date가 undefined일 수 있음\n console.log({ date });\n const year = date ? date.getFullYear() : '-';\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- date가 undefined일 수 있음\n const month = date ? date.getMonth() + 1 : '-';\n\n return (\n <Flex align=\"center\" justify=\"between\" pb=\"2\" pl=\"2\" pr=\"2\">\n <IconButton\n disabled={prevMonthButtonDisabled}\n onClick={decreaseMonth}\n variant=\"ghost\"\n >\n <ChevronLeftIcon />\n </IconButton>\n <Flex gap=\"3\">\n <Heading variant=\"heading4\" weight=\"regular\">\n {year}년\n </Heading>\n <Heading variant=\"heading4\" weight=\"regular\">\n {month}월\n </Heading>\n </Flex>\n\n <IconButton\n disabled={nextMonthButtonDisabled}\n onClick={increaseMonth}\n variant=\"ghost\"\n >\n <ChevronRightIcon />\n </IconButton>\n </Flex>\n );\n};\n\n// DatePicker.displayName = 'DatePicker';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAGA,SAAgB,kBAAkB;AAElC,YAAY,SAAS;AACrB,SAAS,gBAAgB,wBAAwB;AACjD,SAAS,MAAM,YAAY;AAsBrB,cA+CE,YA/CF;AAhBN,eAAe,MAAM,IAAI;AACzB,iBAAiB,IAAI;AAOrB,IAAM,kBAAwB,YAAgB,WACvC,eACJ;AAEI,IAAM,aAAa;AAAA,EACxB,CAAC,OAAO,QAA4B;AAClC,UAAqC,YAA7B,SAAO,SA3BnB,IA2ByC,IAAT,iBAAS,IAAT,CAApB;AACR,WACE;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,sBAAqB;AAAA,QACrB,iBAAgB;AAAA,QAChB,0BAAyB;AAAA,QACzB;AAAA,QACA;AAAA,QACA,iBAAiB;AAAA,QACjB,eAAe;AAAA,SACX,OATL;AAAA,QAUC,mBAAmB,4BAA4B,KAAK,qBAAqB,EAAE;AAAA,QAC3E,aAAY;AAAA,QACZ,kBAAkB,mBAAmB,IAAI,IAAI,KAAK,oBAAoB,EAAE;AAAA;AAAA,IAC1E;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAM,qBAAiE,CACrE,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAGJ,UAAQ,IAAI,EAAE,KAAK,CAAC;AACpB,QAAM,OAAO,OAAO,KAAK,YAAY,IAAI;AAEzC,QAAM,QAAQ,OAAO,KAAK,SAAS,IAAI,IAAI;AAE3C,SACE,qBAAC,QAAK,OAAM,UAAS,SAAQ,WAAU,IAAG,KAAI,IAAG,KAAI,IAAG,KACtD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,SAAS;AAAA,QACT,SAAQ;AAAA,QAER,8BAAC,mBAAgB;AAAA;AAAA,IACnB;AAAA,IACA,qBAAC,QAAK,KAAI,KACR;AAAA,2BAAC,WAAQ,SAAQ,YAAW,QAAO,WAChC;AAAA;AAAA,QAAK;AAAA,SACR;AAAA,MACA,qBAAC,WAAQ,SAAQ,YAAW,QAAO,WAChC;AAAA;AAAA,QAAM;AAAA,SACT;AAAA,OACF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,SAAS;AAAA,QACT,SAAQ;AAAA,QAER,8BAAC,oBAAiB;AAAA;AAAA,IACpB;AAAA,KACF;AAEJ;","names":[]}
|
package/dist/index.cjs
CHANGED
|
@@ -139,7 +139,7 @@ __export(src_exports, {
|
|
|
139
139
|
Radio: () => import_themes32.Radio,
|
|
140
140
|
RadioCards: () => import_themes33.RadioCards,
|
|
141
141
|
RadioGroup: () => import_themes34.RadioGroup,
|
|
142
|
-
Root: () =>
|
|
142
|
+
Root: () => Root6,
|
|
143
143
|
RowsIcon: () => import_react_icons2.RowsIcon,
|
|
144
144
|
ScrollArea: () => import_themes35.ScrollArea,
|
|
145
145
|
Section: () => import_themes36.Section,
|
|
@@ -161,7 +161,7 @@ __export(src_exports, {
|
|
|
161
161
|
ToastContainer: () => ToastContainer,
|
|
162
162
|
Tooltip: () => import_themes48.Tooltip,
|
|
163
163
|
TrashIcon: () => import_react_icons2.TrashIcon,
|
|
164
|
-
Trigger: () =>
|
|
164
|
+
Trigger: () => Trigger5,
|
|
165
165
|
Typo: () => Typo,
|
|
166
166
|
createColumnHelper: () => import_react_table2.createColumnHelper,
|
|
167
167
|
getCellAlign: () => getCellAlign,
|
|
@@ -611,12 +611,17 @@ var import_themes37 = require("@radix-ui/themes");
|
|
|
611
611
|
var import_themes38 = require("@radix-ui/themes");
|
|
612
612
|
var import_react11 = require("react");
|
|
613
613
|
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
614
|
+
var SelectContext = (0, import_react11.createContext)({
|
|
615
|
+
error: false
|
|
616
|
+
});
|
|
614
617
|
var Content4 = (0, import_react11.forwardRef)((props, ref) => {
|
|
615
618
|
const _a = props, { className, isNavigation } = _a, rest = __objRest(_a, ["className", "isNavigation"]);
|
|
619
|
+
const { error } = (0, import_react11.useContext)(SelectContext);
|
|
616
620
|
const cls = (0, import_react11.useMemo)(() => {
|
|
617
621
|
const etc = isNavigation ? "nav-select" : "";
|
|
618
|
-
|
|
619
|
-
|
|
622
|
+
const errorCls = error ? "tipp-error" : "";
|
|
623
|
+
return [etc, errorCls, className].join(" ");
|
|
624
|
+
}, [className, error, isNavigation]);
|
|
620
625
|
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
621
626
|
import_themes38.Select.Content,
|
|
622
627
|
__spreadProps(__spreadValues({
|
|
@@ -628,7 +633,26 @@ var Content4 = (0, import_react11.forwardRef)((props, ref) => {
|
|
|
628
633
|
);
|
|
629
634
|
});
|
|
630
635
|
Content4.displayName = "Select.Content";
|
|
636
|
+
var Trigger3 = (0, import_react11.forwardRef)(
|
|
637
|
+
(props, ref) => {
|
|
638
|
+
const _a = props, { className } = _a, rest = __objRest(_a, ["className"]);
|
|
639
|
+
const { error } = (0, import_react11.useContext)(SelectContext);
|
|
640
|
+
const cls = (0, import_react11.useMemo)(() => {
|
|
641
|
+
const errorCls = error ? "error" : "";
|
|
642
|
+
return [errorCls, className].join(" ");
|
|
643
|
+
}, [className, error]);
|
|
644
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_themes38.Select.Trigger, __spreadProps(__spreadValues({}, rest), { className: cls, ref }));
|
|
645
|
+
}
|
|
646
|
+
);
|
|
647
|
+
Trigger3.displayName = "Select.Trigger";
|
|
648
|
+
function Root3(props) {
|
|
649
|
+
const _a = props, { error } = _a, rest = __objRest(_a, ["error"]);
|
|
650
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SelectContext.Provider, { value: { error }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_themes38.Select.Root, __spreadValues({}, rest)) });
|
|
651
|
+
}
|
|
652
|
+
Root3.displayName = "Select.Root";
|
|
631
653
|
var Select = __spreadProps(__spreadValues({}, import_themes38.Select), {
|
|
654
|
+
Root: Root3,
|
|
655
|
+
Trigger: Trigger3,
|
|
632
656
|
Content: Content4
|
|
633
657
|
});
|
|
634
658
|
|
|
@@ -707,7 +731,7 @@ Typo.displayName = "Typo";
|
|
|
707
731
|
var import_themes47 = require("@radix-ui/themes");
|
|
708
732
|
var import_react14 = require("react");
|
|
709
733
|
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
710
|
-
var
|
|
734
|
+
var Root4 = (0, import_react14.forwardRef)((props, ref) => {
|
|
711
735
|
const _a = props, { error, style, className } = _a, rest = __objRest(_a, ["error", "style", "className"]);
|
|
712
736
|
const fieldStyle = (0, import_react14.useMemo)(() => {
|
|
713
737
|
if (!error)
|
|
@@ -727,8 +751,8 @@ var Root3 = (0, import_react14.forwardRef)((props, ref) => {
|
|
|
727
751
|
}, rest)
|
|
728
752
|
);
|
|
729
753
|
});
|
|
730
|
-
|
|
731
|
-
var TextField = { Root:
|
|
754
|
+
Root4.displayName = "TextField.Root";
|
|
755
|
+
var TextField = { Root: Root4, Slot: import_themes47.TextField.Slot };
|
|
732
756
|
|
|
733
757
|
// src/atoms/tooltip.tsx
|
|
734
758
|
var import_themes48 = require("@radix-ui/themes");
|
|
@@ -926,7 +950,7 @@ var import_react18 = require("react");
|
|
|
926
950
|
var Dialog2 = __toESM(require("@radix-ui/react-dialog"), 1);
|
|
927
951
|
var import_react_icons3 = require("@radix-ui/react-icons");
|
|
928
952
|
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
929
|
-
function
|
|
953
|
+
function Root6(props) {
|
|
930
954
|
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Dialog2.Root, __spreadValues({}, props));
|
|
931
955
|
}
|
|
932
956
|
function Content6(props) {
|
|
@@ -950,12 +974,12 @@ function Content6(props) {
|
|
|
950
974
|
)
|
|
951
975
|
] });
|
|
952
976
|
}
|
|
953
|
-
function
|
|
977
|
+
function Trigger5(props) {
|
|
954
978
|
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Dialog2.Trigger, __spreadValues({ asChild: true }, props));
|
|
955
979
|
}
|
|
956
980
|
var Drawer = {
|
|
957
981
|
Root: Dialog2.Root,
|
|
958
|
-
Trigger:
|
|
982
|
+
Trigger: Trigger5,
|
|
959
983
|
Content: Content6,
|
|
960
984
|
Close: Dialog2.Close,
|
|
961
985
|
Title: Dialog2.Title,
|
|
@@ -994,7 +1018,7 @@ function ToastContainer(props) {
|
|
|
994
1018
|
var RadixForm = __toESM(require("@radix-ui/react-form"), 1);
|
|
995
1019
|
var import_react19 = require("react");
|
|
996
1020
|
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
997
|
-
var
|
|
1021
|
+
var Root8 = (0, import_react19.forwardRef)(
|
|
998
1022
|
(_a, ref) => {
|
|
999
1023
|
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
|
1000
1024
|
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
@@ -1007,7 +1031,7 @@ var Root7 = (0, import_react19.forwardRef)(
|
|
|
1007
1031
|
);
|
|
1008
1032
|
}
|
|
1009
1033
|
);
|
|
1010
|
-
|
|
1034
|
+
Root8.displayName = "FORM_ROOT";
|
|
1011
1035
|
var FieldContext = (0, import_react19.createContext)({
|
|
1012
1036
|
name: ""
|
|
1013
1037
|
});
|
|
@@ -1079,7 +1103,7 @@ var Control2 = (0, import_react19.forwardRef)(
|
|
|
1079
1103
|
);
|
|
1080
1104
|
Control2.displayName = "FORM_Control";
|
|
1081
1105
|
var Form = {
|
|
1082
|
-
Root:
|
|
1106
|
+
Root: Root8,
|
|
1083
1107
|
Field: Field2,
|
|
1084
1108
|
Label: Label2,
|
|
1085
1109
|
Message: Message2,
|
|
@@ -1587,7 +1611,7 @@ var StepContext = (0, import_react25.createContext)({
|
|
|
1587
1611
|
completed: false,
|
|
1588
1612
|
index: 0
|
|
1589
1613
|
});
|
|
1590
|
-
function
|
|
1614
|
+
function Root9(props) {
|
|
1591
1615
|
const {
|
|
1592
1616
|
activeStep = 0,
|
|
1593
1617
|
children,
|
|
@@ -1726,7 +1750,7 @@ function ActiveStep(props) {
|
|
|
1726
1750
|
] });
|
|
1727
1751
|
}
|
|
1728
1752
|
var Stepper = {
|
|
1729
|
-
Root:
|
|
1753
|
+
Root: Root9,
|
|
1730
1754
|
Step
|
|
1731
1755
|
};
|
|
1732
1756
|
|