@remember-web/primitive 0.0.0-alpha.5 → 0.0.0-alpha.6
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/primitive/src/Avatars/Avatar/{index.js → index.mjs} +2 -2
- package/dist/primitive/src/Avatars/Avatar/index.mjs.map +1 -0
- package/dist/primitive/src/Avatars/Avatar/{styles.js → styles.mjs} +1 -1
- package/dist/primitive/src/Avatars/Avatar/styles.mjs.map +1 -0
- package/dist/primitive/src/Badge/{Badge.js → Badge.mjs} +3 -3
- package/dist/primitive/src/Badge/Badge.mjs.map +1 -0
- package/dist/primitive/src/Badge/{style.js → style.mjs} +1 -1
- package/dist/primitive/src/Badge/style.mjs.map +1 -0
- package/dist/primitive/src/Badge/{utils.js → utils.mjs} +2 -2
- package/dist/primitive/src/Badge/utils.mjs.map +1 -0
- package/dist/primitive/src/Buttons/Button/Button.stories.d.ts +1 -1
- package/dist/primitive/src/Buttons/Button/{const.js → const.mjs} +1 -1
- package/dist/primitive/src/Buttons/Button/const.mjs.map +1 -0
- package/dist/primitive/src/Buttons/Button/{index.js → index.mjs} +8 -8
- package/dist/primitive/src/Buttons/Button/index.mjs.map +1 -0
- package/dist/primitive/src/Buttons/Button/{styles.js → styles.mjs} +2 -2
- package/dist/primitive/src/Buttons/Button/styles.mjs.map +1 -0
- package/dist/primitive/src/Common/Divider/{index.js → index.mjs} +1 -1
- package/dist/primitive/src/Common/Divider/index.mjs.map +1 -0
- package/dist/primitive/src/Common/Flex/{index.js → index.mjs} +1 -1
- package/dist/primitive/src/Common/Flex/index.mjs.map +1 -0
- package/dist/primitive/src/Common/Grid/{index.js → index.mjs} +1 -1
- package/dist/primitive/src/Common/Grid/index.mjs.map +1 -0
- package/dist/primitive/src/Common/Spinner/{index.js → index.mjs} +2 -2
- package/dist/primitive/src/Common/Spinner/index.mjs.map +1 -0
- package/dist/primitive/src/Common/Spinner/{styles.js → styles.mjs} +1 -1
- package/dist/primitive/src/Common/Spinner/styles.mjs.map +1 -0
- package/dist/primitive/src/Common/Typography/{index.js → index.mjs} +2 -2
- package/dist/primitive/src/Common/Typography/index.mjs.map +1 -0
- package/dist/primitive/src/Common/Typography/{styles.js → styles.mjs} +1 -1
- package/dist/primitive/src/Common/Typography/styles.mjs.map +1 -0
- package/dist/primitive/src/Control/BaseToggle/ToggleIcon/{index.js → index.mjs} +1 -1
- package/dist/primitive/src/Control/BaseToggle/ToggleIcon/index.mjs.map +1 -0
- package/dist/primitive/src/Control/BaseToggle/{index.js → index.mjs} +8 -8
- package/dist/primitive/src/Control/BaseToggle/index.mjs.map +1 -0
- package/dist/primitive/src/Control/BaseToggle/{styles.js → styles.mjs} +1 -1
- package/dist/primitive/src/Control/BaseToggle/styles.mjs.map +1 -0
- package/dist/primitive/src/Control/{Checkbox.js → Checkbox.mjs} +2 -2
- package/dist/primitive/src/Control/Checkbox.mjs.map +1 -0
- package/dist/primitive/src/Control/{Radio.js → Radio.mjs} +2 -2
- package/dist/primitive/src/Control/Radio.mjs.map +1 -0
- package/dist/primitive/src/Control/Switch/{index.js → index.mjs} +2 -2
- package/dist/primitive/src/Control/Switch/index.mjs.map +1 -0
- package/dist/primitive/src/Control/Switch/{styles.js → styles.mjs} +1 -1
- package/dist/primitive/src/Control/Switch/styles.mjs.map +1 -0
- package/dist/primitive/src/Control/{Toggle.js → Toggle.mjs} +2 -2
- package/dist/primitive/src/Control/Toggle.mjs.map +1 -0
- package/dist/primitive/src/Floating/DropdownMenu/{DropdownMenuSection.js → DropdownMenuSection.mjs} +2 -2
- package/dist/primitive/src/Floating/DropdownMenu/DropdownMenuSection.mjs.map +1 -0
- package/dist/primitive/src/Floating/DropdownMenu/{index.js → index.mjs} +4 -4
- package/dist/primitive/src/Floating/DropdownMenu/index.mjs.map +1 -0
- package/dist/primitive/src/Floating/DropdownMenu/{styles.js → styles.mjs} +2 -2
- package/dist/primitive/src/Floating/DropdownMenu/styles.mjs.map +1 -0
- package/dist/primitive/src/Floating/Popover/{index.js → index.mjs} +2 -2
- package/dist/primitive/src/Floating/Popover/index.mjs.map +1 -0
- package/dist/primitive/src/Floating/Popover/{styles.js → styles.mjs} +1 -1
- package/dist/primitive/src/Floating/Popover/styles.mjs.map +1 -0
- package/dist/primitive/src/Floating/Tooltip/{index.js → index.mjs} +4 -4
- package/dist/primitive/src/Floating/Tooltip/index.mjs.map +1 -0
- package/dist/primitive/src/Floating/Tooltip/{styles.js → styles.mjs} +1 -1
- package/dist/primitive/src/Floating/Tooltip/styles.mjs.map +1 -0
- package/dist/primitive/src/Floating/Tooltip/{types.js → types.mjs} +1 -1
- package/dist/primitive/src/Floating/Tooltip/types.mjs.map +1 -0
- package/dist/primitive/src/Inputs/Select/DesignedSelect/{const.js → const.mjs} +1 -1
- package/dist/primitive/src/Inputs/Select/DesignedSelect/const.mjs.map +1 -0
- package/dist/primitive/src/Inputs/Select/DesignedSelect/{index.js → index.mjs} +7 -7
- package/dist/primitive/src/Inputs/Select/DesignedSelect/index.mjs.map +1 -0
- package/dist/primitive/src/Inputs/Select/DesignedSelect/{styles.js → styles.mjs} +2 -2
- package/dist/primitive/src/Inputs/Select/DesignedSelect/styles.mjs.map +1 -0
- package/dist/primitive/src/Inputs/Select/NativeSelect/Option/{index.js → index.mjs} +1 -1
- package/dist/primitive/src/Inputs/Select/NativeSelect/Option/index.mjs.map +1 -0
- package/dist/primitive/src/Inputs/Select/NativeSelect/{index.js → index.mjs} +3 -3
- package/dist/primitive/src/Inputs/Select/NativeSelect/index.mjs.map +1 -0
- package/dist/primitive/src/Inputs/Select/NativeSelect/{styles.js → styles.mjs} +1 -1
- package/dist/primitive/src/Inputs/Select/NativeSelect/styles.mjs.map +1 -0
- package/dist/primitive/src/Inputs/Select/Option/{index.js → index.mjs} +1 -1
- package/dist/primitive/src/Inputs/Select/Option/index.mjs.map +1 -0
- package/dist/primitive/src/Inputs/Select/{index.js → index.mjs} +6 -6
- package/dist/primitive/src/Inputs/Select/index.mjs.map +1 -0
- package/dist/primitive/src/Inputs/Select/{styles.js → styles.mjs} +1 -1
- package/dist/primitive/src/Inputs/Select/styles.mjs.map +1 -0
- package/dist/primitive/src/Inputs/Select/{utils.js → utils.mjs} +1 -1
- package/dist/primitive/src/Inputs/Select/utils.mjs.map +1 -0
- package/dist/primitive/src/Inputs/TextInput/TextInput.stories.d.ts +1 -1
- package/dist/primitive/src/Inputs/TextInput/{index.js → index.mjs} +2 -2
- package/dist/primitive/src/Inputs/TextInput/index.mjs.map +1 -0
- package/dist/primitive/src/Inputs/TextInput/{styles.js → styles.mjs} +2 -2
- package/dist/primitive/src/Inputs/TextInput/styles.mjs.map +1 -0
- package/dist/primitive/src/Logos/EnvLabel/{index.js → index.mjs} +1 -1
- package/dist/primitive/src/Logos/EnvLabel/index.mjs.map +1 -0
- package/dist/primitive/src/Logos/RememberLogo/{index.js → index.mjs} +2 -2
- package/dist/primitive/src/Logos/RememberLogo/index.mjs.map +1 -0
- package/dist/primitive/src/Logos/RememberMobileLogo/{index.js → index.mjs} +1 -1
- package/dist/primitive/src/Logos/RememberMobileLogo/index.mjs.map +1 -0
- package/dist/primitive/src/Logos/RememberServiceLogo/{index.js → index.mjs} +8 -8
- package/dist/primitive/src/Logos/RememberServiceLogo/index.mjs.map +1 -0
- package/dist/primitive/src/Logos/RememberServiceLogo/{style.js → style.mjs} +1 -1
- package/dist/primitive/src/Logos/RememberServiceLogo/style.mjs.map +1 -0
- package/dist/primitive/src/Logos/RememberSquareLogo/{index.js → index.mjs} +1 -1
- package/dist/primitive/src/Logos/RememberSquareLogo/index.mjs.map +1 -0
- package/dist/primitive/src/Modals/Dialog/{index.js → index.mjs} +3 -3
- package/dist/primitive/src/Modals/Dialog/index.mjs.map +1 -0
- package/dist/primitive/src/Modals/Dialog/{styles.js → styles.mjs} +1 -1
- package/dist/primitive/src/Modals/Dialog/styles.mjs.map +1 -0
- package/dist/primitive/src/Paginations/CompactPagination/{index.js → index.mjs} +4 -4
- package/dist/primitive/src/Paginations/CompactPagination/index.mjs.map +1 -0
- package/dist/primitive/src/Paginations/Pagination/{index.js → index.mjs} +4 -4
- package/dist/primitive/src/Paginations/Pagination/index.mjs.map +1 -0
- package/dist/primitive/src/Paginations/{styles.js → styles.mjs} +1 -1
- package/dist/primitive/src/Paginations/styles.mjs.map +1 -0
- package/dist/primitive/src/Paginations/{usePagination.js → usePagination.mjs} +1 -1
- package/dist/primitive/src/Paginations/usePagination.mjs.map +1 -0
- package/dist/primitive/src/hooks/{useMouseEventAway.js → useMouseEventAway.mjs} +1 -1
- package/dist/primitive/src/hooks/useMouseEventAway.mjs.map +1 -0
- package/dist/primitive/src/index.mjs +26 -0
- package/dist/primitive/src/index.mjs.map +1 -0
- package/dist/shared/utils/{common.js → common.mjs} +1 -1
- package/dist/shared/utils/common.mjs.map +1 -0
- package/dist/shared/utils/{style.js → style.mjs} +1 -1
- package/dist/shared/utils/style.mjs.map +1 -0
- package/package.json +4 -5
- package/dist/primitive/src/Avatars/Avatar/index.js.map +0 -1
- package/dist/primitive/src/Avatars/Avatar/styles.js.map +0 -1
- package/dist/primitive/src/Badge/Badge.js.map +0 -1
- package/dist/primitive/src/Badge/style.js.map +0 -1
- package/dist/primitive/src/Badge/utils.js.map +0 -1
- package/dist/primitive/src/Buttons/Button/const.js.map +0 -1
- package/dist/primitive/src/Buttons/Button/index.js.map +0 -1
- package/dist/primitive/src/Buttons/Button/styles.js.map +0 -1
- package/dist/primitive/src/Common/Divider/index.js.map +0 -1
- package/dist/primitive/src/Common/Flex/index.js.map +0 -1
- package/dist/primitive/src/Common/Grid/index.js.map +0 -1
- package/dist/primitive/src/Common/Spinner/index.js.map +0 -1
- package/dist/primitive/src/Common/Spinner/styles.js.map +0 -1
- package/dist/primitive/src/Common/Typography/index.js.map +0 -1
- package/dist/primitive/src/Common/Typography/styles.js.map +0 -1
- package/dist/primitive/src/Control/BaseToggle/ToggleIcon/index.js.map +0 -1
- package/dist/primitive/src/Control/BaseToggle/index.js.map +0 -1
- package/dist/primitive/src/Control/BaseToggle/styles.js.map +0 -1
- package/dist/primitive/src/Control/Checkbox.js.map +0 -1
- package/dist/primitive/src/Control/Radio.js.map +0 -1
- package/dist/primitive/src/Control/Switch/index.js.map +0 -1
- package/dist/primitive/src/Control/Switch/styles.js.map +0 -1
- package/dist/primitive/src/Control/Toggle.js.map +0 -1
- package/dist/primitive/src/Floating/DropdownMenu/DropdownMenuSection.js.map +0 -1
- package/dist/primitive/src/Floating/DropdownMenu/index.js.map +0 -1
- package/dist/primitive/src/Floating/DropdownMenu/styles.js.map +0 -1
- package/dist/primitive/src/Floating/Popover/index.js.map +0 -1
- package/dist/primitive/src/Floating/Popover/styles.js.map +0 -1
- package/dist/primitive/src/Floating/Tooltip/index.js.map +0 -1
- package/dist/primitive/src/Floating/Tooltip/styles.js.map +0 -1
- package/dist/primitive/src/Floating/Tooltip/types.js.map +0 -1
- package/dist/primitive/src/Inputs/Select/DesignedSelect/const.js.map +0 -1
- package/dist/primitive/src/Inputs/Select/DesignedSelect/index.js.map +0 -1
- package/dist/primitive/src/Inputs/Select/DesignedSelect/styles.js.map +0 -1
- package/dist/primitive/src/Inputs/Select/NativeSelect/Option/index.js.map +0 -1
- package/dist/primitive/src/Inputs/Select/NativeSelect/index.js.map +0 -1
- package/dist/primitive/src/Inputs/Select/NativeSelect/styles.js.map +0 -1
- package/dist/primitive/src/Inputs/Select/Option/index.js.map +0 -1
- package/dist/primitive/src/Inputs/Select/index.js.map +0 -1
- package/dist/primitive/src/Inputs/Select/styles.js.map +0 -1
- package/dist/primitive/src/Inputs/Select/utils.js.map +0 -1
- package/dist/primitive/src/Inputs/TextInput/index.js.map +0 -1
- package/dist/primitive/src/Inputs/TextInput/styles.js.map +0 -1
- package/dist/primitive/src/Logos/EnvLabel/index.js.map +0 -1
- package/dist/primitive/src/Logos/RememberLogo/index.js.map +0 -1
- package/dist/primitive/src/Logos/RememberMobileLogo/index.js.map +0 -1
- package/dist/primitive/src/Logos/RememberServiceLogo/index.js.map +0 -1
- package/dist/primitive/src/Logos/RememberServiceLogo/style.js.map +0 -1
- package/dist/primitive/src/Logos/RememberSquareLogo/index.js.map +0 -1
- package/dist/primitive/src/Modals/Dialog/index.js.map +0 -1
- package/dist/primitive/src/Modals/Dialog/styles.js.map +0 -1
- package/dist/primitive/src/Paginations/CompactPagination/index.js.map +0 -1
- package/dist/primitive/src/Paginations/Pagination/index.js.map +0 -1
- package/dist/primitive/src/Paginations/styles.js.map +0 -1
- package/dist/primitive/src/Paginations/usePagination.js.map +0 -1
- package/dist/primitive/src/hooks/useMouseEventAway.js.map +0 -1
- package/dist/primitive/src/index.js +0 -26
- package/dist/primitive/src/index.js.map +0 -1
- package/dist/shared/utils/common.js.map +0 -1
- package/dist/shared/utils/style.js.map +0 -1
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { IconArrowDoubleLeft, IconArrow2Left, IconArrow2Right, IconArrowDoubleRight } from '@remember-web/icon';
|
|
3
3
|
import { contents300, contents000 } from '@remember-web/mixin';
|
|
4
|
-
import { range } from '../../../../shared/utils/common.
|
|
5
|
-
import { PaginationContainer, ArrowButton, Pages, Page, PageButton } from '../styles.
|
|
6
|
-
import usePagination from '../usePagination.
|
|
4
|
+
import { range } from '../../../../shared/utils/common.mjs';
|
|
5
|
+
import { PaginationContainer, ArrowButton, Pages, Page, PageButton } from '../styles.mjs';
|
|
6
|
+
import usePagination from '../usePagination.mjs';
|
|
7
7
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
8
8
|
|
|
9
9
|
function Pagination(_ref) {
|
|
@@ -111,4 +111,4 @@ function Pagination(_ref) {
|
|
|
111
111
|
}
|
|
112
112
|
|
|
113
113
|
export { Pagination };
|
|
114
|
-
//# sourceMappingURL=index.
|
|
114
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../../../../src/Paginations/Pagination/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n IconArrow2Left,\n IconArrow2Right,\n IconArrowDoubleLeft,\n IconArrowDoubleRight,\n} from '@remember-web/icon';\nimport { contents000, contents300 } from '@remember-web/mixin';\nimport { range } from '@remember-web/shared/utils/common';\n\nimport {\n ArrowButton,\n Page,\n PageButton,\n Pages,\n PaginationContainer,\n} from '../styles';\nimport type { PaginationProps } from '../types';\nimport usePagination from '../usePagination';\n\nexport function Pagination({\n activePage = 1,\n totalItemCount,\n pageRangeDisplayed = 10,\n onChangePage,\n itemCountPerPage,\n className,\n showFirstButton = false,\n showLastButton = false,\n}: PaginationProps) {\n const {\n firstPage,\n rangeLastPage,\n totalLastPage,\n prevPage,\n nextPage,\n isPrevPageDisabled,\n isNextPageDisabled,\n isFirstPageDisabled,\n isLastPageDisabled,\n } = usePagination({\n activePage,\n totalItemCount,\n pageRangeDisplayed,\n itemCountPerPage,\n });\n\n const iconColor = (disabled: boolean) =>\n disabled ? contents300 : contents000;\n\n const onClickPrevPage = () => onChangePage(prevPage);\n const onClickNextPage = () => onChangePage(nextPage);\n const onClickFirstPage = () => onChangePage(1);\n const onClickLastPage = () => onChangePage(totalLastPage);\n\n const onClickPage = (page: number) => onChangePage(page);\n\n return (\n <PaginationContainer\n className={className}\n role=\"navigation\"\n aria-label=\"페이지네이션\"\n >\n {showFirstButton && (\n <ArrowButton\n disabled={isFirstPageDisabled}\n onClick={onClickFirstPage}\n aria-label=\"첫 페이지로 이동\"\n >\n <IconArrowDoubleLeft\n size=\"small\"\n color={iconColor(isFirstPageDisabled)}\n aria-hidden=\"true\"\n />\n </ArrowButton>\n )}\n <ArrowButton\n disabled={isPrevPageDisabled}\n onClick={onClickPrevPage}\n aria-label=\"이전 페이지로 이동\"\n >\n <IconArrow2Left\n size=\"small\"\n color={iconColor(isPrevPageDisabled)}\n aria-hidden=\"true\"\n />\n </ArrowButton>\n <Pages>\n {range(firstPage, rangeLastPage)?.map((_page) => (\n <Page key={_page}>\n <PageButton\n selected={_page === activePage}\n onClick={() => onClickPage(_page)}\n aria-label={`페이지 ${_page}`}\n >\n {_page}\n </PageButton>\n </Page>\n ))}\n </Pages>\n <ArrowButton\n disabled={isNextPageDisabled}\n onClick={onClickNextPage}\n aria-label=\"다음 페이지로 이동\"\n >\n <IconArrow2Right\n size=\"small\"\n color={iconColor(isNextPageDisabled)}\n aria-hidden=\"true\"\n />\n </ArrowButton>\n {showLastButton && (\n <ArrowButton\n disabled={isLastPageDisabled}\n onClick={onClickLastPage}\n aria-label=\"마지막 페이지로 이동\"\n >\n <IconArrowDoubleRight\n size=\"small\"\n color={iconColor(isLastPageDisabled)}\n aria-hidden=\"true\"\n />\n </ArrowButton>\n )}\n </PaginationContainer>\n );\n}\n"],"names":["activePage","pageRangeDisplayed","showFirstButton","showLastButton","totalItemCount","itemCountPerPage","className","role","children","disabled","onClick","size","color"],"mappings":";;;;;;;;AAqBO;AASa;AAAA;AARlBA;;;AAEAC;;;;;AAIAC;;AACAC;;AAaEH;AACAI;AACAH;AACAI;AACF;;;;;;;;;;AAEA;AAAoC;AACE;AAEtC;;AAAoD;AACpD;;AAAoD;AACpD;;AAA8C;AAC9C;;AAAyD;AAEzD;;AAAwD;;AAIpDC;AACAC;AACA;AAAmBC;AAIfC;AACAC;AACA;;AAGEC;AACAC;;;AAEA;AAIJH;AACAC;AACA;;AAGEC;AACAC;;;AAEA;AAEEJ;;;;;;;;AAM6BA;;AAGhB;;AAEf;AAGFC;AACAC;AACA;;AAGEC;AACAC;;;AAEA;AAIAH;AACAC;AACA;;AAGEC;AACAC;;;AAEA;AAEL;AAGP;;"}
|
|
@@ -20,4 +20,4 @@ var PageButton = styled(BaseButton)(_templateObject13 || (_templateObject13 = _t
|
|
|
20
20
|
});
|
|
21
21
|
|
|
22
22
|
export { ArrowButton, BaseButton, CompactPaginationContainer, CurrentPage, Page, PageButton, Pages, PaginationContainer };
|
|
23
|
-
//# sourceMappingURL=styles.
|
|
23
|
+
//# sourceMappingURL=styles.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.mjs","sources":["../../../../src/Paginations/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css } from 'styled-components';\nimport {\n bg100,\n bg200,\n bg300,\n contents000,\n contents300,\n getTypographyStyles,\n} from '@remember-web/mixin';\n\nimport { mobileOnly, desktopOnly } from '@remember-web/mixin';\n\nexport const PaginationContainer = styled.nav`\n all: unset;\n display: inline-flex;\n list-style-type: none;\n box-sizing: border-box;\n user-select: none;\n margin: 0;\n padding: 0;\n gap: 16px;\n\n ${mobileOnly(css`\n gap: 8px;\n `)}\n`;\n\nexport const CompactPaginationContainer = styled.div`\n all: unset;\n\n ${getTypographyStyles('Body1_M')}\n gap: 16px;\n display: flex;\n align-items: center;\n width: fit-content;\n height: fit-content;\n`;\n\nexport const CurrentPage = styled.span`\n ${getTypographyStyles('Body1_B')}\n`;\n\nexport const Pages = styled.ul`\n all: unset;\n display: inherit;\n gap: 4px;\n`;\n\nexport const Page = styled.li``;\n\nconst DefaultButton = styled.button.attrs({ type: 'button' })`\n all: unset;\n appearance: none;\n box-sizing: border-box;\n\n ${getTypographyStyles('Body1_M')}\n display: grid;\n place-items: center;\n\n min-width: 34px;\n height: 34px;\n cursor: pointer;\n color: ${contents000};\n border-radius: 4px;\n\n &:disabled {\n color: ${contents000};\n cursor: not-allowed;\n pointer-events: none;\n }\n`;\n\nexport const ArrowButton = styled(DefaultButton)`\n ${desktopOnly(css`\n &:hover {\n background-color: ${bg200};\n }\n &:active {\n background-color: ${bg300};\n }\n `)}\n\n ${mobileOnly(css`\n min-width: 44px;\n height: 44px;\n `)}\n`;\n\nexport const BaseButton = styled(DefaultButton)`\n &:hover,\n &:focus {\n border: solid 1px ${contents300};\n border-radius: 4px;\n background-color: ${bg100};\n }\n\n ${mobileOnly(css`\n min-width: 44px;\n height: 44px;\n `)}\n`;\n\nexport const PageButton = styled(BaseButton)<{ selected?: boolean }>`\n ${({ selected }) =>\n selected &&\n css`\n border: solid 1px ${contents300};\n border-radius: 4px;\n background-color: ${bg100};\n `}\n`;\n"],"names":["Pages","Page","type","BaseButton","PageButton"],"mappings":";;;;;AAAa;AAcN;;;AA8BMA;AAMAC;AAEb;AAA4CC;AAAe;;AAsC9CC;AAcAC;AACT;AAAW;AAMV;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"usePagination.mjs","sources":["../../../../src/Paginations/usePagination.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport type { PaginationItems } from './types';\n\nfunction usePagination({\n itemCountPerPage,\n pageRangeDisplayed,\n totalItemCount,\n activePage,\n}: PaginationItems) {\n const buffer = activePage % pageRangeDisplayed === 0 ? 1 : 0;\n\n const firstPage = Math.max(\n 1,\n Math.floor(activePage / pageRangeDisplayed - buffer) * pageRangeDisplayed +\n 1\n );\n\n const totalPages = Math.ceil(totalItemCount / itemCountPerPage);\n\n const rangeLastPage = useMemo(\n () =>\n Math.min(\n totalPages,\n Math.ceil(activePage / pageRangeDisplayed) * pageRangeDisplayed\n ),\n [activePage, pageRangeDisplayed, totalPages]\n );\n\n const totalLastPage = useMemo(\n () => (!totalItemCount ? 1 : Math.ceil(totalItemCount / itemCountPerPage)),\n [totalItemCount, itemCountPerPage]\n );\n\n const prevPage = firstPage - 1;\n const nextPage = rangeLastPage + 1;\n\n const isPrevPageDisabled = prevPage < 1;\n const isNextPageDisabled = nextPage > totalPages;\n\n const isFirstPageDisabled = activePage === 1;\n const isLastPageDisabled = activePage === totalLastPage;\n\n return {\n firstPage,\n rangeLastPage,\n totalLastPage,\n totalPages,\n prevPage,\n nextPage,\n isPrevPageDisabled,\n isNextPageDisabled,\n isFirstPageDisabled,\n isLastPageDisabled,\n };\n}\nexport default usePagination;\n"],"names":["usePagination","_ref","itemCountPerPage","pageRangeDisplayed","totalItemCount","activePage","buffer","firstPage","Math","max","floor","totalPages","ceil","rangeLastPage","useMemo","min","totalLastPage","prevPage","nextPage","isPrevPageDisabled","isNextPageDisabled","isFirstPageDisabled","isLastPageDisabled"],"mappings":";;AAIA,SAASA,aAAaA,CAAAC,IAAA,EAKF;AAAA,EAAA,IAJlBC,gBAAgB,GAAAD,IAAA,CAAhBC,gBAAgB;IAChBC,kBAAkB,GAAAF,IAAA,CAAlBE,kBAAkB;IAClBC,cAAc,GAAAH,IAAA,CAAdG,cAAc;IACdC,UAAU,GAAAJ,IAAA,CAAVI,UAAU,CAAA;EAEV,IAAMC,MAAM,GAAGD,UAAU,GAAGF,kBAAkB,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;EAE5D,IAAMI,SAAS,GAAGC,IAAI,CAACC,GAAG,CACxB,CAAC,EACDD,IAAI,CAACE,KAAK,CAACL,UAAU,GAAGF,kBAAkB,GAAGG,MAAM,CAAC,GAAGH,kBAAkB,GACvE,CACJ,CAAC,CAAA;EAED,IAAMQ,UAAU,GAAGH,IAAI,CAACI,IAAI,CAACR,cAAc,GAAGF,gBAAgB,CAAC,CAAA;EAE/D,IAAMW,aAAa,GAAGC,OAAO,CAC3B,YAAA;AAAA,IAAA,OACEN,IAAI,CAACO,GAAG,CACNJ,UAAU,EACVH,IAAI,CAACI,IAAI,CAACP,UAAU,GAAGF,kBAAkB,CAAC,GAAGA,kBAC/C,CAAC,CAAA;AAAA,GAAA,EACH,CAACE,UAAU,EAAEF,kBAAkB,EAAEQ,UAAU,CAC7C,CAAC,CAAA;EAED,IAAMK,aAAa,GAAGF,OAAO,CAC3B,YAAA;AAAA,IAAA,OAAO,CAACV,cAAc,GAAG,CAAC,GAAGI,IAAI,CAACI,IAAI,CAACR,cAAc,GAAGF,gBAAgB,CAAC,CAAA;AAAA,GAAC,EAC1E,CAACE,cAAc,EAAEF,gBAAgB,CACnC,CAAC,CAAA;AAED,EAAA,IAAMe,QAAQ,GAAGV,SAAS,GAAG,CAAC,CAAA;AAC9B,EAAA,IAAMW,QAAQ,GAAGL,aAAa,GAAG,CAAC,CAAA;AAElC,EAAA,IAAMM,kBAAkB,GAAGF,QAAQ,GAAG,CAAC,CAAA;AACvC,EAAA,IAAMG,kBAAkB,GAAGF,QAAQ,GAAGP,UAAU,CAAA;AAEhD,EAAA,IAAMU,mBAAmB,GAAGhB,UAAU,KAAK,CAAC,CAAA;AAC5C,EAAA,IAAMiB,kBAAkB,GAAGjB,UAAU,KAAKW,aAAa,CAAA;EAEvD,OAAO;AACLT,IAAAA,SAAS,EAATA,SAAS;AACTM,IAAAA,aAAa,EAAbA,aAAa;AACbG,IAAAA,aAAa,EAAbA,aAAa;AACbL,IAAAA,UAAU,EAAVA,UAAU;AACVM,IAAAA,QAAQ,EAARA,QAAQ;AACRC,IAAAA,QAAQ,EAARA,QAAQ;AACRC,IAAAA,kBAAkB,EAAlBA,kBAAkB;AAClBC,IAAAA,kBAAkB,EAAlBA,kBAAkB;AAClBC,IAAAA,mBAAmB,EAAnBA,mBAAmB;AACnBC,IAAAA,kBAAkB,EAAlBA,kBAAAA;GACD,CAAA;AACH;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useMouseEventAway.mjs","sources":["../../../../src/hooks/useMouseEventAway.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\ntype MouseEventNames = Extract<\n keyof DocumentEventMap,\n `mouse${string}` | `pointer${string}` | `touch${string}` | 'click'\n>;\n\nexport default function useMouseEventAway<\n T extends HTMLElement,\n E extends MouseEventNames\n>(eventName: E, callback: (e: DocumentEventMap[E]) => void) {\n const ref = useRef<T | null>(null);\n const callbackRef = useRef(callback);\n callbackRef.current = callback;\n\n useEffect(() => {\n function clickAwayHandler(e: DocumentEventMap[E]) {\n if (!(e.target instanceof Node)) {\n return;\n }\n\n if (ref.current && !ref.current.contains(e.target)) {\n callbackRef.current(e);\n }\n }\n\n document.addEventListener(eventName, clickAwayHandler, true);\n\n return () => {\n document.removeEventListener(eventName, clickAwayHandler, true);\n };\n }, [eventName]);\n\n return ref;\n}\n"],"names":["useMouseEventAway","eventName","callback","ref","useRef","callbackRef","current","useEffect","clickAwayHandler","e","target","Node","contains","document","addEventListener","removeEventListener"],"mappings":";;AAOe,SAASA,iBAAiBA,CAGvCC,SAAY,EAAEC,QAA0C,EAAE;AAC1D,EAAA,IAAMC,GAAG,GAAGC,MAAM,CAAW,IAAI,CAAC,CAAA;AAClC,EAAA,IAAMC,WAAW,GAAGD,MAAM,CAACF,QAAQ,CAAC,CAAA;EACpCG,WAAW,CAACC,OAAO,GAAGJ,QAAQ,CAAA;AAE9BK,EAAAA,SAAS,CAAC,YAAM;IACd,SAASC,gBAAgBA,CAACC,CAAsB,EAAE;AAChD,MAAA,IAAI,EAAEA,CAAC,CAACC,MAAM,YAAYC,IAAI,CAAC,EAAE;AAC/B,QAAA,OAAA;AACF,OAAA;AAEA,MAAA,IAAIR,GAAG,CAACG,OAAO,IAAI,CAACH,GAAG,CAACG,OAAO,CAACM,QAAQ,CAACH,CAAC,CAACC,MAAM,CAAC,EAAE;AAClDL,QAAAA,WAAW,CAACC,OAAO,CAACG,CAAC,CAAC,CAAA;AACxB,OAAA;AACF,KAAA;IAEAI,QAAQ,CAACC,gBAAgB,CAACb,SAAS,EAAEO,gBAAgB,EAAE,IAAI,CAAC,CAAA;AAE5D,IAAA,OAAO,YAAM;MACXK,QAAQ,CAACE,mBAAmB,CAACd,SAAS,EAAEO,gBAAgB,EAAE,IAAI,CAAC,CAAA;KAChE,CAAA;AACH,GAAC,EAAE,CAACP,SAAS,CAAC,CAAC,CAAA;AAEf,EAAA,OAAOE,GAAG,CAAA;AACZ;;;;"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
export { default as Avatar } from './Avatars/Avatar/index.mjs';
|
|
2
|
+
export { default as Button } from './Buttons/Button/index.mjs';
|
|
3
|
+
export { badgePseudo } from './Badge/utils.mjs';
|
|
4
|
+
export { Badge } from './Badge/Badge.mjs';
|
|
5
|
+
export { Divider } from './Common/Divider/index.mjs';
|
|
6
|
+
export { Flex } from './Common/Flex/index.mjs';
|
|
7
|
+
export { Grid } from './Common/Grid/index.mjs';
|
|
8
|
+
export { Spinner } from './Common/Spinner/index.mjs';
|
|
9
|
+
export { default as Typography } from './Common/Typography/index.mjs';
|
|
10
|
+
export { Checkbox, _Checkbox } from './Control/Checkbox.mjs';
|
|
11
|
+
export { CircleBaseToggle, Toggle, _Toggle } from './Control/Toggle.mjs';
|
|
12
|
+
export { Switch } from './Control/Switch/index.mjs';
|
|
13
|
+
export { Radio } from './Control/Radio.mjs';
|
|
14
|
+
export { RememberLogo, getViewBoxWidth } from './Logos/RememberLogo/index.mjs';
|
|
15
|
+
export { RememberMobileLogo } from './Logos/RememberMobileLogo/index.mjs';
|
|
16
|
+
export { RememberSquareLogo } from './Logos/RememberSquareLogo/index.mjs';
|
|
17
|
+
export { RememberServiceLogo } from './Logos/RememberServiceLogo/index.mjs';
|
|
18
|
+
export { Dialog } from './Modals/Dialog/index.mjs';
|
|
19
|
+
export { Pagination } from './Paginations/Pagination/index.mjs';
|
|
20
|
+
export { CompactPagination } from './Paginations/CompactPagination/index.mjs';
|
|
21
|
+
export { default as TextInput } from './Inputs/TextInput/index.mjs';
|
|
22
|
+
export { default as Select } from './Inputs/Select/index.mjs';
|
|
23
|
+
export { default as Tooltip } from './Floating/Tooltip/index.mjs';
|
|
24
|
+
export { default as Popover } from './Floating/Popover/index.mjs';
|
|
25
|
+
export { default as DropdownMenu } from './Floating/DropdownMenu/index.mjs';
|
|
26
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"common.mjs","sources":["../../../../shared/utils/common.ts"],"sourcesContent":["export const range = (start: number, end: number) => {\n if (end < start) {\n return []; // 유효하지 않은 입력값 처리\n }\n return Array(end - start + 1)\n .fill(0)\n .map((_, idx) => start + idx);\n};\nexport const isSSR = () => typeof window === 'undefined';\n"],"names":["range","start","end","Array","fill","map","_","idx","isSSR","window"],"mappings":"AAAO,IAAMA,KAAK,GAAG,SAARA,KAAKA,CAAIC,KAAa,EAAEC,GAAW,EAAK;EACnD,IAAIA,GAAG,GAAGD,KAAK,EAAE;IACf,OAAO,EAAE,CAAC;AACZ,GAAA;AACA,EAAA,OAAOE,KAAK,CAACD,GAAG,GAAGD,KAAK,GAAG,CAAC,CAAC,CAC1BG,IAAI,CAAC,CAAC,CAAC,CACPC,GAAG,CAAC,UAACC,CAAC,EAAEC,GAAG,EAAA;IAAA,OAAKN,KAAK,GAAGM,GAAG,CAAA;GAAC,CAAA,CAAA;AACjC,EAAC;AACYC,IAAAA,KAAK,GAAG,SAARA,KAAKA,GAAA;EAAA,OAAS,OAAOC,MAAM,KAAK,WAAW,CAAA;AAAA;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"style.mjs","sources":["../../../../shared/utils/style.ts"],"sourcesContent":["type FormatUnitFunction = {\n (value: string): string;\n (value: number, unit?: string): string;\n (value: number | string, unit?: string): string;\n};\n\nexport const formatUnit: FormatUnitFunction = (value, unit = 'px') => {\n if (typeof value === 'number') {\n return `${value}${unit}`;\n }\n\n return value;\n};\n"],"names":["formatUnit","value","unit","arguments","length","undefined","concat"],"mappings":"IAMaA,UAA8B,GAAG,SAAjCA,UAA8BA,CAAIC,KAAK,EAAkB;AAAA,EAAA,IAAhBC,IAAI,GAAAC,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,IAAI,CAAA;AAC/D,EAAA,IAAI,OAAOF,KAAK,KAAK,QAAQ,EAAE;AAC7B,IAAA,OAAA,EAAA,CAAAK,MAAA,CAAUL,KAAK,CAAAK,CAAAA,MAAA,CAAGJ,IAAI,CAAA,CAAA;AACxB,GAAA;AAEA,EAAA,OAAOD,KAAK,CAAA;AACd;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@remember-web/primitive",
|
|
3
|
-
"version": "0.0.0-alpha.
|
|
3
|
+
"version": "0.0.0-alpha.6",
|
|
4
4
|
"description": "RUI Primitive Components",
|
|
5
5
|
"homepage": "https://dramancompany.github.io/rui/",
|
|
6
6
|
"author": "Remember",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"registry": "https://registry.npmjs.org/"
|
|
15
15
|
},
|
|
16
16
|
"scripts": {
|
|
17
|
-
"build": "rollup -c ./rollup.config.
|
|
17
|
+
"build": "rollup -c ./rollup.config.mjs && yarn fix:dts-alias",
|
|
18
18
|
"fix:dts-alias": "yarn tsc-alias -p tsconfig.alias.json",
|
|
19
19
|
"type-check": "tsc -p ./tsconfig.json",
|
|
20
20
|
"lint": "eslint src --fix --ext .js,.jsx,.ts,.tsx"
|
|
@@ -23,14 +23,13 @@
|
|
|
23
23
|
"dist",
|
|
24
24
|
"src"
|
|
25
25
|
],
|
|
26
|
-
"type": "module",
|
|
27
26
|
"source": "./src/index.ts",
|
|
28
27
|
"main": "./dist/primitive/src/index.cjs",
|
|
29
|
-
"module": "./dist/primitive/src/index.
|
|
28
|
+
"module": "./dist/primitive/src/index.mjs",
|
|
30
29
|
"types": "./dist/primitive/src/index.d.ts",
|
|
31
30
|
"exports": {
|
|
32
31
|
".": {
|
|
33
|
-
"import": "./dist/primitive/src/index.
|
|
32
|
+
"import": "./dist/primitive/src/index.mjs",
|
|
34
33
|
"require": "./dist/primitive/src/index.cjs",
|
|
35
34
|
"types": "./dist/primitive/src/index.d.ts"
|
|
36
35
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/Avatars/Avatar/index.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef } from 'react';\nimport type { ForwardRefRenderFunction, ComponentPropsWithoutRef } from 'react';\nimport { bg200, divider } from '@remember-web/mixin';\n\nimport type { StyledAvatarProps } from '@/Avatars/Avatar/styles';\nimport { StyledAvatar } from '@/Avatars/Avatar/styles';\nimport { IconAvatarEmpty } from '@remember-web/icon';\nimport type { ConvertTransientProps } from '@remember-web/shared/types/styles';\n\nexport type AvatarProps = Partial<ConvertTransientProps<StyledAvatarProps>> &\n ComponentPropsWithoutRef<'div'>;\n\nconst Avatar: ForwardRefRenderFunction<HTMLDivElement, AvatarProps> = (\n {\n size = 'medium',\n backgroundColor = bg200,\n border = { color: divider, width: '1px' },\n rounded = true,\n imageUrl,\n children,\n }: AvatarProps,\n ref\n) => (\n <StyledAvatar\n ref={ref}\n $size={size}\n $backgroundColor={backgroundColor}\n $border={border}\n $rounded={rounded}\n >\n {imageUrl ? (\n <img src={imageUrl} loading=\"lazy\" alt=\"avatar\" />\n ) : (\n children ?? <IconAvatarEmpty size=\"100%\" />\n )}\n </StyledAvatar>\n);\n\nexport default forwardRef(Avatar);\n"],"names":["size","backgroundColor","color","width","rounded","ref","$size","$backgroundColor","$border","$rounded","src","loading","alt"],"mappings":";;;;;;;AAcA;AASK;AAPDA;;AACAC;;;AACWC;AAAgBC;AAAa;;AACxCC;;;;AAOAC;AACAC;AACAC;AACAC;AACAC;;AAGOC;AAAeC;AAAeC;;AAENZ;;AAC9B;AACY;AAGjB;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../../../src/Avatars/Avatar/styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { CSSProperties } from 'react';\n\nexport const avatarSize = {\n xxlarge: 64,\n xlarge: 56,\n large: 48,\n medium: 40,\n small: 32,\n xsmall: 24,\n xxsmall: 20,\n};\n\nexport interface StyledAvatarProps {\n $size: keyof typeof avatarSize;\n $border?: {\n width?: NonNullable<CSSProperties['borderWidth']>;\n color?: NonNullable<CSSProperties['borderColor']>;\n };\n $rounded?: boolean;\n $imageUrl?: string;\n $backgroundColor?: CSSProperties['backgroundColor'];\n}\n\nexport const StyledAvatar = styled.div<StyledAvatarProps>(\n ({ $size, $border, $backgroundColor, $rounded }) => ({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: `${avatarSize[$size]}px`,\n maxWidth: `${avatarSize[$size]}px`,\n maxHeight: `${avatarSize[$size]}px`,\n aspectRatio: '1 / 1',\n boxSizing: 'border-box',\n border: $border ? `${$border.width} solid ${$border.color}` : 'none',\n borderRadius: $rounded ? '50%' : 'none',\n\n backgroundColor: $backgroundColor,\n\n contain: 'strict',\n\n img: {\n width: '100%',\n height: '100%',\n },\n })\n);\n"],"names":["avatarSize","xxlarge","xlarge","large","medium","small","xsmall","xxsmall","StyledAvatar","styled","div","_ref","$size","$border","$backgroundColor","$rounded","display","alignItems","justifyContent","width","concat","maxWidth","maxHeight","aspectRatio","boxSizing","border","color","borderRadius","backgroundColor","contain","img","height"],"mappings":";;AAGO,IAAMA,UAAU,GAAG;AACxBC,EAAAA,OAAO,EAAE,EAAE;AACXC,EAAAA,MAAM,EAAE,EAAE;AACVC,EAAAA,KAAK,EAAE,EAAE;AACTC,EAAAA,MAAM,EAAE,EAAE;AACVC,EAAAA,KAAK,EAAE,EAAE;AACTC,EAAAA,MAAM,EAAE,EAAE;AACVC,EAAAA,OAAO,EAAE,EAAA;AACX,EAAC;AAaM,IAAMC,YAAY,GAAGC,MAAM,CAACC,GAAG,CACpC,UAAAC,IAAA,EAAA;AAAA,EAAA,IAAGC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,OAAO,GAAAF,IAAA,CAAPE,OAAO;IAAEC,gBAAgB,GAAAH,IAAA,CAAhBG,gBAAgB;IAAEC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ,CAAA;EAAA,OAAQ;AACnDC,IAAAA,OAAO,EAAE,MAAM;AACfC,IAAAA,UAAU,EAAE,QAAQ;AACpBC,IAAAA,cAAc,EAAE,QAAQ;AACxBC,IAAAA,KAAK,KAAAC,MAAA,CAAKpB,UAAU,CAACY,KAAK,CAAC,EAAI,IAAA,CAAA;AAC/BS,IAAAA,QAAQ,KAAAD,MAAA,CAAKpB,UAAU,CAACY,KAAK,CAAC,EAAI,IAAA,CAAA;AAClCU,IAAAA,SAAS,KAAAF,MAAA,CAAKpB,UAAU,CAACY,KAAK,CAAC,EAAI,IAAA,CAAA;AACnCW,IAAAA,WAAW,EAAE,OAAO;AACpBC,IAAAA,SAAS,EAAE,YAAY;AACvBC,IAAAA,MAAM,EAAEZ,OAAO,GAAAO,EAAAA,CAAAA,MAAA,CAAMP,OAAO,CAACM,KAAK,EAAA,SAAA,CAAA,CAAAC,MAAA,CAAUP,OAAO,CAACa,KAAK,IAAK,MAAM;AACpEC,IAAAA,YAAY,EAAEZ,QAAQ,GAAG,KAAK,GAAG,MAAM;AAEvCa,IAAAA,eAAe,EAAEd,gBAAgB;AAEjCe,IAAAA,OAAO,EAAE,QAAQ;AAEjBC,IAAAA,GAAG,EAAE;AACHX,MAAAA,KAAK,EAAE,MAAM;AACbY,MAAAA,MAAM,EAAE,MAAA;AACV,KAAA;GACD,CAAA;AAAA,CACH;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","sources":["../../../../src/Badge/Badge.tsx"],"sourcesContent":["import { StyledBadge } from '@/Badge/style';\nimport type { BadgeValueProps } from '@/Badge/types';\nimport { getBadgeValue } from '@/Badge/utils';\n\nexport type BadgeProps = { value: BadgeValueProps };\n\nexport function Badge({ value }: BadgeProps) {\n return <StyledBadge>{getBadgeValue(value)}</StyledBadge>;\n}\n"],"names":["Badge","_ref","value","_jsx","StyledBadge","children","getBadgeValue"],"mappings":";;;;AAMO,SAASA,KAAKA,CAAAC,IAAA,EAAwB;AAAA,EAAA,IAArBC,KAAK,GAAAD,IAAA,CAALC,KAAK,CAAA;EAC3B,oBAAOC,GAAA,CAACC,WAAW,EAAA;IAAAC,QAAA,EAAEC,aAAa,CAACJ,KAAK,CAAA;AAAC,GAAc,CAAC,CAAA;AAC1D;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/Badge/style.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport {\n contents999,\n getTypographyStyles,\n secondary100,\n} from '@remember-web/mixin';\n\n/**\n * pseudo로 사용시 data-badge-value attribue가 필요합니다.\n */\nexport const badgeCss = css`\n ${getTypographyStyles('Subtitle2')}\n\n display: inline-block;\n box-sizing: border-box;\n line-height: 16px;\n min-height: 8px;\n background: ${secondary100};\n color: ${contents999};\n border-radius: 8px;\n padding: 1px 4px 0 4px;\n`;\n\n/**\n * @param pseudo - default: 'after'\n * @param top - default: 0\n * @param right - default: 0\n */\nexport const getBadgePseudoCss = (\n pseudo: 'after' | 'before' = 'after',\n { top = 0, right = 0 } = {}\n) => css`\n &[data-badge-value]::${pseudo} {\n ${badgeCss};\n content: attr(data-badge-value);\n position: absolute;\n top: ${top};\n right: ${right};\n transform: translate(50%, -50%);\n }\n`;\n\nexport const StyledBadge = styled.span`\n ${badgeCss};\n`;\n"],"names":["badgeCss","css","_templateObject","_taggedTemplateLiteral","getTypographyStyles","secondary100","contents999","getBadgePseudoCss","pseudo","arguments","length","undefined","_ref","_ref$top","top","_ref$right","right","_templateObject2","StyledBadge","styled","span","_templateObject3"],"mappings":";;;;;;AAOA;AACA;AACA;IACaA,QAAQ,GAAGC,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,CACvBC,CAAAA,MAAAA,EAAAA,mHAAAA,EAAAA,cAAAA,EAAAA,uDAAAA,CAAAA,CAAAA,CAAAA,EAAAA,mBAAmB,CAAC,WAAW,CAAC,EAMpBC,YAAY,EACjBC,WAAW,EAGrB;;AAED;AACA;AACA;AACA;AACA;AACaC,IAAAA,iBAAiB,GAAG,SAApBA,iBAAiBA,GAAA;AAAA,EAAA,IAC5BC,MAA0B,GAAAC,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,OAAO,CAAA;AAAA,EAAA,IAAAG,IAAA,GAAAH,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GACX,EAAE;IAAAI,QAAA,GAAAD,IAAA,CAAzBE,GAAG;AAAHA,IAAAA,GAAG,GAAAD,QAAA,KAAG,KAAA,CAAA,GAAA,CAAC,GAAAA,QAAA;IAAAE,UAAA,GAAAH,IAAA,CAAEI,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,CAAC,GAAAA,UAAA,CAAA;AAAA,EAAA,OACjBd,GAAG,CAAAgB,gBAAA,KAAAA,gBAAA,GAAAd,sBAAA,CACiBK,CAAAA,2BAAAA,EAAAA,UAAAA,EAAAA,6EAAAA,EAAAA,gBAAAA,EAAAA,gDAAAA,CAAAA,CAAAA,CAAAA,EAAAA,MAAM,EACzBR,QAAQ,EAGHc,GAAG,EACDE,KAAK,CAAA,CAAA;AAAA,EAGjB;AAEYE,IAAAA,WAAW,GAAGC,MAAM,CAACC,IAAI,CAAAC,gBAAA,KAAAA,gBAAA,GAAAlB,sBAAA,CAAA,CAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA,EAClCH,QAAQ;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../../../../src/Badge/utils.ts"],"sourcesContent":["import type { BadgeValueProps } from '@/Badge/types';\n\nimport { getBadgePseudoCss } from '@/Badge/style';\n\nexport const getBadgeValue = (props: BadgeValueProps): string => {\n if (typeof props === 'string') {\n return props;\n }\n\n const { max = 99, current = 0 } = props;\n\n return current > max ? `${max}+` : `${current}`;\n};\n\nexport const badgePseudo = {\n getBadgePseudoCss,\n getBadgeAttr: (props: BadgeValueProps) => ({\n 'data-badge-value': getBadgeValue(props),\n }),\n};\n"],"names":["getBadgeValue","props","_props$max","max","_props$current","current","concat","badgePseudo","getBadgePseudoCss","getBadgeAttr"],"mappings":";;IAIaA,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,KAAsB,EAAa;AAC/D,EAAA,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;AAC7B,IAAA,OAAOA,KAAK,CAAA;AACd,GAAA;AAEA,EAAA,IAAAC,UAAA,GAAkCD,KAAK,CAA/BE,GAAG;AAAHA,IAAAA,GAAG,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,EAAE,GAAAA,UAAA;IAAAE,cAAA,GAAkBH,KAAK,CAArBI,OAAO;AAAPA,IAAAA,OAAO,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,CAAC,GAAAA,cAAA,CAAA;EAE7B,OAAOC,OAAO,GAAGF,GAAG,GAAAG,EAAAA,CAAAA,MAAA,CAAMH,GAAG,EAAAG,GAAAA,CAAAA,GAAAA,EAAAA,CAAAA,MAAA,CAASD,OAAO,CAAE,CAAA;AACjD,EAAC;AAEM,IAAME,WAAW,GAAG;AACzBC,EAAAA,iBAAiB,EAAjBA,iBAAiB;EACjBC,YAAY,EAAE,SAAAA,YAAAA,CAACR,KAAsB,EAAA;IAAA,OAAM;MACzC,kBAAkB,EAAED,aAAa,CAACC,KAAK,CAAA;KACxC,CAAA;AAAA,GAAA;AACH;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"const.js","sources":["../../../../../src/Buttons/Button/const.ts"],"sourcesContent":["import type { SpinnerSize } from '@/Common/Spinner/types';\nimport { contents000, contents300, contents999 } from '@remember-web/mixin';\n\nimport type { ButtonSize, ButtonVariant } from './types';\n\nexport const BUTTON_SIZES = {\n small: {\n typography: 'Body2_M',\n height: '32px',\n minWidth: '68px',\n padding: '0 16px',\n },\n medium: {\n typography: 'Body1_M',\n height: '36px',\n minWidth: '78px',\n padding: '0 20px',\n },\n large: {\n typography: 'Headline4_M',\n height: '44px',\n minWidth: '108px',\n padding: '0 20px',\n },\n xLarge: {\n typography: 'Headline4_M',\n height: '52px',\n minWidth: '116px',\n padding: '0 24px',\n },\n} as const satisfies Record<ButtonSize, unknown>;\n\nexport const BUTTON_COLORS = {\n primary: {\n backgroundColor: contents000,\n color: contents999,\n },\n outline: {\n backgroundColor: 'transparent',\n color: contents000,\n borderColor: contents300,\n },\n} as const satisfies Record<ButtonVariant, unknown>;\n\nexport const SPINNER_SIZE_MAP = {\n small: 'small',\n medium: 'small',\n large: 'medium',\n xLarge: 'medium',\n} as const satisfies Record<ButtonSize, SpinnerSize>;\n\nexport const ICON_GAP_MAP = {\n small: '4px',\n medium: '4px',\n large: '8px',\n xLarge: '8px',\n} as const satisfies Record<ButtonSize, string>;\n"],"names":["BUTTON_SIZES","small","typography","height","minWidth","padding","medium","large","xLarge","BUTTON_COLORS","primary","backgroundColor","contents000","color","contents999","outline","borderColor","contents300","SPINNER_SIZE_MAP","ICON_GAP_MAP"],"mappings":";;AAKO,IAAMA,YAAY,GAAG;AAC1BC,EAAAA,KAAK,EAAE;AACLC,IAAAA,UAAU,EAAE,SAAS;AACrBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,MAAM;AAChBC,IAAAA,OAAO,EAAE,QAAA;GACV;AACDC,EAAAA,MAAM,EAAE;AACNJ,IAAAA,UAAU,EAAE,SAAS;AACrBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,MAAM;AAChBC,IAAAA,OAAO,EAAE,QAAA;GACV;AACDE,EAAAA,KAAK,EAAE;AACLL,IAAAA,UAAU,EAAE,aAAa;AACzBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,OAAO;AACjBC,IAAAA,OAAO,EAAE,QAAA;GACV;AACDG,EAAAA,MAAM,EAAE;AACNN,IAAAA,UAAU,EAAE,aAAa;AACzBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,OAAO;AACjBC,IAAAA,OAAO,EAAE,QAAA;AACX,GAAA;AACF,EAAgD;AAEzC,IAAMI,aAAa,GAAG;AAC3BC,EAAAA,OAAO,EAAE;AACPC,IAAAA,eAAe,EAAEC,WAAW;AAC5BC,IAAAA,KAAK,EAAEC,WAAAA;GACR;AACDC,EAAAA,OAAO,EAAE;AACPJ,IAAAA,eAAe,EAAE,aAAa;AAC9BE,IAAAA,KAAK,EAAED,WAAW;AAClBI,IAAAA,WAAW,EAAEC,WAAAA;AACf,GAAA;AACF,EAAmD;AAE5C,IAAMC,gBAAgB,GAAG;AAC9BjB,EAAAA,KAAK,EAAE,OAAO;AACdK,EAAAA,MAAM,EAAE,OAAO;AACfC,EAAAA,KAAK,EAAE,QAAQ;AACfC,EAAAA,MAAM,EAAE,QAAA;AACV,EAAoD;AAE7C,IAAMW,YAAY,GAAG;AAC1BlB,EAAAA,KAAK,EAAE,KAAK;AACZK,EAAAA,MAAM,EAAE,KAAK;AACbC,EAAAA,KAAK,EAAE,KAAK;AACZC,EAAAA,MAAM,EAAE,KAAA;AACV;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/Buttons/Button/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ElementType, ForwardRefRenderFunction } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { As } from '@remember-web/shared/types';\nimport { Spinner } from '@/Common';\n\nimport { SPINNER_SIZE_MAP } from './const';\nimport { StyledButton } from './styles';\nimport type { ButtonProps, ButtonSize } from './types';\n\nconst Button: ForwardRefRenderFunction<\n HTMLButtonElement,\n ButtonProps<'button'> & As<ElementType>\n> = (\n {\n children,\n color,\n size = 'small',\n variant = 'primary',\n layout = 'block',\n isLoading = false,\n filled = variant === 'primary',\n icon,\n iconPosition = 'left',\n ...props\n },\n ref\n) => (\n <StyledButton\n $color={color}\n $size={size}\n $variant={variant}\n $layout={layout}\n $isLoading={isLoading}\n $filled={filled}\n aria-live=\"polite\"\n aria-busy={isLoading}\n ref={ref}\n {...props}\n >\n {isLoading ? (\n <Spinner size={SPINNER_SIZE_MAP[size]} />\n ) : (\n <>\n {iconPosition === 'left' && icon}\n {children}\n {iconPosition === 'right' && icon}\n </>\n )}\n </StyledButton>\n);\n\ntype ButtonComponentWithRef = <T extends ElementType = 'button'>(\n props: { as?: T | null } & ButtonProps<T> & {\n ref?: React.ComponentPropsWithRef<T>['ref'];\n }\n) => React.ReactElement | null;\n\nexport default forwardRef(Button) as ButtonComponentWithRef;\n"],"names":["size","variant","layout","isLoading","filled","iconPosition","props","$color","$size","$variant","$layout","$isLoading","$filled","ref","children"],"mappings":";;;;;;;;;;;;;AAAa;AAAA;AAAA;AAYb;AAgBK;;;AATDA;;AACAC;;AACAC;;AACAC;;AACAC;;;AAEAC;AACGC;AAAK;AAKRC;AACAC;AACAC;AACAC;AACAC;AACAC;AACA;AACA;AACAC;AAAS;AACAC;;AAG+B;AAEtCA;;AAKD;AACY;AASjB;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../../../src/Buttons/Button/styles.ts"],"sourcesContent":["'use client';\n\nimport type { DataAttributes } from 'styled-components';\nimport styled, { css } from 'styled-components';\n\nimport {\n bg100,\n disabled,\n getTypographyStyles,\n primary100,\n primary200,\n} from '@remember-web/mixin';\n\nimport { BUTTON_COLORS, BUTTON_SIZES, ICON_GAP_MAP } from './const';\nimport type { ButtonStyleProps } from './types';\n\nexport const StyledButton = styled.button<ButtonStyleProps & DataAttributes>(\n ({ $size, $layout, $color, ...props }) => [\n // 공용 스타일\n css`\n all: unset;\n appearance: none;\n\n box-sizing: border-box;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n -webkit-user-select: none;\n\n display: ${$layout === 'inline' ? 'inline-flex' : 'flex'};\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n gap: ${ICON_GAP_MAP[$size]};\n\n ${getTypographyStyles(BUTTON_SIZES[$size].typography)}\n text-align: center;\n\n width: fit-content;\n ${$layout === 'fullBlock' && `width: 100%;`}\n min-width: ${BUTTON_SIZES[$size].minWidth};\n height: ${BUTTON_SIZES[$size].height};\n padding: ${BUTTON_SIZES[$size].padding};\n border-radius: 4px;\n\n color: ${(props.$variant.startsWith('outline') ? $color : null) ??\n BUTTON_COLORS[props.$variant].color};\n\n &:focus-visible:not(:disabled) {\n outline: 2px solid ${primary100};\n outline-offset: 2px;\n }\n\n &:disabled {\n cursor: not-allowed;\n\n &::before {\n display: none;\n }\n }\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ${primary200};\n opacity: 0;\n pointer-events: none;\n\n transition: opacity 0.2s;\n }\n @media (hover: hover) {\n &:hover::before {\n opacity: 0.1;\n }\n }\n &:active::before {\n opacity: 0.2;\n }\n `,\n\n // primary 스타일\n props.$variant === 'primary' &&\n css`\n background-color: ${$color ??\n BUTTON_COLORS[props.$variant].backgroundColor};\n &:disabled {\n background-color: ${disabled};\n }\n &::before {\n background-color: ${primary200};\n }\n `,\n\n // outline 스타일\n props.$variant === 'outline' &&\n css`\n background-color: ${props.$filled\n ? bg100\n : BUTTON_COLORS[props.$variant].backgroundColor};\n border: 1px solid ${$color ?? BUTTON_COLORS[props.$variant].borderColor};\n &:disabled {\n border-color: ${disabled};\n color: ${disabled};\n }\n &::before {\n background-color: ${$color ?? primary100};\n }\n `,\n ]\n);\n"],"names":["props","css"],"mappings":";;;;;;;AAAa;AAAA;AAgBN;AACL;AAAA;;;AAA8BA;AAAK;AAEjCC;AAmEA;AACAD;AAYA;;AAeD;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/Common/Divider/index.tsx"],"sourcesContent":["'use client';\n\nimport * as SeparatorPrimitive from '@radix-ui/react-separator';\nimport styled from 'styled-components';\n\nimport { divider } from '@remember-web/mixin';\n\nexport interface DividerProps extends SeparatorPrimitive.SeparatorProps {\n color?: string;\n}\n\nconst StyledDivider = styled(SeparatorPrimitive.Root)<DividerProps>`\n background-color: ${({ color = divider }) => color};\n &[data-orientation='horizontal'] {\n height: 1px;\n width: 100%;\n }\n\n &[data-orientation='vertical'] {\n height: 100%;\n width: 1px;\n }\n`;\n\n/**\n * @prop {\"horizontal\" | \"vertical\"} orientation - default: \"horizontal\"\n * @prop {boolean} decorative - pure한 장식 컴포넌트 여부. true일 경우 웹 접근성 속성에서 제거됨.\n */\nexport const Divider = (props: DividerProps) => <StyledDivider {...props} />;\n"],"names":["color"],"mappings":";;;;;;;;AAAa;AAAA;AAAA;AAWb;AACsB;AAAGA;AAAe;AAAY;;AAYpD;AACA;AACA;AACA;;;AAC4E;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/Common/Flex/index.tsx"],"sourcesContent":["'use client';\n\nimport type { CSSProperties, ElementType, HTMLAttributes } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type { ConvertTransientProps } from '@remember-web/shared/types/styles';\n\nexport interface FlexProps extends HTMLAttributes<HTMLDivElement> {\n as?: ElementType;\n $align?: CSSProperties['alignItems'];\n $direction?: CSSProperties['flexDirection'];\n $justify?: CSSProperties['justifyContent'];\n $wrap?: CSSProperties['flexWrap'];\n $gap?: string | number;\n $width?: string | number;\n $height?: string | number;\n}\n\nconst StyledFlex = styled.div<Partial<FlexProps>>(\n ({\n $align = 'center',\n $direction = 'row',\n $justify = 'center',\n $wrap = 'nowrap',\n $gap = 0,\n $width = 'auto',\n $height = 'auto',\n }) => css`\n box-sizing: border-box;\n display: flex;\n width: ${typeof $width === 'number' ? `${$width}px` : $width};\n height: ${typeof $height === 'number' ? `${$height}px` : $height};\n\n gap: ${typeof $gap === 'number' ? `${$gap}px` : $gap};\n align-items: ${$align};\n justify-content: ${$justify};\n flex-direction: ${$direction};\n flex-wrap: ${$wrap};\n `\n);\n\n/**\n * @prop {string} width\n * @prop {string} height\n * @prop {string} gap\n * @prop {CSSProperties['alignItems']} align\n * @prop {CSSProperties['justifyContent']} justify\n * @prop {CSSProperties['flexDirection']} direction\n * @prop {CSSProperties['flexWrap']} wrap\n */\nexport const Flex = ({\n as,\n width,\n height,\n direction,\n gap,\n align,\n justify,\n wrap,\n ...props\n}: ConvertTransientProps<FlexProps>) => (\n <StyledFlex\n as={as}\n $width={width}\n $height={height}\n $direction={direction}\n $gap={gap}\n $align={align}\n $justify={justify}\n $wrap={wrap}\n {...props}\n />\n);\n"],"names":["$align","$direction","$justify","$wrap","$gap","$width","$height","props","as"],"mappings":";;;;;;;AAAa;AAAA;AAAA;AAAA;AAkBb;AACE;AACEA;;AACAC;;AACAC;;AACAC;;AACAC;;AACAC;;AACAC;;AAWkB;;AAItB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACiB;;;;;;;;AASZC;AAAK;AAGNC;AACAH;AACAC;AACAL;AACAG;AACAJ;AACAE;AACAC;;AAEA;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/Common/Grid/index.tsx"],"sourcesContent":["'use client';\n\nimport type { CSSProperties, HTMLAttributes } from 'react';\nimport styled from 'styled-components';\n\nexport interface GridProps extends HTMLAttributes<HTMLDivElement> {\n width?: string;\n height?: string;\n align?: CSSProperties['alignItems'];\n justify?: CSSProperties['justifyContent'];\n flow?: CSSProperties['gridAutoFlow'];\n columns?: number;\n gap?: string;\n columnGap?: string;\n rowGap?: string;\n}\n\nconst StyledGrid = styled.div<Partial<GridProps>>`\n box-sizing: border-box;\n display: grid;\n width: ${({ width = '100%' }) => width};\n height: ${({ height = '100%' }) => height};\n align-items: ${({ align = 'center' }) => align};\n justify-content: ${({ justify = 'center' }) => justify};\n grid-auto-flow: ${({ flow = 'center' }) => flow};\n grid-template-columns: ${({ columns = 1 }) => `repeat(${columns}, 1fr)`};\n gap: ${({ gap = '0px' }) => gap};\n column-gap: ${({ columnGap = '0px' }) => columnGap};\n row-gap: ${({ rowGap = '0px' }) => rowGap};\n`;\n\n/**\n * @prop {string} width\n * @prop {string} height\n * @prop {CSSProperties['alignItems']} align\n * @prop {CSSProperties['justifyContent']} justify\n * @prop {CSSProperties['gridAutoFlow']} flow\n * @prop {number} columns\n * @prop {string} gap\n * @prop {string} columnGap\n * @prop {string} rowGap\n */\nexport const Grid = (props: GridProps) => <StyledGrid {...props} />;\n"],"names":["width","height","align","justify","flow","columns","gap","columnGap","rowGap"],"mappings":";;;;;;AAAa;AAAA;AAAA;AAiBb;AAGW;AAAGA;AAAc;AAAY;AAC5B;AAAGC;AAAe;AAAa;AAC1B;AAAGC;AAAgB;AAAY;AAC3B;AAAGC;AAAkB;AAAc;AACpC;AAAGC;AAAe;AAAW;AACtB;AAAGC;;AAAmC;AACxD;AAAGC;AAAW;AAAU;AACjB;AAAGC;AAAiB;AAAgB;AACvC;AAAGC;AAAc;AAAa;;AAG3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACmE;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/Common/Spinner/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconSpinner } from '@remember-web/icon';\n\nimport { Container } from './styles';\nimport type { SpinnerProps } from './types';\n\nexport const Spinner = ({\n size = 'small',\n className,\n color,\n layout = 'block',\n}: SpinnerProps) => (\n <Container className={className} $color={color} layout={layout}>\n <IconSpinner size={size} />\n </Container>\n);\n"],"names":["size","layout","className","$color"],"mappings":";;;;;;AAOoB;AAClBA;;;;AAGAC;;AAEWC;AAAsBC;AAAeF;;AACjCD;;AAAc;AACjB;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../../../src/Common/Spinner/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css, keyframes } from 'styled-components';\n\nimport type { SpinnerStyleProps } from './types';\n\nconst RotateAnimation = keyframes`\n to { transform: rotate(360deg); };\n`;\n\nexport const Container = styled.div<SpinnerStyleProps>(\n ({ $color, layout }) => css`\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n height: fit-content;\n ${layout === 'full' &&\n css`\n width: 100%;\n height: 100%;\n `}\n\n ${$color && `color: ${$color};`};\n\n & > svg {\n animation: ${RotateAnimation} 1.5s linear infinite;\n }\n `\n);\n"],"names":[],"mappings":";;;;AAAa;AAMb;AAIO;AACL;;AAAiB;AAee;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/Common/Typography/index.tsx"],"sourcesContent":["'use client';\n\nimport type {\n ComponentPropsWithoutRef,\n ComponentPropsWithRef,\n CSSProperties,\n ElementType,\n ReactElement,\n ReactNode,\n} from 'react';\nimport { forwardRef } from 'react';\n\nimport { type TypographyStyle } from '@remember-web/mixin';\n\nimport { StyledTypography } from './styles';\n\nconst Typography = <T extends ElementType>(\n {\n variant,\n as,\n color,\n children,\n ellipsis,\n maxWidth,\n ...props\n }: TypographyProps<T>,\n ref: ComponentPropsWithRef<T>['ref']\n) => (\n <StyledTypography\n ref={ref}\n as={as}\n $variant={variant}\n $color={color}\n $ellipsis={ellipsis}\n $maxWidth={maxWidth}\n {...props}\n >\n {children}\n </StyledTypography>\n);\n\ntype TypographyProps<T extends ElementType> = {\n variant: TypographyStyle;\n as?: T;\n color?: string;\n children?: ReactNode;\n ellipsis?: number;\n maxWidth?: CSSProperties['maxWidth'];\n} & ComponentPropsWithoutRef<T>;\n\ntype TypographyComponentWithRef = <T extends ElementType = 'div'>(\n props: TypographyProps<T> & { ref?: ComponentPropsWithRef<T>['ref'] }\n) => ReactElement | null;\n\nexport default forwardRef(Typography) as TypographyComponentWithRef;\n"],"names":["props","ref","as","$variant","$color","$ellipsis","$maxWidth","children"],"mappings":";;;;;;;AAAa;AAAA;AAAA;AAgBb;AAUsC;;;;;;AAF/BA;AAAK;AAKRC;AACAC;AACAC;AACAC;AACAC;AACAC;AAAoB;AACXC;AAEA;AACQ;AAgBrB;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../../../src/Common/Typography/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css } from 'styled-components';\nimport type { CSSProperties } from 'react';\n\nimport {\n ellipsis,\n getTypographyStyles,\n type TypographyStyle,\n} from '@remember-web/mixin';\n\nexport const StyledTypography = styled.div<{\n $variant: TypographyStyle;\n $color?: string;\n $ellipsis?: number;\n $maxWidth?: CSSProperties['maxWidth'];\n}>`\n ${({ $color, $variant, $ellipsis, $maxWidth }) => [\n getTypographyStyles($variant),\n $ellipsis && ellipsis($ellipsis),\n css({ color: $color, maxWidth: $maxWidth }),\n ]};\n`;\n"],"names":["StyledTypography","color","maxWidth"],"mappings":";;;;;AAAa;AAWAA;AAMT;;;;AAAyC;AAGnCC;AAAeC;AAAoB;AAC1C;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../../src/Control/BaseToggle/ToggleIcon/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n ControlBookmarkOff,\n ControlBookmarkOn,\n ControlCheckOff,\n ControlCheckOn,\n ControlCheckboxOff,\n ControlCheckboxOn,\n ControlFavoriteOff,\n ControlFavoriteOn,\n ControlRadioOff,\n ControlRadioOn,\n} from '@remember-web/icon';\n\nimport {\n SVG_SIZES,\n isSvgRegularSize,\n type SvgSizeProps,\n type WithSvgSizeComponentType,\n} from '@remember-web/icon/util';\n\nimport type { ToggleStatusType, ToggleVariantType } from '../types';\n\nconst ICON_NAME = {\n check: { on: ControlCheckOn, off: ControlCheckOff },\n checkbox: { on: ControlCheckboxOn, off: ControlCheckboxOff },\n favorite: { on: ControlFavoriteOn, off: ControlFavoriteOff },\n bookmark: { on: ControlBookmarkOn, off: ControlBookmarkOff },\n radio: { on: ControlRadioOn, off: ControlRadioOff },\n} as const satisfies Record<\n ToggleVariantType,\n Record<ToggleStatusType, WithSvgSizeComponentType>\n>;\n\nexport function ToggleIcon({\n size,\n status,\n variant,\n className,\n}: {\n variant: ToggleVariantType;\n status: ToggleStatusType;\n className?: string;\n} & SvgSizeProps) {\n const iconSize =\n typeof size === 'string' && isSvgRegularSize(size) ? SVG_SIZES[size] : size;\n const Icon = ICON_NAME[variant][status];\n\n return <Icon className={className} size={iconSize} />;\n}\n"],"names":["check","on","off","checkbox","favorite","bookmark","radio","className","size"],"mappings":";;;;;AAwBA;AACEA;AAASC;AAAoBC;;AAC7BC;AAAYF;AAAuBC;;AACnCE;AAAYH;AAAuBC;;AACnCG;AAAYJ;AAAuBC;;AACnCI;AAASL;AAAoBC;AAAqB;AACpD;AAKO;AASW;;;;AAChB;;;AAIaK;AAAsBC;AAAe;AACpD;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/Control/BaseToggle/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef } from 'react';\n\nimport { Typography } from '@/Common';\n\nimport { ToggleIcon } from './ToggleIcon';\nimport { ToggleInput, ToggleRoot } from './styles';\nimport type { BaseToggleProps } from './types';\n\nconst _BaseToggle: ForwardRefRenderFunction<\n HTMLInputElement,\n BaseToggleProps\n> = (\n {\n variant,\n label: _label,\n labelPosition = 'right',\n className,\n inputClassName,\n size = 'medium',\n labelGap = size === 'small' ? 2 : 4,\n type = 'checkbox',\n onToggle,\n onChange,\n ...props\n },\n ref\n) => {\n const isStringLabel = typeof _label === 'string';\n const label = isStringLabel ? (\n <Typography variant=\"Body1\">{_label}</Typography>\n ) : (\n _label\n );\n\n return (\n <ToggleRoot className={className} $gap={labelGap}>\n <ToggleInput\n ref={ref}\n className={inputClassName}\n type={type}\n {...props}\n onChange={(e) => {\n onChange?.(e);\n onToggle?.(e.target.checked);\n }}\n />\n {labelPosition === 'left' && label}\n <ToggleIcon\n className=\"onIcon\"\n size={size}\n status=\"on\"\n variant={variant}\n />\n <ToggleIcon\n className=\"offIcon\"\n size={size}\n status=\"off\"\n variant={variant}\n />\n {labelPosition === 'right' && label}\n </ToggleRoot>\n );\n};\n\nexport const BaseToggle = forwardRef(_BaseToggle);\n"],"names":["labelPosition","size","type","props","variant","children","className","$gap","ref","onChange","status"],"mappings":";;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAWb;AAkBK;;;AAXDA;;;;AAGAC;;;;AAEAC;;;AAGGC;AAIL;AACA;AACcC;AAAeC;;;AAMfC;AAAsBC;AAAeF;AAE7CG;AACAF;AACAJ;AAAW;AAEXO;AACEA;;AAEF;;AAIAH;AACAL;AACAS;AACAN;AAAiB;AAGjBE;AACAL;AACAS;AACAN;AAAiB;AAEgB;AAGzC;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../../../src/Control/BaseToggle/styles.ts"],"sourcesContent":["'use client';\n\nimport styled from 'styled-components';\nimport { primary100 } from '@remember-web/mixin';\n\nexport const ToggleRoot = styled.label<{ $gap?: number }>`\n width: fit-content;\n height: fit-content;\n display: flex;\n ${({ $gap }) => $gap && `gap: ${$gap}px;`}\n\n cursor: pointer;\n user-select: none;\n align-items: center;\n\n & > svg {\n transition: filter 0.2s ease-in-out;\n flex-shrink: 0;\n }\n\n :has(input:disabled) {\n cursor: default;\n }\n\n @media (hover: hover) {\n &:hover > svg {\n filter: grayscale(0.05) brightness(0.95);\n }\n }\n`;\n\nexport const ToggleInput = styled.input`\n all: unset;\n position: absolute;\n width: 1px;\n height: 0px;\n margin-left: -1px;\n\n &:checked ~ svg.offIcon {\n display: none;\n }\n\n &:not(:checked) ~ svg.onIcon {\n display: none;\n }\n\n &:disabled ~ svg {\n filter: grayscale(1) brightness(1.1);\n }\n\n &:not(:disabled):active ~ svg {\n filter: grayscale(0.1) brightness(0.9);\n }\n\n &:focus-visible ~ svg {\n outline: solid 2px ${primary100};\n outline-offset: -1px;\n }\n`;\n"],"names":["ToggleRoot","ToggleInput"],"mappings":";;;;;AAAa;AAKAA;AAIT;AAAO;AAAgC;AAsB9BC;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sources":["../../../../src/Control/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ForwardRefRenderFunction } from 'react';\n\nimport type { BaseToggleProps } from './BaseToggle/types';\nimport { CircleBaseToggle } from './Toggle';\n\nexport const _Checkbox: ForwardRefRenderFunction<\n HTMLInputElement,\n Omit<BaseToggleProps, 'variant' | 'type'> & {\n variant?: 'checkbox' | 'check';\n }\n> = ({ variant = 'checkbox', ...props }, ref) => (\n <CircleBaseToggle ref={ref} variant={variant} {...props} />\n);\n\nexport const Checkbox = forwardRef(_Checkbox);\n"],"names":["variant","props","ref"],"mappings":";;;;;;;AAAa;AAAA;AAAA;AAON;AAKqC;AAArCA;AAAyBC;AAAK;AACjBC;AAAUF;;AAA+B;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.js","sources":["../../../../src/Control/Radio.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ForwardRefRenderFunction } from 'react';\n\nimport type { BaseToggleProps } from './BaseToggle/types';\nimport { CircleBaseToggle } from './Toggle';\n\nconst _Radio: ForwardRefRenderFunction<\n HTMLInputElement,\n Omit<BaseToggleProps, 'variant' | 'onToggle' | 'type'>\n> = ({ ...props }, ref) => (\n <CircleBaseToggle ref={ref} variant=\"radio\" type=\"radio\" {...props} />\n);\n\nexport const Radio = forwardRef(_Radio);\n"],"names":["ref","variant","type"],"mappings":";;;;;;;;AAAa;AAAA;AAOb;;AAGe;AACKA;AAAUC;AAAgBC;;AAA0B;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/Control/Switch/index.tsx"],"sourcesContent":["'use client';\n\nimport { SwitchRoot, SwitchThumb, Label } from './styles';\nimport type { SwitchProps } from './types';\n\nexport function Switch({ size = 'small', ...props }: SwitchProps) {\n return (\n <Label>\n <SwitchRoot size={size} {...props}>\n <SwitchThumb size={size} aria-hidden=\"true\" />\n </SwitchRoot>\n </Label>\n );\n}\n"],"names":["size","props","children"],"mappings":";;;;;;AAAa;AAAA;AAAA;AAKN;AAA2D;AAAzCA;AAAmBC;;AAElCC;AACQF;AAAW;;AACRA;;;;AACF;AAGnB;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../../../src/Control/Switch/styles.ts"],"sourcesContent":["'use client';\n\nimport * as SwitchPrimitive from '@radix-ui/react-switch';\nimport styled, { css } from 'styled-components';\n\nimport { contents300, contents999, secondary100 } from '@remember-web/mixin';\n\nimport type { SwitchProps } from './types';\n\nexport const Label = styled.label`\n display: inline-flex;\n align-items: center;\n gap: 8px;\n`;\n\nexport const SwitchRoot = styled(SwitchPrimitive.Root)<{\n size: SwitchProps['size'];\n}>`\n all: unset;\n background-color: ${contents300};\n border-radius: 24px;\n position: relative;\n cursor: pointer;\n\n &:focus-visible {\n outline: solid 2px black;\n outline-offset: 2px;\n }\n &[data-state='checked'] {\n background-color: ${secondary100};\n }\n\n ${({ size }) =>\n (size === 'small' &&\n css`\n width: 36px;\n height: 20px;\n `) ||\n (size === 'large' &&\n css`\n width: 64px;\n height: 38px;\n `)};\n`;\n\nexport const SwitchThumb = styled(SwitchPrimitive.Thumb)<{\n size: SwitchProps['size'];\n}>`\n display: block;\n background-color: ${contents999};\n border-radius: 50%;\n transition: transform 0.2s cubic-bezier(0, 0.6, 0, 0.99);\n will-change: transform;\n\n ${({ size }) =>\n (size === 'small' &&\n css`\n width: 14px;\n height: 14px;\n transform: translateX(3px);\n &[data-state='checked'] {\n transform: translateX(19px);\n }\n `) ||\n (size === 'large' &&\n css`\n width: 28px;\n height: 28px;\n transform: translateX(5px);\n &[data-state='checked'] {\n transform: translateX(31px);\n }\n `)};\n`;\n"],"names":["Label"],"mappings":";;;;;;AAAa;AASAA;AAMN;AAiBH;;AAUI;;AAYJ;;AAkBI;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Toggle.js","sources":["../../../../src/Control/Toggle.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ForwardRefRenderFunction } from 'react';\nimport styled from 'styled-components';\n\nimport { BaseToggle } from './BaseToggle';\nimport type { BaseToggleProps } from './BaseToggle/types';\n\nexport const _Toggle: ForwardRefRenderFunction<\n HTMLInputElement,\n Omit<BaseToggleProps, 'variant' | 'type'> & {\n variant: 'bookmark' | 'favorite';\n }\n> = ({ variant, ...props }, ref) => (\n <BaseToggle ref={ref} variant={variant} {...props} />\n);\n\nexport const Toggle = forwardRef(_Toggle);\n\nexport const CircleBaseToggle = styled(BaseToggle)`\n & > svg {\n border-radius: 50%;\n }\n`;\n"],"names":["props","ref","variant","CircleBaseToggle"],"mappings":";;;;;;;;;AAAa;AAAA;AAAA;AAAA;AAQN;AAKwB;AAAZA;AAAK;AACVC;AAAUC;;AAA+B;;AAK1CC;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenuSection.js","sources":["../../../../../src/Floating/DropdownMenu/DropdownMenuSection.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport {\n StyledDropdownMenuSectionTitle,\n StyledDropdownMenuSection,\n} from '@/Floating/DropdownMenu/styles';\nimport type { GetStyledComponentProps } from '@remember-web/shared/types/styles';\n\ntype DropdownMenuSectionProps<As> = GetStyledComponentProps<\n typeof StyledDropdownMenuSection,\n As\n> & {\n title?: ReactNode;\n};\n\nexport const DropdownMenuSection = <As,>({\n title,\n children,\n ...props\n}: DropdownMenuSectionProps<As>) => (\n <StyledDropdownMenuSection {...props}>\n {title && (\n <StyledDropdownMenuSectionTitle>{title}</StyledDropdownMenuSectionTitle>\n )}\n {children}\n </StyledDropdownMenuSection>\n);\n"],"names":["DropdownMenuSection","_ref","title","children","props","_objectWithoutProperties","_excluded","_jsxs","StyledDropdownMenuSection","_objectSpread","_jsx","StyledDropdownMenuSectionTitle"],"mappings":";;;;;;;;IAeaA,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAAC,IAAA,EAAA;AAAA,EAAA,IAC9BC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;AACLC,IAAAA,KAAK,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA,CAAA,CAAA;EAAA,oBAERC,IAAA,CAACC,yBAAyB,EAAAC,aAAA,CAAAA,aAAA,KAAKL,KAAK,CAAA,EAAA,EAAA,EAAA;AAAAD,IAAAA,QAAA,EACjCD,CAAAA,KAAK,iBACJQ,GAAA,CAACC,8BAA8B,EAAA;AAAAR,MAAAA,QAAA,EAAED,KAAAA;KAAsC,CACxE,EACAC,QAAQ,CAAA;AAAA,GAAA,CACgB,CAAC,CAAA;AAAA;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/Floating/DropdownMenu/index.tsx"],"sourcesContent":["import * as RadixPopover from '@radix-ui/react-popover';\n\nimport type { PopoverContentProps, PopoverProps } from '@/Floating/Popover';\nimport {\n StyledDropdownMenuContent,\n StyledDropdownMenuItem,\n} from '@/Floating/DropdownMenu/styles';\nimport Popover from '@/Floating/Popover';\n\nimport { DropdownMenuSection } from './DropdownMenuSection';\n\nexport interface DropdownContentProps extends PopoverContentProps {}\nexport interface DropdownMenuProps extends PopoverProps {}\n/**\n * Popover에 DropdownMenu Parts들을 추가한 컴포넌트\n * @see Popover\n */\nconst DropdownMenu = Object.assign(RadixPopover.Root.bind(null), {\n Content: ({ isInsideCloseable = false, ...props }: DropdownContentProps) =>\n isInsideCloseable ? (\n <RadixPopover.Close asChild>\n <StyledDropdownMenuContent {...props} />\n </RadixPopover.Close>\n ) : (\n <StyledDropdownMenuContent {...props} />\n ),\n Arrow: Popover.Arrow,\n Trigger: Popover.Trigger,\n Portal: Popover.Portal,\n Anchor: Popover.Anchor,\n Close: Popover.Close,\n Section: DropdownMenuSection,\n Item: StyledDropdownMenuItem,\n});\n\nexport default DropdownMenu;\n"],"names":["DropdownMenu","Object","assign","RadixPopover","Root","bind","Content","_ref","_ref$isInsideCloseabl","isInsideCloseable","props","_objectWithoutProperties","_excluded","_jsx","Close","asChild","children","StyledDropdownMenuContent","_objectSpread","Arrow","Popover","Trigger","Portal","Anchor","Section","DropdownMenuSection","Item","StyledDropdownMenuItem"],"mappings":";;;;;;;;;;;AAaA;AACA;AACA;AACA;AACA,IAAMA,YAAY,GAAGC,MAAM,CAACC,MAAM,CAACC,YAAY,CAACC,IAAI,CAACC,IAAI,CAAC,IAAI,CAAC,EAAE;EAC/DC,OAAO,EAAE,SAAAA,OAAAA,CAAAC,IAAA,EAAA;AAAA,IAAA,IAAAC,qBAAA,GAAAD,IAAA,CAAGE,iBAAiB;AAAjBA,MAAAA,iBAAiB,GAAAD,qBAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,qBAAA;AAAKE,MAAAA,KAAK,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA,CAAA,CAAA;AAAA,IAAA,OAC7CH,iBAAiB,gBACfI,GAAA,CAACV,YAAY,CAACW,KAAK,EAAA;MAACC,OAAO,EAAA,IAAA;MAAAC,QAAA,eACzBH,GAAA,CAACI,yBAAyB,EAAAC,aAAA,CAAA,EAAA,EAAKR,KAAK,CAAG,CAAA;KACrB,CAAC,gBAErBG,GAAA,CAACI,yBAAyB,EAAAC,aAAA,CAAA,EAAA,EAAKR,KAAK,CAAG,CACxC,CAAA;AAAA,GAAA;EACHS,KAAK,EAAEC,OAAO,CAACD,KAAK;EACpBE,OAAO,EAAED,OAAO,CAACC,OAAO;EACxBC,MAAM,EAAEF,OAAO,CAACE,MAAM;EACtBC,MAAM,EAAEH,OAAO,CAACG,MAAM;EACtBT,KAAK,EAAEM,OAAO,CAACN,KAAK;AACpBU,EAAAA,OAAO,EAAEC,mBAAmB;AAC5BC,EAAAA,IAAI,EAAEC,sBAAAA;AACR,CAAC;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../../../src/Floating/DropdownMenu/styles.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { bg200, contents000, contents200, divider } from '@remember-web/mixin';\nimport { getTypographyStyles } from '@remember-web/mixin';\nimport type { ConvertTransientProps } from '@remember-web/shared/types/styles';\nimport { StyledPopoverContent } from '@/Floating/Popover/styles';\n\nexport const dropdownMenuItemCSS = css`\n display: flex;\n align-items: center;\n padding: 8px 12px;\n\n ${getTypographyStyles('Body1')};\n color: ${contents000};\n transition: background-color 0.07s;\n border-radius: unset;\n text-decoration: none;\n`;\n\nexport const DropdownMenuItemHoverCSS = css`\n &:hover,\n &:focus-visible {\n background-color: ${bg200};\n }\n`;\n\nexport const DropdownMenuItemDisabledCSS = css`\n pointer-events: none;\n`;\n\nexport const StyledDropdownMenuSectionTitle = styled.span`\n ${dropdownMenuItemCSS};\n ${getTypographyStyles('Body2_M')};\n color: ${contents200};\n`;\n\nexport type DropdownMenuItemProps =\n ConvertTransientProps<StyledDropdownMenuItemProps>;\n\nexport type StyledDropdownMenuItemProps = {\n $active?: boolean;\n $disabled?: boolean;\n};\n\nexport const getDropdownMenuItemCss = ({\n $active,\n $disabled,\n}: StyledDropdownMenuItemProps) =>\n css(() => [\n dropdownMenuItemCSS,\n !$active && DropdownMenuItemHoverCSS,\n $disabled && DropdownMenuItemDisabledCSS,\n css`\n font-weight: ${$active ? 600 : 400};\n\n &:focus-visible {\n outline: none;\n }\n `,\n ]);\n\nexport const StyledDropdownMenuItem = styled.div.attrs<DropdownMenuItemProps>(\n ({ active, disabled, ...props }) => ({\n tabIndex: active ? -1 : undefined,\n $active: active,\n $disabled: disabled,\n ...props,\n })\n)<StyledDropdownMenuItemProps>(getDropdownMenuItemCss);\n\nexport const StyledDropdownMenuSection = styled.div``;\n\nexport const StyledDropdownMenuContent = styled(StyledPopoverContent)`\n ${StyledDropdownMenuSection} {\n border-bottom: 1px solid ${divider};\n }\n ${StyledDropdownMenuSection}:last-child {\n border-bottom: none;\n }\n`;\nStyledDropdownMenuItem.defaultProps = {};\n"],"names":["dropdownMenuItemCSS","css","_templateObject","_taggedTemplateLiteral","getTypographyStyles","contents000","DropdownMenuItemHoverCSS","_templateObject2","bg200","DropdownMenuItemDisabledCSS","_templateObject3","StyledDropdownMenuSectionTitle","styled","span","_templateObject4","contents200","getDropdownMenuItemCss","_ref","$active","$disabled","_templateObject5","StyledDropdownMenuItem","div","attrs","_ref2","active","disabled","props","_objectWithoutProperties","_excluded","_objectSpread","tabIndex","undefined","StyledDropdownMenuSection","_templateObject6","StyledDropdownMenuContent","StyledPopoverContent","_templateObject7","divider","defaultProps"],"mappings":";;;;;;;;;;;IAOaA,mBAAmB,GAAGC,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,gMAKlCC,mBAAmB,CAAC,OAAO,CAAC,EACrBC,WAAW,EAIrB;AAEYC,IAAAA,wBAAwB,GAAGL,GAAG,CAAAM,gBAAA,KAAAA,gBAAA,GAAAJ,sBAAA,CAGnBK,CAAAA,2DAAAA,EAAAA,UAAAA,CAAAA,CAAAA,CAAAA,EAAAA,KAAK,EAE5B;AAEM,IAAMC,2BAA2B,GAAGR,GAAG,CAAAS,gBAAA,KAAAA,gBAAA,GAAAP,sBAAA,CAE7C,CAAA,6BAAA,CAAA,CAAA,CAAA,EAAA;AAEM,IAAMQ,8BAA8B,GAAGC,MAAM,CAACC,IAAI,CAAAC,gBAAA,KAAAA,gBAAA,GAAAX,sBAAA,CAAA,CAAA,MAAA,EAAA,OAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA,CAAA,EACrDH,mBAAmB,EACnBI,mBAAmB,CAAC,SAAS,CAAC,EACvBW,WAAW,EACrB;IAUYC,sBAAsB,GAAG,SAAzBA,sBAAsBA,CAAAC,IAAA,EAAA;AAAA,EAAA,IACjCC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IACPC,SAAS,GAAAF,IAAA,CAATE,SAAS,CAAA;AAAA,EAAA,OAETlB,GAAG,CAAC,YAAA;IAAA,OAAM,CACRD,mBAAmB,EACnB,CAACkB,OAAO,IAAIZ,wBAAwB,EACpCa,SAAS,IAAIV,2BAA2B,EACxCR,GAAG,CAAAmB,gBAAA,KAAAA,gBAAA,GAAAjB,sBAAA,CACce,CAAAA,uBAAAA,EAAAA,qEAAAA,CAAAA,CAAAA,CAAAA,EAAAA,OAAO,GAAG,GAAG,GAAG,GAAG,CAMrC,CAAA,CAAA;GAAC,CAAA,CAAA;AAAA,EAAA;AAEG,IAAMG,sBAAsB,GAAGT,MAAM,CAACU,GAAG,CAACC,KAAK,CACpD,UAAAC,KAAA,EAAA;AAAA,EAAA,IAAGC,MAAM,GAAAD,KAAA,CAANC,MAAM;IAAEC,QAAQ,GAAAF,KAAA,CAARE,QAAQ;AAAKC,IAAAA,KAAK,GAAAC,wBAAA,CAAAJ,KAAA,EAAAK,SAAA,CAAA,CAAA;AAAA,EAAA,OAAAC,aAAA,CAAA;AAC3BC,IAAAA,QAAQ,EAAEN,MAAM,GAAG,CAAC,CAAC,GAAGO,SAAS;AACjCd,IAAAA,OAAO,EAAEO,MAAM;AACfN,IAAAA,SAAS,EAAEO,QAAAA;AAAQ,GAAA,EAChBC,KAAK,CAAA,CAAA;AAAA,CAEZ,CAAC,CAA8BX,sBAAsB,EAAC;AAEzCiB,IAAAA,yBAAyB,GAAGrB,MAAM,CAACU,GAAG,CAAAY,gBAAA,KAAAA,gBAAA,GAAA/B,sBAAA,CAAE,CAAA,EAAA,CAAA,CAAA,CAAA,EAAA;IAExCgC,yBAAyB,GAAGvB,MAAM,CAACwB,oBAAoB,CAAC,CAAAC,gBAAA,KAAAA,gBAAA,GAAAlC,sBAAA,CACjE8B,CAAAA,MAAAA,EAAAA,mCAAAA,EAAAA,YAAAA,EAAAA,gDAAAA,CAAAA,CAAAA,CAAAA,EAAAA,yBAAyB,EACEK,OAAO,EAElCL,yBAAyB,EAG5B;AACDZ,sBAAsB,CAACkB,YAAY,GAAG,EAAE;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/Floating/Popover/index.tsx"],"sourcesContent":["import * as RadixPopover from '@radix-ui/react-popover';\n\nimport { StyledPopoverContent } from '@/Floating/Popover/styles';\n\nconst { Trigger, Anchor, Close, PopoverPortal } = RadixPopover;\n\nexport type PopoverProps = RadixPopover.PopoverProps;\nexport type PopoverContentProps = RadixPopover.PopoverContentProps & {\n isInsideCloseable?: boolean;\n};\n\n/**\n * @see https://www.radix-ui.com/docs/primitives/components/popover\n */\n\nconst Popover = Object.assign(RadixPopover.Root.bind(null), {\n Trigger(props: RadixPopover.PopoverTriggerProps) {\n return <Trigger asChild {...props} />;\n },\n Anchor,\n Portal: PopoverPortal,\n Close,\n Arrow: RadixPopover.Arrow,\n Content: ({ isInsideCloseable = false, ...props }: PopoverContentProps) =>\n isInsideCloseable ? (\n <RadixPopover.Close asChild>\n <StyledPopoverContent {...props} />\n </RadixPopover.Close>\n ) : (\n <StyledPopoverContent {...props} />\n ),\n});\n\nexport default Popover;\n"],"names":["Trigger","RadixPopover","Anchor","Close","PopoverPortal","Popover","Object","assign","Root","bind","props","_jsx","_Trigger","_objectSpread","asChild","Portal","Arrow","Content","_ref","_ref$isInsideCloseabl","isInsideCloseable","_objectWithoutProperties","_excluded","children","StyledPopoverContent"],"mappings":";;;;;;;;;AAIA,IAAQA,QAAO,GAAmCC,YAAY,CAAtDD,OAAO;EAAEE,MAAM,GAA2BD,YAAY,CAA7CC,MAAM;EAAEC,KAAK,GAAoBF,YAAY,CAArCE,KAAK;EAAEC,aAAa,GAAKH,YAAY,CAA9BG,aAAa,CAAA;AAO7C;AACA;AACA;;AAEA,IAAMC,OAAO,GAAGC,MAAM,CAACC,MAAM,CAACN,YAAY,CAACO,IAAI,CAACC,IAAI,CAAC,IAAI,CAAC,EAAE;EAC1DT,OAAO,EAAA,SAAAA,OAACU,CAAAA,KAAuC,EAAE;AAC/C,IAAA,oBAAOC,GAAA,CAACC,QAAO,EAAAC,aAAA,CAAA;MAACC,OAAO,EAAA,IAAA;KAAKJ,EAAAA,KAAK,CAAG,CAAC,CAAA;GACtC;AACDR,EAAAA,MAAM,EAANA,MAAM;AACNa,EAAAA,MAAM,EAAEX,aAAa;AACrBD,EAAAA,KAAK,EAALA,KAAK;EACLa,KAAK,EAAEf,YAAY,CAACe,KAAK;EACzBC,OAAO,EAAE,SAAAA,OAAAA,CAAAC,IAAA,EAAA;AAAA,IAAA,IAAAC,qBAAA,GAAAD,IAAA,CAAGE,iBAAiB;AAAjBA,MAAAA,iBAAiB,GAAAD,qBAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,qBAAA;AAAKT,MAAAA,KAAK,GAAAW,wBAAA,CAAAH,IAAA,EAAAI,SAAA,CAAA,CAAA;AAAA,IAAA,OAC7CF,iBAAiB,gBACfT,GAAA,CAACV,YAAY,CAACE,KAAK,EAAA;MAACW,OAAO,EAAA,IAAA;MAAAS,QAAA,eACzBZ,GAAA,CAACa,oBAAoB,EAAAX,aAAA,CAAA,EAAA,EAAKH,KAAK,CAAG,CAAA;KAChB,CAAC,gBAErBC,GAAA,CAACa,oBAAoB,EAAAX,aAAA,CAAA,EAAA,EAAKH,KAAK,CAAG,CACnC,CAAA;AAAA,GAAA;AACL,CAAC;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../../../src/Floating/Popover/styles.ts"],"sourcesContent":["import styled, { keyframes } from 'styled-components';\nimport { PopoverContent } from '@radix-ui/react-popover';\n\nimport { bg100, contents000 } from '@remember-web/mixin';\n\nexport const showFadeIn = keyframes`\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n`;\nexport const showFadeOut = keyframes`\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n`;\n\nexport const StyledPopoverContent = styled(PopoverContent)`\n contain: paint;\n width: fit-content;\n margin: 0;\n padding: 0;\n border-radius: 4px;\n\n box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);\n color: ${contents000};\n background-color: ${bg100};\n white-space: pre-line;\n\n height: 100%;\n will-change: box-shadow;\n\n &:focus {\n outline: none;\n }\n &[data-state='open'] {\n animation: ${showFadeIn} 0.12s cubic-bezier(0.35, 0, 0.25, 1) both;\n }\n &:not([data-state='open']) {\n animation: ${showFadeOut} 0.16s cubic-bezier(0.35, 0, 0.25, 1) both;\n }\n`;\n\nStyledPopoverContent.defaultProps = {\n avoidCollisions: true,\n align: 'start',\n side: 'bottom',\n sideOffset: 4,\n};\n"],"names":["showFadeIn","keyframes","_templateObject","_taggedTemplateLiteral","showFadeOut","_templateObject2","StyledPopoverContent","styled","PopoverContent","_templateObject3","contents000","bg100","defaultProps","avoidCollisions","align","side","sideOffset"],"mappings":";;;;;;AAKO,IAAMA,UAAU,GAAGC,SAAS,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,CAOlC,CAAA,kFAAA,CAAA,CAAA,CAAA,EAAA;AACM,IAAMC,WAAW,GAAGH,SAAS,CAAAI,gBAAA,KAAAA,gBAAA,GAAAF,sBAAA,CAOnC,CAAA,kFAAA,CAAA,CAAA,CAAA,EAAA;AAEM,IAAMG,oBAAoB,GAAGC,MAAM,CAACC,cAAc,CAAC,CAAAC,gBAAA,KAAAA,gBAAA,GAAAN,sBAAA,2fAQ/CO,WAAW,EACAC,KAAK,EAUVX,UAAU,EAGVI,WAAW,EAE3B;AAEDE,oBAAoB,CAACM,YAAY,GAAG;AAClCC,EAAAA,eAAe,EAAE,IAAI;AACrBC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,IAAI,EAAE,QAAQ;AACdC,EAAAA,UAAU,EAAE,CAAA;AACd,CAAC;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/Floating/Tooltip/index.tsx"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { useState, type PropsWithChildren } from 'react';\n\nimport { isSSR } from '@remember-web/shared/utils/common';\nimport { IconCloseS } from '@remember-web/icon';\nimport { contents000, contents999 } from '@remember-web/mixin';\n\nimport { CloseButton, TooltipContent, TooltipTriggerWrapper } from './styles';\nimport {\n isLargeSizeProps,\n isStaticTypeProps,\n type TooltipProps,\n type TooltipSize,\n type TooltipType,\n} from './types';\n\nconst hoverable = isSSR()\n ? true\n : window.matchMedia('(any-hover: hover)').matches;\n\nexport default function Tooltip<\n Type extends TooltipType = 'hover',\n Size extends TooltipSize = 'small'\n>({\n children,\n content,\n contentOptions,\n defaultOpen,\n side = 'top',\n gap = 4,\n onOpenChange,\n onClickOutside,\n ...props\n}: PropsWithChildren<TooltipProps<Type, Size>>) {\n const [_open, _setOpen] = useState(defaultOpen ?? false);\n const { type = 'hover', size = 'small' } = props;\n const {\n backgroundColor = contents000,\n contentColor = contents999,\n maxWidth = 'initial',\n textAlign = 'center',\n onClick,\n zIndex = 0,\n } = contentOptions ?? {};\n /**\n * @description hover가 가능할 때 (마우스 포인터, 디지타이저 사용) type이 hover일 때만 hoverType으로 결정\n *\n * hover가 불가능할 때 (핑거 터치 사용) type이 hover라면 click타입으로 간주 */\n const isHoverType = hoverable && type === 'hover';\n const isClickType = !hoverable || type === 'click';\n const isCloseButtonType = type === 'closeButton';\n /** @description 클릭을 통해서 트리깅 하는 액션인지 확인 */\n const isClickTrigger = isClickType || isCloseButtonType;\n const isOpen = isStaticTypeProps(props)\n ? props.open\n : isHoverType\n ? undefined\n : _open;\n\n return (\n <RadixTooltip.Provider>\n <RadixTooltip.Root\n open={isOpen}\n defaultOpen={defaultOpen}\n delayDuration={100}\n onOpenChange={onOpenChange}\n >\n <RadixTooltip.Trigger\n asChild\n onClick={\n isClickTrigger\n ? () => _setOpen(isClickType ? (prev) => !prev : true)\n : undefined\n }\n >\n <TooltipTriggerWrapper>{children}</TooltipTriggerWrapper>\n </RadixTooltip.Trigger>\n <RadixTooltip.Portal>\n <TooltipContent\n $size={size}\n $maxWidth={maxWidth}\n $backgroundColor={backgroundColor}\n $contentColor={contentColor}\n $textAlign={textAlign}\n $zIndex={zIndex}\n sideOffset={gap}\n side={side}\n onPointerDownOutside={(e) => {\n if (isClickType) {\n _setOpen(false);\n }\n onClickOutside?.(e);\n }}\n collisionPadding={20}\n onClick={(e) => {\n if (isClickType) {\n () => _setOpen(false);\n }\n onClick?.(e);\n }}\n >\n {content}\n {type === 'closeButton' && (\n <CloseButton onClick={() => _setOpen(false)}>\n <IconCloseS />\n </CloseButton>\n )}\n {isLargeSizeProps(props) && props.hasArrow && (\n <RadixTooltip.Arrow\n width={14}\n height={8}\n color={backgroundColor}\n />\n )}\n </TooltipContent>\n </RadixTooltip.Portal>\n </RadixTooltip.Root>\n </RadixTooltip.Provider>\n );\n}\n"],"names":["side","gap","props","_open","_setOpen","type","size","backgroundColor","contentColor","maxWidth","textAlign","zIndex","children","open","defaultOpen","delayDuration","onOpenChange","$size","$maxWidth","$backgroundColor","$contentColor","$textAlign","$zIndex","sideOffset","onPointerDownOutside","onClickOutside","collisionPadding","onClick","width","height","color"],"mappings":";;;;;;;;;;;;AAAa;AAkBb;AAIe;AAaiC;;;;;AAL9CA;;AACAC;;;AAGGC;;;AAEIC;AAAOC;AACd;AAAQC;;AAAgBC;;;AAEtBC;;AACAC;;AACAC;;AACAC;;;AAEAC;AAEF;AACF;AACA;AACA;AACE;AACA;AACA;AACA;AACA;AACA;AAMA;AACwBC;AAElBC;AACAC;AACAC;AACAC;AAA2BJ;;;AAMnB;AAAkC;AAAU;AAAQ;;AAIpCA;;AAAmC;;AAIvDK;AACAC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAvB;AACAwB;AACE;;AAEA;AACAC;;AAEFC;AACAC;AAIEA;;;;;;AAK4Cf;AAC5B;AAKdgB;AACAC;AACAC;AAAuB;;AAGZ;;AAED;AAG1B;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../../../src/Floating/Tooltip/styles.ts"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport styled, { css, keyframes } from 'styled-components';\n\nimport type { TypographyStyle } from '@remember-web/mixin';\nimport {\n contents000,\n contents999,\n getTypographyStyles,\n} from '@remember-web/mixin';\n\nimport type { TooltipSize, TooltipTextAlign } from './types';\n\nconst TOOLTIP_CONTENT_CONSTANTS: Record<\n TooltipSize,\n { padding: string; typography: TypographyStyle }\n> = {\n large: {\n padding: '8px 12px',\n typography: 'Body1',\n },\n small: {\n padding: '4px 8px',\n typography: 'Body2',\n },\n};\n\nconst fadeIn = keyframes`\n from {\n opacity: 0\n }\n to {\n opacity: 1;\n }\n`;\n\nexport const TooltipTriggerWrapper = styled.div`\n width: fit-content;\n height: fit-content;\n & > svg {\n display: block;\n }\n`;\n\nexport const TooltipContent = styled(RadixTooltip.Content)<{\n $size: TooltipSize;\n $maxWidth: number | string;\n $backgroundColor: string;\n $contentColor: string;\n $textAlign?: TooltipTextAlign;\n $zIndex?: number;\n}>`\n box-sizing: border-box;\n display: flex;\n white-space: pre-wrap;\n color: ${contents999};\n background-color: ${contents000};\n border-radius: 4px;\n will-change: opacity;\n animation: ${fadeIn} 200ms forwards;\n gap: 4px;\n\n ${({\n $size,\n $maxWidth,\n $zIndex,\n $backgroundColor,\n $contentColor,\n $textAlign,\n }) => [\n css`\n padding: ${TOOLTIP_CONTENT_CONSTANTS[$size].padding};\n ${getTypographyStyles(TOOLTIP_CONTENT_CONSTANTS[$size].typography)};\n background-color: ${$backgroundColor};\n color: ${$contentColor};\n text-align: ${$textAlign};\n z-index: ${$zIndex};\n `,\n typeof $maxWidth === 'string'\n ? `max-width: ${$maxWidth};`\n : `max-width: ${$maxWidth}px;`,\n ]};\n`;\n\nexport const CloseButton = styled.button`\n all: unset;\n appearance: none;\n cursor: pointer;\n & > svg {\n display: block;\n }\n`;\n"],"names":["large","padding","typography","small","TooltipTriggerWrapper","CloseButton"],"mappings":";;;;;;AAAa;AAcb;AAIEA;AACEC;AACAC;;AAEFC;AACEF;AACAC;AACF;AACF;AAEA;AASaE;AAQN;AAkBH;;;;;;;AAmBD;AAGUC;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sources":["../../../../../src/Floating/Tooltip/types.ts"],"sourcesContent":["import type {\n DismissableLayerProps,\n PopperContentProps,\n TooltipProps as RadixTooltipProps,\n} from '@radix-ui/react-tooltip';\nimport type { ReactNode } from 'react';\n\nexport type TooltipSize = 'small' | 'large';\nexport type TooltipType = 'hover' | 'click' | 'closeButton' | 'static';\nexport type TooltipTextAlign = 'left' | 'center' | 'right';\n\nexport type TooltipProps<Type extends TooltipType, Size extends TooltipSize> = {\n content: ReactNode;\n defaultOpen?: boolean;\n gap?: 4 | 8 | (number & {});\n side?: PopperContentProps['side'];\n type?: Type;\n size?: Size;\n contentOptions?: TooltipContentOptionProps;\n onOpenChange?: RadixTooltipProps['onOpenChange'];\n onClickOutside?: DismissableLayerProps['onPointerDownOutside'];\n} & (Type extends Exclude<TooltipType, 'static'> ? {} : { open: boolean }) &\n (Size extends 'large' ? { hasArrow?: boolean } : {});\n\nexport const isStaticTypeProps = (\n props: Pick<TooltipProps<any, any>, 'type'>\n): props is TooltipProps<'static', any> =>\n 'type' in props && props.type === 'static';\n\nexport const isLargeSizeProps = (\n props: Pick<TooltipProps<any, any>, 'size'>\n): props is TooltipProps<any, 'large'> =>\n 'size' in props && props.size === 'large';\n\nexport type TooltipContentOptionProps = {\n maxWidth?: number | string;\n backgroundColor?: string;\n contentColor?: string;\n zIndex?: number;\n textAlign?: TooltipTextAlign;\n onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n};\n"],"names":["isStaticTypeProps","props","type","isLargeSizeProps","size"],"mappings":"IAwBaA,iBAAiB,GAAG,SAApBA,iBAAiBA,CAC5BC,KAA2C,EAAA;EAAA,OAE3C,MAAM,IAAIA,KAAK,IAAIA,KAAK,CAACC,IAAI,KAAK,QAAQ,CAAA;AAAA,EAAA;IAE/BC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAC3BF,KAA2C,EAAA;EAAA,OAE3C,MAAM,IAAIA,KAAK,IAAIA,KAAK,CAACG,IAAI,KAAK,OAAO,CAAA;AAAA;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"const.js","sources":["../../../../../../src/Inputs/Select/DesignedSelect/const.ts"],"sourcesContent":["export const OPTION_ITEM_HEIGHT_PX = 44;\nexport const DEFAULT_MAX_HEIGHT_PX = OPTION_ITEM_HEIGHT_PX * 4;\n"],"names":["OPTION_ITEM_HEIGHT_PX","DEFAULT_MAX_HEIGHT_PX"],"mappings":"AAAO,IAAMA,qBAAqB,GAAG,GAAE;AAC1BC,IAAAA,qBAAqB,GAAGD,qBAAqB,GAAG;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../../src/Inputs/Select/DesignedSelect/index.tsx"],"sourcesContent":["'use client';\n\nimport type { KeyboardEvent, ReactNode, Ref, RefCallback } from 'react';\nimport {\n Children,\n forwardRef,\n isValidElement,\n useCallback,\n useRef,\n useState,\n useId,\n} from 'react';\n\nimport { focusSibling } from '../utils';\nimport useMouseEventAway from '@/hooks/useMouseEventAway';\nimport { IconArrow2Down, IconArrow2Up } from '@remember-web/icon';\n\nimport { OptionHolder } from '../Option';\nimport { SelectContainer } from '../styles';\nimport type { OptionElementType, SelectValue } from '../types';\nimport { DEFAULT_MAX_HEIGHT_PX, OPTION_ITEM_HEIGHT_PX } from './const';\nimport {\n SelectDownIcon,\n SelectOption,\n SelectOptionWrapper,\n StyledSelect,\n} from './styles';\nimport type { DesignedSelectInternalProps, ExpandedType } from './types';\n\nconst DesignedSelect = <Value extends SelectValue>(\n {\n children,\n value,\n maxHeight = DEFAULT_MAX_HEIGHT_PX,\n placeholder,\n onChange,\n width,\n extendDirection,\n disabled,\n ...props\n }: DesignedSelectInternalProps<Value>,\n ref?: Ref<HTMLDivElement>\n) => {\n const id = useId();\n const [expandedDirection, _setExpandedDirection] =\n useState<ExpandedType>('none');\n const selectContainerRef = useRef<HTMLDivElement | null>(null);\n const selectListRef = useRef<HTMLUListElement | null>(null);\n const clickAwayRef = useMouseEventAway<HTMLDivElement, 'pointerdown'>(\n 'pointerdown',\n () => {\n setExpandedDirection('none');\n }\n );\n\n const setExpandedDirection = useCallback(\n (...args: Parameters<typeof _setExpandedDirection>) => {\n if (disabled) {\n return;\n }\n _setExpandedDirection(...args);\n },\n [disabled]\n );\n\n const options = Children.toArray(children)\n .filter(\n (child): child is OptionElementType<Value> =>\n isValidElement(child) && child.type === OptionHolder\n )\n .map(\n ({\n props: { children: _children, value: _value, disabled: _disabled },\n }) => ({\n label: _children,\n value: _value,\n disabled: _disabled,\n })\n );\n\n const selectedOption = options.find((option) => value === option.value);\n\n const isExpanded = expandedDirection !== 'none';\n\n const onSelectOption = (_value: Value, _label: ReactNode) => {\n onChange?.(_value, _label);\n setExpandedDirection('none');\n selectContainerRef.current?.focus();\n };\n\n // 리스트가 하단으로 나와야하는지 상단으로 나와야하는지 계산하는 함수\n // 현재 Viewport기준으로 Select컴포넌트가 아래로 확장되었을 때 뷰포트 내에 리스트박스가 노출될 수 있다면 하단으로 확장, 아니라면 상단으로 확장\n // direction이 props로 전달되었다면 해당 방향으로 확장\n const expandSelectListAtComputedPosition = () => {\n if (extendDirection) {\n setExpandedDirection(extendDirection);\n return;\n }\n\n const selectContainerRect =\n selectContainerRef.current?.getBoundingClientRect();\n\n if (!selectContainerRect) {\n setExpandedDirection('below');\n return;\n }\n\n // SelectOptionWrapper가 마운트되기 전에 계산해야 하기 때문에 clientHeight를 사용하지 못하고 직접 계산\n const currentSelectHeight = Math.min(\n maxHeight,\n options.length * OPTION_ITEM_HEIGHT_PX\n );\n const bottomGap = document.body.clientHeight - selectContainerRect.bottom;\n\n setExpandedDirection(currentSelectHeight > bottomGap ? 'above' : 'below');\n };\n\n const optionItemRef = useCallback<RefCallback<HTMLLIElement>>(\n (ele) => {\n if (!ele) {\n return;\n }\n\n // 선택한 요소가 없을때는 첫번째 요소에 focus\n if (!value && !ele.previousSibling) {\n setTimeout(() => ele.focus());\n return;\n }\n\n // 선택한 요소가 있다면 해당 요소에 focus\n const optionValue = ele.dataset.optionValue || null;\n if (optionValue === value) {\n setTimeout(() => ele.focus());\n }\n },\n [value]\n );\n\n const keyDownHandler = (e: KeyboardEvent) => {\n const focusedElement = document.activeElement;\n\n if (!focusedElement || !(focusedElement instanceof HTMLElement)) {\n return;\n }\n\n switch (e.key) {\n case 'Tab':\n if (isExpanded) {\n e.preventDefault();\n }\n break;\n case 'ArrowUp':\n e.preventDefault();\n if (!isExpanded) {\n expandSelectListAtComputedPosition();\n break;\n }\n focusSibling(focusedElement, 'previous');\n break;\n case 'ArrowDown':\n e.preventDefault();\n if (!isExpanded) {\n expandSelectListAtComputedPosition();\n break;\n }\n focusSibling(focusedElement, 'next');\n break;\n case 'Escape':\n e.preventDefault();\n setExpandedDirection('none');\n selectContainerRef.current?.focus();\n break;\n case 'Enter':\n case ' ':\n e.preventDefault();\n\n if (e.target === e.currentTarget) {\n if (isExpanded) {\n setExpandedDirection('none');\n return;\n }\n expandSelectListAtComputedPosition();\n }\n\n if (\n focusedElement?.matches('[data-option-value]') &&\n focusedElement instanceof HTMLLIElement &&\n focusedElement.dataset.optionValue\n ) {\n onSelectOption(\n focusedElement.dataset.optionValue as Value,\n focusedElement.innerText\n );\n }\n break;\n default:\n break;\n }\n };\n\n return (\n <SelectContainer\n ref={(el) => {\n if (!el) {\n return;\n }\n selectContainerRef.current = el;\n clickAwayRef.current = el;\n }}\n $width={width}\n tabIndex={disabled ? undefined : 0}\n aria-expanded={isExpanded}\n aria-haspopup=\"listbox\"\n aria-disabled={disabled}\n onKeyDown={keyDownHandler}\n {...props}\n >\n <StyledSelect\n ref={ref}\n expandedDirection={expandedDirection}\n isPlaceholder={!selectedOption && !!placeholder}\n onPointerDown={(e) => {\n if (isExpanded) {\n setExpandedDirection('none');\n return;\n }\n\n e.stopPropagation();\n\n expandSelectListAtComputedPosition();\n }}\n >\n {selectedOption?.label || placeholder || 'ㅤ'}\n </StyledSelect>\n <SelectDownIcon>\n {isExpanded ? (\n <IconArrow2Up size=\"small\" />\n ) : (\n <IconArrow2Down size=\"small\" />\n )}\n </SelectDownIcon>\n {isExpanded && (\n <SelectOptionWrapper\n role=\"listbox\"\n aria-activedescendant={\n value != null ? `${id}-select-option-${value}` : undefined\n }\n ref={selectListRef}\n expandedDirection={expandedDirection}\n maxHeight={maxHeight}\n >\n {options.map(({ value: optionValue, label, disabled: _disabled }) => (\n <SelectOption\n id={`${id}-select-option-${optionValue}`}\n role=\"option\"\n key={optionValue}\n tabIndex={_disabled ? undefined : 0}\n aria-selected={optionValue === value}\n aria-disabled={_disabled}\n ref={optionItemRef}\n isSelected={optionValue === value}\n data-option-value={optionValue}\n // onMouseEnter를 사용하게 되면 키보드로 스크롤 할 때도 focus가 이동하게 되기 때문에 onMouseMove를 사용\n onMouseMove={(e) => {\n if (e.currentTarget === document.activeElement) {\n return;\n }\n e.currentTarget.focus({\n preventScroll: true,\n });\n }}\n onFocus={() => {\n selectListRef.current?.setAttribute(\n 'aria-activedescendant',\n `${id}-select-option-${optionValue}`\n );\n }}\n onClick={() => {\n if (_disabled) {\n return;\n }\n\n onSelectOption(optionValue, label);\n }}\n >\n {label}\n </SelectOption>\n ))}\n </SelectOptionWrapper>\n )}\n </SelectContainer>\n );\n};\n\nexport default forwardRef(DesignedSelect);\n"],"names":["maxHeight","props","expandedDirection","_setExpandedDirection","label","value","disabled","setTimeout","expandSelectListAtComputedPosition","focusSibling","ref","$width","tabIndex","onKeyDown","isPlaceholder","onPointerDown","children","size","role","onMouseMove","e","preventScroll","onSelectOption"],"mappings":";;;;;;;;;;;;;;AAAa;AAAA;AAAA;AA6Bb;AAaK;;;AATDA;;;;;;AAMGC;AAIL;AACA;;AAAOC;AAAmBC;AAE1B;AACA;AACA;;AAIE;AAGF;AAEI;AACE;AACF;AACAA;AACF;AAIF;;AAG0D;AAGtD;;;;;AAGEC;AACAC;AACAC;;AACD;AAGL;AAA2C;;AAE3C;;AAE6D;;;AAG3D;;;AAGF;AACA;AACA;AACA;AAAiD;AAC/C;;AAEE;AACF;AAEA;;;AAKE;AACF;;AAEA;AACA;;;;AASF;;AAGM;AACF;;AAEA;AACA;AACEC;AAAW;;AACX;AACF;;AAEA;;;AAGEA;AAAW;;AACb;AACF;AAIF;AAA6C;AAC3C;;AAGE;AACF;;AAGE;AACE;;AAEA;AACA;AACF;;;AAGIC;AACA;AACF;AACAC;AACA;AACF;;;AAGID;AACA;AACF;AACAC;AACA;AACF;;;AAGE;AACA;AACF;AACA;;AAGE;AACE;;AAEE;AACF;AACAD;AACF;;;AAWA;AACA;AAGJ;;AAGF;AAEIE;;AAEI;AACF;;;;AAIFC;AACAC;AACA;AACA;AACA;AACAC;AAA0B;;AAIxBH;AACAR;AACAY;AACAC;AACE;;AAEE;AACF;;AAIAP;;;AAG0C;AAE/BQ;AAEGC;AAAY;AAEVA;;AACjB;AAICC;AACA;AAGAR;AACAR;AACAF;AAAqBgB;AAER;;;;;AAGTE;AAEAN;;AAEA;AACAF;;;AAGA;AAAA;AACAS;AACE;AACE;AACF;AACAC;AACEC;AACF;;;AAEa;;;;AAOb;AACE;AACF;AAEAC;;AACAN;AAEI;;AAER;AAEL;AAGP;AAEA;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../../../../src/Inputs/Select/DesignedSelect/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css } from 'styled-components';\nimport {\n bg100,\n bg200,\n bg300,\n contents000,\n contents200,\n contents300,\n ellipsis,\n} from '@remember-web/mixin';\n\nimport { SelectContainer } from '../styles';\nimport type { ExpandedType } from './types';\n\nexport const StyledSelect = styled.div<{\n expandedDirection?: ExpandedType;\n isPlaceholder?: boolean;\n}>`\n ${ellipsis()}\n border: 1px solid ${contents300};\n ${({ expandedDirection }) =>\n ({\n none: css`\n border-radius: 4px;\n `,\n above: css`\n border-radius: 0 0 4px 4px;\n border-top-color: transparent;\n `,\n below: css`\n border-radius: 4px 4px 0 0;\n border-bottom-color: transparent;\n `,\n }[expandedDirection ?? 'none'])};\n\n padding: 10px 36px 10px 12px;\n transition: border-color 0.2s, background-color 0.2s;\n\n ${({ isPlaceholder }) =>\n isPlaceholder &&\n css`\n color: ${contents200};\n `}\n\n ${SelectContainer}:focus-within & {\n outline: none;\n border-color: ${contents000};\n }\n ${SelectContainer}:not([aria-disabled='true']) & {\n @media (hover: hover) {\n &:hover {\n background-color: ${bg200};\n }\n }\n\n &:active {\n background-color: ${bg300};\n }\n }\n`;\n\nexport const SelectDownIcon = styled.div`\n position: absolute;\n right: 12px;\n top: 50%;\n transform: translateY(-50%);\n\n & > svg {\n display: block;\n }\n\n pointer-events: none;\n`;\n\nexport const SelectOptionWrapper = styled.ul<{\n expandedDirection?: ExpandedType;\n maxHeight?: number | string;\n}>`\n all: unset;\n position: absolute;\n left: 0;\n right: 0;\n z-index: 1;\n border: 1px solid ${contents300};\n background-color: ${bg100};\n overflow-y: scroll;\n overscroll-behavior: contain;\n transition: border-color 0.2s, background-color 0.2s;\n\n ${({ maxHeight }) => {\n if (!maxHeight) {\n return null;\n }\n\n if (typeof maxHeight === 'number') {\n return css`\n max-height: ${maxHeight}px;\n `;\n }\n\n return css`\n max-height: ${maxHeight};\n `;\n }};\n\n ${({ expandedDirection }) =>\n expandedDirection === 'below'\n ? css`\n top: calc(100% - 1px);\n border-top: none;\n border-radius: 0 0 4px 4px;\n `\n : css`\n bottom: calc(100% - 1px);\n border-bottom: none;\n border-radius: 4px 4px 0 0;\n `}\n\n ${SelectContainer}:focus &, ${SelectContainer}:focus-within & {\n outline: none;\n border-color: ${contents000};\n }\n`;\n\nexport const SelectOption = styled.li<{ isSelected?: boolean }>`\n ${ellipsis()}\n padding: 10px 12px;\n color: ${contents000};\n\n &[aria-disabled='true'] {\n color: ${contents300};\n }\n\n &:focus {\n background-color: ${bg200};\n outline: none;\n }\n\n ${({ isSelected }) =>\n isSelected &&\n css`\n background-color: ${bg200};\n `}\n`;\n"],"names":["below","SelectDownIcon"],"mappings":";;;;;;AAAa;AAgBN;AAMH;;;;AASEA;;AAI4B;AAK9B;;AAIC;AAmBQC;;AA4BU;;AAEjB;AACF;AAEA;;AAIA;;AAKF;AAEE;AAAoB;AAWf;AAQF;AAcH;;AAIC;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../../../src/Inputs/Select/NativeSelect/Option/index.tsx"],"sourcesContent":["'use client';\n\nimport type { OptionProps, SelectValue } from '../../types';\n\nexport const NativeOption = <Value extends SelectValue = string>({\n children,\n disabled,\n value,\n}: OptionProps<Value>) => (\n <option value={value} disabled={disabled}>\n {String(children)}\n </option>\n);\n"],"names":["value","disabled"],"mappings":";;;;AAIyB;;;AAGlB;AAEGA;AAAcC;;AACH;AACV;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../../src/Inputs/Select/NativeSelect/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef } from 'react';\n\nimport { IconArrow2Down } from '@remember-web/icon';\n\nimport { SelectDownIcon, StyledSelect } from './styles';\nimport type { NativeSelectInternalProps } from './types';\nimport { SelectContainer } from '../styles';\n\nconst NativeSelect: ForwardRefRenderFunction<\n HTMLSelectElement,\n NativeSelectInternalProps\n> = (\n { children, className, width, placeholder, value, disabled, ...props },\n ref\n) => {\n const showPlaceholder = !value && !!placeholder;\n\n return (\n <SelectContainer aria-disabled={disabled} className={className}>\n <StyledSelect\n {...props}\n value={value}\n $width={width}\n ref={ref}\n isPlaceholder={showPlaceholder}\n disabled={disabled}\n >\n {!value && (\n <option value=\"\" selected>\n {placeholder || 'ㅤ'}\n </option>\n )}\n {children}\n </StyledSelect>\n <SelectDownIcon>\n <IconArrow2Down size=\"small\" />\n </SelectDownIcon>\n </SelectContainer>\n );\n};\n\nexport default forwardRef(NativeSelect);\n"],"names":["props","className","value","$width","ref","isPlaceholder","disabled","children","size"],"mappings":";;;;;;;;;AAAa;AAAA;AAAA;AAWb;AAMK;;;;;;AAF4DA;AAG/D;;AAGmB;AAAyBC;;AAGtCC;AACAC;AACAC;AACAC;AACAC;AAAmBC;AAGTL;;;;AAID;;AAGOM;;AAAe;AAChB;AAGvB;AAEA;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../../../../src/Inputs/Select/NativeSelect/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css } from 'styled-components';\nimport {\n bg200,\n bg300,\n contents000,\n contents200,\n contents300,\n getTypographyStyles,\n} from '@remember-web/mixin';\n\nexport const StyledSelect = styled.select<{\n $width?: number | string;\n isPlaceholder?: boolean;\n}>`\n all: unset;\n\n ${getTypographyStyles('Body1_M')}\n border: 1px solid ${contents300};\n border-radius: 4px;\n padding: 10px 36px 10px 12px;\n box-sizing: border-box;\n\n ${({ isPlaceholder }) =>\n isPlaceholder &&\n css`\n color: ${contents200};\n `}\n\n width: ${({ $width }) => {\n if (!$width) {\n return null;\n }\n\n if (typeof $width === 'number') {\n return `${$width}px`;\n }\n\n return $width;\n }};\n\n transition: border-color 0.2s, background-color 0.2s;\n\n &:focus {\n border-color: ${contents000};\n }\n\n &:not(:disabled) {\n @media (hover: hover) {\n &:hover {\n background-color: ${bg200};\n }\n }\n\n &:active {\n background-color: ${bg300};\n }\n }\n`;\nexport const SelectDownIcon = styled.div`\n position: absolute;\n right: 12px;\n top: 50%;\n transform: translateY(-50%);\n\n & > svg {\n display: block;\n }\n\n pointer-events: none;\n`;\n"],"names":["SelectDownIcon"],"mappings":";;;;;AAAa;AAYN;AAYH;;AAIC;AAEsB;;AAErB;AACF;AAEA;;AAEA;AAEA;AACF;AAoBWA;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../../src/Inputs/Select/Option/index.tsx"],"sourcesContent":["'use client';\n\nimport type { OptionProps, SelectValue } from '../types';\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport const OptionHolder = <T extends SelectValue>(props: OptionProps<T>) =>\n null;\n\nOptionHolder.displayName = 'Select.Option';\n"],"names":["OptionHolder"],"mappings":";AAIA;;AACyE;AACnE;AAENA;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/Inputs/Select/index.tsx"],"sourcesContent":["'use client';\n\nimport type { Ref, RefAttributes } from 'react';\nimport { Children, forwardRef } from 'react';\n\nimport DesignedSelect from './DesignedSelect';\nimport NativeSelect from './NativeSelect';\nimport { NativeOption } from './NativeSelect/Option';\nimport { OptionHolder } from './Option';\nimport { SelectLabel } from './styles';\nimport type {\n DesignedSelectProps,\n NativeSelectProps,\n SelectProps,\n SelectValue,\n} from './types';\n\nfunction Select<Value extends SelectValue>(\n props: SelectProps<Value>,\n ref: Ref<HTMLDivElement | HTMLSelectElement>\n) {\n const {\n children,\n label,\n value,\n className,\n disabled,\n onChange,\n placeholder,\n width,\n required,\n } = props;\n\n if (props.native) {\n return (\n <div>\n {label && (\n <SelectLabel>\n {label}\n {required && <mark>*</mark>}\n </SelectLabel>\n )}\n <NativeSelect\n disabled={disabled}\n className={className}\n onChange={(e) => {\n onChange?.(e.target.value as Value, e.target.innerText);\n }}\n value={value}\n required={required}\n placeholder={placeholder}\n width={width}\n ref={ref as Ref<HTMLSelectElement>}\n >\n {Children.map(children, (child) => (\n <NativeOption {...child.props} />\n ))}\n </NativeSelect>\n </div>\n );\n }\n\n return (\n <div>\n {label && (\n <SelectLabel>\n {label}\n {required && <mark>*</mark>}\n </SelectLabel>\n )}\n <DesignedSelect\n className={className}\n value={value}\n disabled={disabled}\n onChange={(_value, _label) => onChange?.(_value as Value, _label)}\n placeholder={placeholder}\n width={width}\n maxHeight={props.maxHeight}\n extendDirection={props.extendDirection}\n ref={ref as Ref<HTMLDivElement>}\n >\n {children}\n </DesignedSelect>\n </div>\n );\n}\n\nexport default Object.assign(\n forwardRef(Select) as <Value extends SelectValue>(\n props:\n | (DesignedSelectProps<Value> & RefAttributes<HTMLDivElement>)\n | (NativeSelectProps<Value> & RefAttributes<HTMLSelectElement>)\n ) => JSX.Element,\n { Option: OptionHolder }\n);\n"],"names":["children","disabled","className","onChange","value","required","placeholder","width","ref","Option"],"mappings":";;;;;;;;;;AAAa;AAAA;AAiBb;AAIE;;;;;;;;;;AAaE;AACEA;AAEgBA;AAEGA;AAAO;AAAO;AAI7BC;AACAC;AACAC;AACEA;;AAEFC;AACAC;AACAC;AACAC;AACAC;;;;AAIE;AACW;AAGrB;AAEA;AACER;AAEgBA;AAEGA;AAAO;AAAO;AAI7BE;AACAE;AACAH;AACAE;;;AACAG;AACAC;;;AAGAC;AAAgCR;AAEvB;AACM;AAGvB;AAEA;AAMIS;AAAqB;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../../../src/Inputs/Select/styles.ts"],"sourcesContent":["'use client';\n\nimport styled from 'styled-components';\nimport {\n bg200,\n contents000,\n contents200,\n contents300,\n getTypographyStyles,\n roleRed,\n} from '@remember-web/mixin';\n\nexport const SelectContainer = styled.div<{ $width?: number | string }>`\n ${getTypographyStyles('Body1_M')}\n color: ${contents000};\n width: ${({ $width }) => {\n if (!$width) {\n return 'fit-content';\n }\n\n if (typeof $width === 'number') {\n return `${$width}px`;\n }\n\n return $width;\n }};\n position: relative;\n user-select: none;\n\n &:focus {\n outline: none;\n border-color: ${contents000};\n }\n &[aria-disabled='true'] {\n color: ${contents200};\n border-color: ${contents300};\n background-color: ${bg200};\n }\n`;\n\nexport const SelectLabel = styled.label`\n ${getTypographyStyles('Headline4_B')}\n display: block;\n margin-bottom: 12px;\n display: flex;\n align-items: center;\n gap: 4px;\n\n & > mark {\n all: unset;\n color: ${roleRed};\n }\n`;\n"],"names":[],"mappings":";;;;;AAAa;AAYN;AAGoB;;AAErB;AACF;AAEA;;AAEA;AAEA;AACF;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../../../../../src/Inputs/Select/utils.ts"],"sourcesContent":["// focus된 요소의 sibling을 찾아서 focus\nexport function focusSibling<E extends HTMLElement>(\n currentFocusedElement: E,\n siblingDirection: 'previous' | 'next'\n) {\n if (currentFocusedElement?.matches('[data-option-value]')) {\n const siblingElement = getSiblingElement(\n currentFocusedElement,\n siblingDirection\n );\n const listElement = currentFocusedElement.parentElement;\n if (\n listElement &&\n siblingElement?.matches('[data-option-value]') &&\n checkSameElementType(currentFocusedElement, siblingElement)\n ) {\n siblingElement.focus({ preventScroll: true });\n // 방향키를 통해 넘어가는 스크롤 방향에 따라 scrollIntoView의 block을 다르게 설정\n if (\n {\n // 아래 요소를 선택할 때 스크롤이 아래로 내려가는 경우\n next:\n siblingElement.offsetTop >=\n (siblingElement.parentElement?.scrollTop ?? 0) +\n listElement.clientHeight,\n\n // 위 요소를 선택할 때 스크롤이 위로 올라가는 경우\n previous:\n siblingElement.offsetTop <=\n (siblingElement.parentElement?.scrollTop ?? 0),\n }[siblingDirection]\n ) {\n siblingElement.scrollIntoView({\n block: siblingDirection === 'previous' ? 'start' : 'end',\n });\n }\n }\n }\n}\n\nconst checkSameElementType = <E extends Element>(\n element1: E,\n element2: Element\n): element2 is E => element2 instanceof element1.constructor;\n\n// 재귀적으로 disabled되지 않은 sibling을 찾아서 반환\nfunction getSiblingElement<E extends Element>(\n target: E,\n siblingDirection: 'previous' | 'next'\n): E | null {\n const siblingElement = target[`${siblingDirection}ElementSibling`];\n if (\n !siblingElement ||\n !checkSameElementType(target, siblingElement) ||\n !siblingElement.matches('[data-option-value]')\n ) {\n return null;\n }\n\n if (siblingElement.matches('[aria-disabled=\"true\"]')) {\n return getSiblingElement(siblingElement, siblingDirection);\n }\n\n return siblingElement;\n}\n"],"names":["focusSibling","currentFocusedElement","siblingDirection","matches","siblingElement","getSiblingElement","listElement","parentElement","checkSameElementType","_siblingElement$paren","_siblingElement$paren2","_siblingElement$paren3","_siblingElement$paren4","focus","preventScroll","next","offsetTop","scrollTop","clientHeight","previous","scrollIntoView","block","element1","element2","constructor","target","concat"],"mappings":"AAAA;AACO,SAASA,YAAYA,CAC1BC,qBAAwB,EACxBC,gBAAqC,EACrC;EACA,IAAID,qBAAqB,KAArBA,IAAAA,IAAAA,qBAAqB,KAArBA,KAAAA,CAAAA,IAAAA,qBAAqB,CAAEE,OAAO,CAAC,qBAAqB,CAAC,EAAE;AACzD,IAAA,IAAMC,cAAc,GAAGC,iBAAiB,CACtCJ,qBAAqB,EACrBC,gBACF,CAAC,CAAA;AACD,IAAA,IAAMI,WAAW,GAAGL,qBAAqB,CAACM,aAAa,CAAA;AACvD,IAAA,IACED,WAAW,IACXF,cAAc,aAAdA,cAAc,KAAA,KAAA,CAAA,IAAdA,cAAc,CAAED,OAAO,CAAC,qBAAqB,CAAC,IAC9CK,oBAAoB,CAACP,qBAAqB,EAAEG,cAAc,CAAC,EAC3D;AAAA,MAAA,IAAAK,qBAAA,EAAAC,sBAAA,EAAAC,sBAAA,EAAAC,sBAAA,CAAA;MACAR,cAAc,CAACS,KAAK,CAAC;AAAEC,QAAAA,aAAa,EAAE,IAAA;AAAK,OAAC,CAAC,CAAA;AAC7C;MACA,IACE;AACE;AACAC,QAAAA,IAAI,EACFX,cAAc,CAACY,SAAS,IACxB,CAAA,CAAAP,qBAAA,GAAA,CAAAC,sBAAA,GAACN,cAAc,CAACG,aAAa,MAAA,IAAA,IAAAG,sBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAA5BA,sBAAA,CAA8BO,SAAS,MAAA,IAAA,IAAAR,qBAAA,KAAA,KAAA,CAAA,GAAAA,qBAAA,GAAI,CAAC,IAC3CH,WAAW,CAACY,YAAY;AAE5B;QACAC,QAAQ,EACNf,cAAc,CAACY,SAAS,MAAAL,sBAAA,GAAA,CAAAC,sBAAA,GACvBR,cAAc,CAACG,aAAa,MAAAK,IAAAA,IAAAA,sBAAA,KAA5BA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,sBAAA,CAA8BK,SAAS,cAAAN,sBAAA,KAAA,KAAA,CAAA,GAAAA,sBAAA,GAAI,CAAC,CAAA;OAChD,CAACT,gBAAgB,CAAC,EACnB;QACAE,cAAc,CAACgB,cAAc,CAAC;AAC5BC,UAAAA,KAAK,EAAEnB,gBAAgB,KAAK,UAAU,GAAG,OAAO,GAAG,KAAA;AACrD,SAAC,CAAC,CAAA;AACJ,OAAA;AACF,KAAA;AACF,GAAA;AACF,CAAA;AAEA,IAAMM,oBAAoB,GAAG,SAAvBA,oBAAoBA,CACxBc,QAAW,EACXC,QAAiB,EAAA;AAAA,EAAA,OACCA,QAAQ,YAAYD,QAAQ,CAACE,WAAW,CAAA;AAAA,CAAA,CAAA;;AAE5D;AACA,SAASnB,iBAAiBA,CACxBoB,MAAS,EACTvB,gBAAqC,EAC3B;AACV,EAAA,IAAME,cAAc,GAAGqB,MAAM,IAAAC,MAAA,CAAIxB,gBAAgB,EAAiB,gBAAA,CAAA,CAAA,CAAA;AAClE,EAAA,IACE,CAACE,cAAc,IACf,CAACI,oBAAoB,CAACiB,MAAM,EAAErB,cAAc,CAAC,IAC7C,CAACA,cAAc,CAACD,OAAO,CAAC,qBAAqB,CAAC,EAC9C;AACA,IAAA,OAAO,IAAI,CAAA;AACb,GAAA;AAEA,EAAA,IAAIC,cAAc,CAACD,OAAO,CAAC,wBAAwB,CAAC,EAAE;AACpD,IAAA,OAAOE,iBAAiB,CAACD,cAAc,EAAEF,gBAAgB,CAAC,CAAA;AAC5D,GAAA;AAEA,EAAA,OAAOE,cAAc,CAAA;AACvB;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/Inputs/TextInput/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef, useId, useState } from 'react';\n\nimport { IconHidden, IconVisible } from '@remember-web/icon';\n\nimport {\n InputContainer,\n InputDecorator,\n InputError,\n InputHintText,\n InputInner,\n InputLabel,\n InputTogglePasswordVisibilityButton,\n InputWrapper,\n} from './styles';\nimport type { InputProps } from './types';\n\nconst TextInput: ForwardRefRenderFunction<HTMLInputElement, InputProps> = (\n {\n className,\n label,\n leftElement,\n rightElement,\n disabled,\n hintText,\n hintTextColor,\n errorMessage,\n width,\n ...props\n },\n ref\n) => {\n const inputId = useId();\n const labelId = useId();\n const [isVisiblePassword, setIsVisiblePassword] = useState(false);\n const isForceVisibleInput =\n props.type === 'password' &&\n props.hasTogglePasswordVisibilityButton &&\n isVisiblePassword;\n\n return (\n <InputWrapper $width={width}>\n {label && (\n <InputLabel id={labelId} htmlFor={inputId}>\n {label}\n {props.required && <mark>*</mark>}\n </InputLabel>\n )}\n <InputContainer\n disabled={disabled}\n hasError={!!errorMessage}\n className={className}\n >\n {leftElement && <InputDecorator>{leftElement}</InputDecorator>}\n <InputInner\n disabled={disabled}\n id={inputId}\n aria-labelledby={label ? labelId : undefined}\n {...props}\n type={isForceVisibleInput ? 'text' : props.type || 'text'}\n ref={ref}\n />\n {hintText && (\n <InputHintText textColor={hintTextColor}>{hintText}</InputHintText>\n )}\n {props.type === 'password' &&\n props.hasTogglePasswordVisibilityButton && (\n <TogglePasswordVisibilityButton\n value={isVisiblePassword}\n onChange={setIsVisiblePassword}\n />\n )}\n {rightElement && <InputDecorator>{rightElement}</InputDecorator>}\n </InputContainer>\n {errorMessage && <InputError>{errorMessage}</InputError>}\n </InputWrapper>\n );\n};\n\nconst TogglePasswordVisibilityButton = ({\n value,\n onChange,\n}: {\n value: boolean;\n onChange: (value: boolean) => void;\n}) => (\n <InputTogglePasswordVisibilityButton\n type=\"button\"\n role=\"switch\"\n aria-checked={value ? 'true' : 'false'}\n aria-label=\"비밀번호 표시\"\n onClick={() => {\n onChange(!value);\n }}\n >\n {value ? <IconHidden size=\"small\" /> : <IconVisible size=\"small\" />}\n </InputTogglePasswordVisibilityButton>\n);\n\nexport default forwardRef(TextInput);\n"],"names":["props","isVisiblePassword","setIsVisiblePassword","$width","children","id","htmlFor","disabled","className","ref","textColor","value","onChange","type","role","size"],"mappings":";;;;;;;;;AAAa;AAAA;AAAA;AAmBb;AAcK;;;;;;;;;AAHEA;AAIL;AACA;AACA;;AAAOC;AAAmBC;AAC1B;;AAMgBC;AAAcC;AAEZC;AAAaC;AAAiBF;AAErBA;AAAO;AAAO;AAInCG;;AAEAC;AAAqBJ;AAEUA;;AAE7BG;AACAF;;AAC6C;;AAG7CI;AAAS;AAGMC;AAAyBN;AAAU;AAK9CO;AACAC;AAA+B;AAGLR;AAAc;AAAkB;AAEtCA;AAAc;AAAc;AAG9D;AAEA;AAAoC;;;AAQhCS;AACAC;AACA;AACA;;;;AAGEV;AAEmBW;AAAY;AAAmBA;;AAAe;AAC/B;AAGxC;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../../../src/Inputs/TextInput/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css } from 'styled-components';\n\nimport {\n bg200,\n contents000,\n contents200,\n contents300,\n roleRed,\n} from '@remember-web/mixin';\nimport { ellipsis, getTypographyStyles } from '@remember-web/mixin';\nimport { formatUnit } from '@remember-web/shared/utils/style';\nimport { ColorVariable } from '@remember-web/mixin';\n\nexport const InputWrapper = styled.div<{ $width?: string | number }>`\n ${({ $width }) =>\n $width &&\n css`\n width: ${formatUnit($width)};\n `};\n`;\n\nexport const InputContainer = styled.div<{\n disabled?: boolean;\n hasError?: boolean;\n}>`\n display: flex;\n align-items: center;\n border: 1px solid ${contents300};\n border-radius: 4px;\n padding: 0 12px;\n gap: 8px;\n\n transition: border-color 0.2s, background-color 0.2s;\n\n ${({ hasError, disabled }) => [\n hasError\n ? css`\n border-color: ${roleRed};\n `\n : css`\n &:focus-within {\n border-color: ${contents000};\n }\n `,\n disabled &&\n css`\n background-color: ${bg200};\n `,\n ]}\n`;\n\nexport const InputDecorator = styled.div`\n flex-shrink: 0;\n /* Inline요소가 들어오면 강제로 block으로 처리 (중앙정렬을 위해) */\n > * {\n display: block;\n }\n`;\n\nexport const InputInner = styled.input`\n ${getTypographyStyles('Body1_M')}\n color: ${contents000};\n\n display: block;\n flex-grow: 1;\n width: 100%;\n padding: 10px 0;\n border: 0;\n background-color: transparent;\n\n &:placeholder-shown {\n ${ellipsis()}\n }\n\n &::placeholder {\n color: ${contents200};\n }\n\n &:focus {\n outline: none;\n }\n`;\n\nexport const InputLabel = styled.label`\n ${getTypographyStyles('Headline4_B')}\n display: block;\n margin-bottom: 12px;\n display: flex;\n align-items: center;\n gap: 4px;\n\n & > mark {\n all: unset;\n color: ${roleRed};\n }\n`;\n\nexport const InputError = styled.div`\n ${getTypographyStyles('Body2_M')}\n color: ${roleRed};\n\n margin-top: 8px;\n`;\n\nexport const InputHintText = styled.span<{ textColor?: ColorVariable }>`\n ${getTypographyStyles('Body1_M')}\n color: ${({ textColor }) => textColor};\n white-space: nowrap;\n`;\n\nexport const InputTogglePasswordVisibilityButton = styled.button`\n all: unset;\n appearance: none;\n cursor: pointer;\n flex-shrink: 0;\n\n & > svg {\n display: block;\n }\n`;\n"],"names":["InputWrapper","InputDecorator","InputTogglePasswordVisibilityButton"],"mappings":";;;;;;AAAa;AAeAA;AACT;AAAS;AAIR;;AAgBD;;AAAqB;AActB;AAGUC;AAQN;;;;AA+CI;AAAY;AAAgB;AAI1BC;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/Logos/EnvLabel/index.tsx"],"sourcesContent":["'use client';\n\nexport type EnvType =\n | 'production'\n | 'final'\n | 'alpha'\n | 'bravo'\n | 'test'\n | 'development';\n\nexport const getEnvLabel = (env?: EnvType): JSX.Element | undefined => {\n switch (env) {\n case 'bravo':\n case 'development':\n return (\n <path\n d=\"M129.26 7.86C129.947 7.86 130.5 7.93 130.92 8.07C131.34 8.20333 131.647 8.40333 131.84 8.67C132.033 8.93 132.13 9.25333 132.13 9.64C132.13 9.95333 132.073 10.22 131.96 10.44C131.847 10.6533 131.703 10.8233 131.53 10.95C131.363 11.0767 131.19 11.1633 131.01 11.21V11.26C131.203 11.3067 131.397 11.3867 131.59 11.5C131.783 11.6133 131.943 11.7833 132.07 12.01C132.203 12.23 132.27 12.53 132.27 12.91C132.27 13.3433 132.16 13.7167 131.94 14.03C131.72 14.3433 131.407 14.5833 131 14.75C130.593 14.9167 130.11 15 129.55 15H126.77V7.86H129.26ZM129.28 10.6C129.6 10.6 129.823 10.5333 129.95 10.4C130.083 10.2667 130.15 10.1067 130.15 9.92C130.15 9.72667 130.077 9.58 129.93 9.48C129.783 9.37333 129.553 9.32 129.24 9.32H128.7V10.6H129.28ZM128.7 12.01V13.51H129.38C129.713 13.51 129.947 13.44 130.08 13.3C130.213 13.1533 130.28 12.97 130.28 12.75C130.28 12.6233 130.25 12.5033 130.19 12.39C130.137 12.2767 130.04 12.1867 129.9 12.12C129.767 12.0467 129.58 12.01 129.34 12.01H128.7ZM135.848 7.86C136.495 7.86 137.032 7.94 137.458 8.1C137.892 8.26 138.215 8.49667 138.428 8.81C138.648 9.11667 138.758 9.50333 138.758 9.97C138.758 10.2567 138.708 10.52 138.608 10.76C138.515 11 138.378 11.2133 138.198 11.4C138.018 11.5867 137.802 11.75 137.548 11.89L139.628 15H137.438L135.928 12.4H135.438V15H133.508V7.86H135.848ZM135.818 9.32H135.438V10.95H135.798C135.998 10.95 136.172 10.9233 136.318 10.87C136.472 10.81 136.592 10.7167 136.678 10.59C136.765 10.4567 136.808 10.28 136.808 10.06C136.808 9.90667 136.775 9.77667 136.708 9.67C136.642 9.55667 136.535 9.47 136.388 9.41C136.242 9.35 136.052 9.32 135.818 9.32ZM144.656 15L144.306 13.66H141.986L141.626 15H139.506L141.836 7.83H144.406L146.766 15H144.656ZM143.596 10.91C143.563 10.7833 143.516 10.6033 143.456 10.37C143.396 10.13 143.336 9.88333 143.276 9.63C143.216 9.37667 143.169 9.17 143.136 9.01C143.109 9.17 143.066 9.37 143.006 9.61C142.953 9.85 142.896 10.0867 142.836 10.32C142.783 10.5533 142.736 10.75 142.696 10.91L142.386 12.08H143.906L143.596 10.91ZM153.301 7.86L150.961 15H148.691L146.361 7.86H148.531L149.501 11.48C149.535 11.6133 149.575 11.7867 149.621 12C149.668 12.2133 149.711 12.4267 149.751 12.64C149.798 12.8533 149.825 13.0267 149.831 13.16C149.845 13.0267 149.868 12.8567 149.901 12.65C149.941 12.4367 149.981 12.2267 150.021 12.02C150.068 11.8067 150.111 11.6333 150.151 11.5L151.141 7.86H153.301ZM160.657 11.42C160.657 11.9733 160.59 12.4767 160.457 12.93C160.324 13.3767 160.117 13.7633 159.837 14.09C159.557 14.4167 159.197 14.6667 158.757 14.84C158.324 15.0133 157.8 15.1 157.187 15.1C156.587 15.1 156.067 15.0133 155.627 14.84C155.194 14.6667 154.834 14.4167 154.547 14.09C154.267 13.7633 154.057 13.3767 153.917 12.93C153.784 12.4767 153.717 11.97 153.717 11.41C153.717 10.67 153.84 10.0267 154.087 9.48C154.334 8.92667 154.714 8.5 155.227 8.2C155.74 7.9 156.397 7.75 157.197 7.75C158.01 7.75 158.67 7.90333 159.177 8.21C159.69 8.51 160.064 8.93667 160.297 9.49C160.537 10.0367 160.657 10.68 160.657 11.42ZM155.747 11.42C155.747 11.8467 155.794 12.2167 155.887 12.53C155.987 12.8367 156.144 13.0733 156.357 13.24C156.57 13.4067 156.847 13.49 157.187 13.49C157.54 13.49 157.82 13.4067 158.027 13.24C158.24 13.0733 158.394 12.8367 158.487 12.53C158.58 12.2167 158.627 11.8467 158.627 11.42C158.627 10.7733 158.52 10.2633 158.307 9.89C158.094 9.51667 157.724 9.33 157.197 9.33C156.85 9.33 156.57 9.41667 156.357 9.59C156.144 9.75667 155.987 9.99667 155.887 10.31C155.794 10.6167 155.747 10.9867 155.747 11.42Z\"\n fill=\"#00B3EA\"\n />\n );\n case 'test':\n return (\n <path\n d=\"M129.92 15H127.99V9.44H126.25V7.86H131.66V9.44H129.92V15ZM136.918 15H132.678V7.86H136.918V9.41H134.608V10.53H136.748V12.08H134.608V13.43H136.918V15ZM142.836 12.83C142.836 13.2167 142.736 13.5833 142.536 13.93C142.343 14.2767 142.04 14.56 141.626 14.78C141.22 14.9933 140.69 15.1 140.036 15.1C139.71 15.1 139.423 15.0833 139.176 15.05C138.936 15.0233 138.71 14.9767 138.496 14.91C138.283 14.8433 138.063 14.7567 137.836 14.65V12.93C138.223 13.1233 138.613 13.2733 139.006 13.38C139.4 13.48 139.756 13.53 140.076 13.53C140.27 13.53 140.426 13.5067 140.546 13.46C140.666 13.4133 140.756 13.35 140.816 13.27C140.876 13.19 140.906 13.1 140.906 13C140.906 12.8733 140.863 12.7667 140.776 12.68C140.69 12.5933 140.553 12.5033 140.366 12.41C140.18 12.3167 139.93 12.2 139.616 12.06C139.35 11.94 139.11 11.8133 138.896 11.68C138.683 11.5467 138.5 11.3967 138.346 11.23C138.2 11.0633 138.086 10.87 138.006 10.65C137.926 10.4233 137.886 10.1567 137.886 9.85C137.886 9.39 138 9.00667 138.226 8.7C138.453 8.38667 138.766 8.15333 139.166 8C139.573 7.84 140.043 7.76 140.576 7.76C141.043 7.76 141.463 7.81333 141.836 7.92C142.21 8.02 142.543 8.13667 142.836 8.27L142.246 9.76C141.94 9.62 141.636 9.51 141.336 9.43C141.043 9.34333 140.77 9.3 140.516 9.3C140.35 9.3 140.213 9.32 140.106 9.36C140 9.4 139.92 9.45667 139.866 9.53C139.82 9.59667 139.796 9.67333 139.796 9.76C139.796 9.87333 139.84 9.97333 139.926 10.06C140.013 10.1467 140.156 10.2433 140.356 10.35C140.563 10.45 140.843 10.58 141.196 10.74C141.543 10.8933 141.836 11.0633 142.076 11.25C142.323 11.43 142.51 11.6467 142.636 11.9C142.77 12.1467 142.836 12.4567 142.836 12.83ZM147.088 15H145.158V9.44H143.418V7.86H148.828V9.44H147.088V15Z\"\n fill=\"#00B3EA\"\n />\n );\n case 'alpha':\n return (\n <path\n d=\"M131.15 15L130.8 13.66H128.48L128.12 15H126L128.33 7.83H130.9L133.26 15H131.15ZM130.09 10.91C130.057 10.7833 130.01 10.6033 129.95 10.37C129.89 10.13 129.83 9.88333 129.77 9.63C129.71 9.37667 129.663 9.17 129.63 9.01C129.603 9.17 129.56 9.37 129.5 9.61C129.447 9.85 129.39 10.0867 129.33 10.32C129.277 10.5533 129.23 10.75 129.19 10.91L128.88 12.08H130.4L130.09 10.91ZM134.026 15V7.86H135.956V13.44H138.706V15H134.026ZM142.316 7.86C143.223 7.86 143.9 8.05667 144.346 8.45C144.8 8.84333 145.026 9.40333 145.026 10.13C145.026 10.4567 144.98 10.77 144.886 11.07C144.793 11.3633 144.64 11.63 144.426 11.87C144.22 12.1033 143.943 12.29 143.596 12.43C143.25 12.5633 142.823 12.63 142.316 12.63H141.776V15H139.846V7.86H142.316ZM142.276 9.42H141.776V11.06H142.156C142.323 11.06 142.476 11.0333 142.616 10.98C142.763 10.92 142.88 10.8267 142.966 10.7C143.053 10.5667 143.096 10.3933 143.096 10.18C143.096 9.95333 143.03 9.77 142.896 9.63C142.763 9.49 142.556 9.42 142.276 9.42ZM152.285 15H150.345V12.09H148.105V15H146.165V7.86H148.105V10.51H150.345V7.86H152.285V15ZM158.201 15L157.851 13.66H155.531L155.171 15H153.051L155.381 7.83H157.951L160.311 15H158.201ZM157.141 10.91C157.107 10.7833 157.061 10.6033 157.001 10.37C156.941 10.13 156.881 9.88333 156.821 9.63C156.761 9.37667 156.714 9.17 156.681 9.01C156.654 9.17 156.611 9.37 156.551 9.61C156.497 9.85 156.441 10.0867 156.381 10.32C156.327 10.5533 156.281 10.75 156.241 10.91L155.931 12.08H157.451L157.141 10.91Z\"\n fill=\"#FF5414\"\n />\n );\n default:\n }\n};\n"],"names":["d","fill"],"mappings":";;;;AAWE;AACE;AACA;AACE;AAEIA;AACAC;AAAc;AAGpB;AACE;AAEID;AACAC;AAAc;AAGpB;AACE;AAEID;AACAC;AAAc;AAItB;AACF;;"}
|