@remember-web/primitive 0.0.0-alpha.7 → 0.0.0-alpha.8
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.mjs → index.js} +2 -2
- package/dist/primitive/src/Avatars/Avatar/index.js.map +1 -0
- package/dist/primitive/src/Avatars/Avatar/{styles.mjs → styles.js} +1 -1
- package/dist/primitive/src/Avatars/Avatar/styles.js.map +1 -0
- package/dist/primitive/src/Badge/{Badge.mjs → Badge.js} +3 -3
- package/dist/primitive/src/Badge/Badge.js.map +1 -0
- package/dist/primitive/src/Badge/{style.mjs → style.js} +1 -1
- package/dist/primitive/src/Badge/style.js.map +1 -0
- package/dist/primitive/src/Badge/{utils.mjs → utils.js} +2 -2
- package/dist/primitive/src/Badge/utils.js.map +1 -0
- package/dist/primitive/src/Buttons/Button/Button.stories.d.ts +1 -1
- package/dist/primitive/src/Buttons/Button/{const.mjs → const.js} +1 -1
- package/dist/primitive/src/Buttons/Button/const.js.map +1 -0
- package/dist/primitive/src/Buttons/Button/{index.mjs → index.js} +8 -8
- package/dist/primitive/src/Buttons/Button/index.js.map +1 -0
- package/dist/primitive/src/Buttons/Button/{styles.mjs → styles.js} +2 -2
- package/dist/primitive/src/Buttons/Button/styles.js.map +1 -0
- package/dist/primitive/src/Common/Divider/{index.mjs → index.js} +1 -1
- package/dist/primitive/src/Common/Divider/index.js.map +1 -0
- package/dist/primitive/src/Common/Flex/{index.mjs → index.js} +1 -1
- package/dist/primitive/src/Common/Flex/index.js.map +1 -0
- package/dist/primitive/src/Common/Grid/{index.mjs → index.js} +1 -1
- package/dist/primitive/src/Common/Grid/index.js.map +1 -0
- package/dist/primitive/src/Common/Spinner/{index.mjs → index.js} +2 -2
- package/dist/primitive/src/Common/Spinner/index.js.map +1 -0
- package/dist/primitive/src/Common/Spinner/{styles.mjs → styles.js} +1 -1
- package/dist/primitive/src/Common/Spinner/styles.js.map +1 -0
- package/dist/primitive/src/Common/Typography/{index.mjs → index.js} +2 -2
- package/dist/primitive/src/Common/Typography/index.js.map +1 -0
- package/dist/primitive/src/Common/Typography/{styles.mjs → styles.js} +1 -1
- package/dist/primitive/src/Common/Typography/styles.js.map +1 -0
- package/dist/primitive/src/Control/BaseToggle/ToggleIcon/{index.mjs → index.js} +1 -1
- package/dist/primitive/src/Control/BaseToggle/ToggleIcon/index.js.map +1 -0
- package/dist/primitive/src/Control/BaseToggle/{index.mjs → index.js} +8 -8
- package/dist/primitive/src/Control/BaseToggle/index.js.map +1 -0
- package/dist/primitive/src/Control/BaseToggle/{styles.mjs → styles.js} +1 -1
- package/dist/primitive/src/Control/BaseToggle/styles.js.map +1 -0
- package/dist/primitive/src/Control/{Checkbox.mjs → Checkbox.js} +2 -2
- package/dist/primitive/src/Control/Checkbox.js.map +1 -0
- package/dist/primitive/src/Control/{Radio.mjs → Radio.js} +2 -2
- package/dist/primitive/src/Control/Radio.js.map +1 -0
- package/dist/primitive/src/Control/Switch/{index.mjs → index.js} +2 -2
- package/dist/primitive/src/Control/Switch/index.js.map +1 -0
- package/dist/primitive/src/Control/Switch/{styles.mjs → styles.js} +1 -1
- package/dist/primitive/src/Control/Switch/styles.js.map +1 -0
- package/dist/primitive/src/Control/{Toggle.mjs → Toggle.js} +2 -2
- package/dist/primitive/src/Control/Toggle.js.map +1 -0
- package/dist/primitive/src/Floating/DropdownMenu/{DropdownMenuSection.mjs → DropdownMenuSection.js} +2 -2
- package/dist/primitive/src/Floating/DropdownMenu/DropdownMenuSection.js.map +1 -0
- package/dist/primitive/src/Floating/DropdownMenu/{index.mjs → index.js} +4 -4
- package/dist/primitive/src/Floating/DropdownMenu/index.js.map +1 -0
- package/dist/primitive/src/Floating/DropdownMenu/{styles.mjs → styles.js} +2 -2
- package/dist/primitive/src/Floating/DropdownMenu/styles.js.map +1 -0
- package/dist/primitive/src/Floating/Popover/{index.mjs → index.js} +2 -2
- package/dist/primitive/src/Floating/Popover/index.js.map +1 -0
- package/dist/primitive/src/Floating/Popover/{styles.mjs → styles.js} +1 -1
- package/dist/primitive/src/Floating/Popover/styles.js.map +1 -0
- package/dist/primitive/src/Floating/Tooltip/{index.mjs → index.js} +4 -4
- package/dist/primitive/src/Floating/Tooltip/index.js.map +1 -0
- package/dist/primitive/src/Floating/Tooltip/{styles.mjs → styles.js} +1 -1
- package/dist/primitive/src/Floating/Tooltip/styles.js.map +1 -0
- package/dist/primitive/src/Floating/Tooltip/{types.mjs → types.js} +1 -1
- package/dist/primitive/src/Floating/Tooltip/types.js.map +1 -0
- package/dist/primitive/src/Inputs/Select/DesignedSelect/{const.mjs → const.js} +1 -1
- package/dist/primitive/src/Inputs/Select/DesignedSelect/const.js.map +1 -0
- package/dist/primitive/src/Inputs/Select/DesignedSelect/{index.mjs → index.js} +7 -7
- package/dist/primitive/src/Inputs/Select/DesignedSelect/index.js.map +1 -0
- package/dist/primitive/src/Inputs/Select/DesignedSelect/{styles.mjs → styles.js} +2 -2
- package/dist/primitive/src/Inputs/Select/DesignedSelect/styles.js.map +1 -0
- package/dist/primitive/src/Inputs/Select/NativeSelect/Option/{index.mjs → index.js} +1 -1
- package/dist/primitive/src/Inputs/Select/NativeSelect/Option/index.js.map +1 -0
- package/dist/primitive/src/Inputs/Select/NativeSelect/{index.mjs → index.js} +3 -3
- package/dist/primitive/src/Inputs/Select/NativeSelect/index.js.map +1 -0
- package/dist/primitive/src/Inputs/Select/NativeSelect/{styles.mjs → styles.js} +1 -1
- package/dist/primitive/src/Inputs/Select/NativeSelect/styles.js.map +1 -0
- package/dist/primitive/src/Inputs/Select/Option/{index.mjs → index.js} +1 -1
- package/dist/primitive/src/Inputs/Select/Option/index.js.map +1 -0
- package/dist/primitive/src/Inputs/Select/{index.mjs → index.js} +6 -6
- package/dist/primitive/src/Inputs/Select/index.js.map +1 -0
- package/dist/primitive/src/Inputs/Select/{styles.mjs → styles.js} +1 -1
- package/dist/primitive/src/Inputs/Select/styles.js.map +1 -0
- package/dist/primitive/src/Inputs/Select/{utils.mjs → utils.js} +1 -1
- package/dist/primitive/src/Inputs/Select/utils.js.map +1 -0
- package/dist/primitive/src/Inputs/TextInput/TextInput.stories.d.ts +1 -1
- package/dist/primitive/src/Inputs/TextInput/{index.mjs → index.js} +2 -2
- package/dist/primitive/src/Inputs/TextInput/index.js.map +1 -0
- package/dist/primitive/src/Inputs/TextInput/{styles.mjs → styles.js} +2 -2
- package/dist/primitive/src/Inputs/TextInput/styles.js.map +1 -0
- package/dist/primitive/src/Logos/EnvLabel/{index.mjs → index.js} +1 -1
- package/dist/primitive/src/Logos/EnvLabel/index.js.map +1 -0
- package/dist/primitive/src/Logos/RememberLogo/{index.mjs → index.js} +2 -2
- package/dist/primitive/src/Logos/RememberLogo/index.js.map +1 -0
- package/dist/primitive/src/Logos/RememberMobileLogo/{index.mjs → index.js} +1 -1
- package/dist/primitive/src/Logos/RememberMobileLogo/index.js.map +1 -0
- package/dist/primitive/src/Logos/RememberServiceLogo/{index.mjs → index.js} +8 -8
- package/dist/primitive/src/Logos/RememberServiceLogo/index.js.map +1 -0
- package/dist/primitive/src/Logos/RememberServiceLogo/{style.mjs → style.js} +1 -1
- package/dist/primitive/src/Logos/RememberServiceLogo/style.js.map +1 -0
- package/dist/primitive/src/Logos/RememberSquareLogo/{index.mjs → index.js} +1 -1
- package/dist/primitive/src/Logos/RememberSquareLogo/index.js.map +1 -0
- package/dist/primitive/src/Modals/Dialog/{index.mjs → index.js} +3 -3
- package/dist/primitive/src/Modals/Dialog/index.js.map +1 -0
- package/dist/primitive/src/Modals/Dialog/{styles.mjs → styles.js} +1 -1
- package/dist/primitive/src/Modals/Dialog/styles.js.map +1 -0
- package/dist/primitive/src/Paginations/CompactPagination/{index.mjs → index.js} +4 -4
- package/dist/primitive/src/Paginations/CompactPagination/index.js.map +1 -0
- package/dist/primitive/src/Paginations/Pagination/{index.mjs → index.js} +4 -4
- package/dist/primitive/src/Paginations/Pagination/index.js.map +1 -0
- package/dist/primitive/src/Paginations/{styles.mjs → styles.js} +1 -1
- package/dist/primitive/src/Paginations/styles.js.map +1 -0
- package/dist/primitive/src/Paginations/{usePagination.mjs → usePagination.js} +1 -1
- package/dist/primitive/src/Paginations/usePagination.js.map +1 -0
- package/dist/primitive/src/hooks/{useMouseEventAway.mjs → useMouseEventAway.js} +1 -1
- package/dist/primitive/src/hooks/useMouseEventAway.js.map +1 -0
- package/dist/primitive/src/index.js +26 -0
- package/dist/primitive/src/index.js.map +1 -0
- package/dist/shared/utils/{common.mjs → common.js} +1 -1
- package/dist/shared/utils/common.js.map +1 -0
- package/dist/shared/utils/{style.mjs → style.js} +1 -1
- package/dist/shared/utils/style.js.map +1 -0
- package/package.json +1 -1
- package/dist/primitive/src/Avatars/Avatar/index.mjs.map +0 -1
- package/dist/primitive/src/Avatars/Avatar/styles.mjs.map +0 -1
- package/dist/primitive/src/Badge/Badge.mjs.map +0 -1
- package/dist/primitive/src/Badge/style.mjs.map +0 -1
- package/dist/primitive/src/Badge/utils.mjs.map +0 -1
- package/dist/primitive/src/Buttons/Button/const.mjs.map +0 -1
- package/dist/primitive/src/Buttons/Button/index.mjs.map +0 -1
- package/dist/primitive/src/Buttons/Button/styles.mjs.map +0 -1
- package/dist/primitive/src/Common/Divider/index.mjs.map +0 -1
- package/dist/primitive/src/Common/Flex/index.mjs.map +0 -1
- package/dist/primitive/src/Common/Grid/index.mjs.map +0 -1
- package/dist/primitive/src/Common/Spinner/index.mjs.map +0 -1
- package/dist/primitive/src/Common/Spinner/styles.mjs.map +0 -1
- package/dist/primitive/src/Common/Typography/index.mjs.map +0 -1
- package/dist/primitive/src/Common/Typography/styles.mjs.map +0 -1
- package/dist/primitive/src/Control/BaseToggle/ToggleIcon/index.mjs.map +0 -1
- package/dist/primitive/src/Control/BaseToggle/index.mjs.map +0 -1
- package/dist/primitive/src/Control/BaseToggle/styles.mjs.map +0 -1
- package/dist/primitive/src/Control/Checkbox.mjs.map +0 -1
- package/dist/primitive/src/Control/Radio.mjs.map +0 -1
- package/dist/primitive/src/Control/Switch/index.mjs.map +0 -1
- package/dist/primitive/src/Control/Switch/styles.mjs.map +0 -1
- package/dist/primitive/src/Control/Toggle.mjs.map +0 -1
- package/dist/primitive/src/Floating/DropdownMenu/DropdownMenuSection.mjs.map +0 -1
- package/dist/primitive/src/Floating/DropdownMenu/index.mjs.map +0 -1
- package/dist/primitive/src/Floating/DropdownMenu/styles.mjs.map +0 -1
- package/dist/primitive/src/Floating/Popover/index.mjs.map +0 -1
- package/dist/primitive/src/Floating/Popover/styles.mjs.map +0 -1
- package/dist/primitive/src/Floating/Tooltip/index.mjs.map +0 -1
- package/dist/primitive/src/Floating/Tooltip/styles.mjs.map +0 -1
- package/dist/primitive/src/Floating/Tooltip/types.mjs.map +0 -1
- package/dist/primitive/src/Inputs/Select/DesignedSelect/const.mjs.map +0 -1
- package/dist/primitive/src/Inputs/Select/DesignedSelect/index.mjs.map +0 -1
- package/dist/primitive/src/Inputs/Select/DesignedSelect/styles.mjs.map +0 -1
- package/dist/primitive/src/Inputs/Select/NativeSelect/Option/index.mjs.map +0 -1
- package/dist/primitive/src/Inputs/Select/NativeSelect/index.mjs.map +0 -1
- package/dist/primitive/src/Inputs/Select/NativeSelect/styles.mjs.map +0 -1
- package/dist/primitive/src/Inputs/Select/Option/index.mjs.map +0 -1
- package/dist/primitive/src/Inputs/Select/index.mjs.map +0 -1
- package/dist/primitive/src/Inputs/Select/styles.mjs.map +0 -1
- package/dist/primitive/src/Inputs/Select/utils.mjs.map +0 -1
- package/dist/primitive/src/Inputs/TextInput/index.mjs.map +0 -1
- package/dist/primitive/src/Inputs/TextInput/styles.mjs.map +0 -1
- package/dist/primitive/src/Logos/EnvLabel/index.mjs.map +0 -1
- package/dist/primitive/src/Logos/RememberLogo/index.mjs.map +0 -1
- package/dist/primitive/src/Logos/RememberMobileLogo/index.mjs.map +0 -1
- package/dist/primitive/src/Logos/RememberServiceLogo/index.mjs.map +0 -1
- package/dist/primitive/src/Logos/RememberServiceLogo/style.mjs.map +0 -1
- package/dist/primitive/src/Logos/RememberSquareLogo/index.mjs.map +0 -1
- package/dist/primitive/src/Modals/Dialog/index.mjs.map +0 -1
- package/dist/primitive/src/Modals/Dialog/styles.mjs.map +0 -1
- package/dist/primitive/src/Paginations/CompactPagination/index.mjs.map +0 -1
- package/dist/primitive/src/Paginations/Pagination/index.mjs.map +0 -1
- package/dist/primitive/src/Paginations/styles.mjs.map +0 -1
- package/dist/primitive/src/Paginations/usePagination.mjs.map +0 -1
- package/dist/primitive/src/hooks/useMouseEventAway.mjs.map +0 -1
- package/dist/primitive/src/index.mjs +0 -26
- package/dist/primitive/src/index.mjs.map +0 -1
- package/dist/shared/utils/common.mjs.map +0 -1
- package/dist/shared/utils/style.mjs.map +0 -1
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
3
|
import { bg200, divider } from '@remember-web/mixin';
|
|
4
4
|
import { IconAvatarEmpty } from '@remember-web/icon';
|
|
5
|
-
import { StyledAvatar } from './styles.
|
|
5
|
+
import { StyledAvatar } from './styles.js';
|
|
6
6
|
import { jsx } from 'react/jsx-runtime';
|
|
7
7
|
|
|
8
8
|
var Avatar = function Avatar(_ref, ref) {
|
|
@@ -37,4 +37,4 @@ var Avatar = function Avatar(_ref, ref) {
|
|
|
37
37
|
var index = /*#__PURE__*/forwardRef(Avatar);
|
|
38
38
|
|
|
39
39
|
export { index as default };
|
|
40
|
-
//# sourceMappingURL=index.
|
|
40
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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';\nimport { IconAvatarEmpty } from '@remember-web/icon';\nimport type { ConvertTransientProps } from '@remember-web/shared/types/styles';\n\nimport type { StyledAvatarProps } from '@/Avatars/Avatar/styles';\nimport { StyledAvatar } from '@/Avatars/Avatar/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;;"}
|
|
@@ -0,0 +1 @@
|
|
|
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","withConfig","displayName","componentId","_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;IAaYC,YAAY,GAAGC,MAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,sBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,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,CAAKvB,UAAU,CAACe,KAAK,CAAC,EAAI,IAAA,CAAA;AAC/BS,IAAAA,QAAQ,KAAAD,MAAA,CAAKvB,UAAU,CAACe,KAAK,CAAC,EAAI,IAAA,CAAA;AAClCU,IAAAA,SAAS,KAAAF,MAAA,CAAKvB,UAAU,CAACe,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,CAAC;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { StyledBadge } from './style.
|
|
2
|
-
import { getBadgeValue } from './utils.
|
|
1
|
+
import { StyledBadge } from './style.js';
|
|
2
|
+
import { getBadgeValue } from './utils.js';
|
|
3
3
|
import { jsx } from 'react/jsx-runtime';
|
|
4
4
|
|
|
5
5
|
function Badge(_ref) {
|
|
@@ -10,4 +10,4 @@ function Badge(_ref) {
|
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
export { Badge };
|
|
13
|
-
//# sourceMappingURL=Badge.
|
|
13
|
+
//# sourceMappingURL=Badge.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
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","getTypographyStyles","secondary100","contents999","getBadgePseudoCss","pseudo","arguments","length","undefined","_ref","_ref$top","top","_ref$right","right","StyledBadge","styled","span","withConfig","displayName","componentId"],"mappings":";;;AAOA;AACA;AACA;AACaA,IAAAA,QAAQ,GAAGC,GAAG,CACvBC,CAAAA,EAAAA,EAAAA,yFAAAA,EAAAA,SAAAA,EAAAA,2CAAAA,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;EAAA,OACjBZ,GAAG,0IACiBK,MAAM,EACzBN,QAAQ,EAGHY,GAAG,EACDE,KAAK,CAAA,CAAA;AAAA,EAGjB;IAEYC,WAAW,GAAGC,MAAM,CAACC,IAAI,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,oBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,GAAA,CAAA,EAClCpB,QAAQ;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { getBadgePseudoCss } from './style.
|
|
1
|
+
import { getBadgePseudoCss } from './style.js';
|
|
2
2
|
|
|
3
3
|
var getBadgeValue = function getBadgeValue(props) {
|
|
4
4
|
if (typeof props === 'string') {
|
|
@@ -20,4 +20,4 @@ var badgePseudo = {
|
|
|
20
20
|
};
|
|
21
21
|
|
|
22
22
|
export { badgePseudo, getBadgeValue };
|
|
23
|
-
//# sourceMappingURL=utils.
|
|
23
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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;;;;"}
|
|
@@ -8,7 +8,7 @@ declare const meta: {
|
|
|
8
8
|
as?: T | null | undefined;
|
|
9
9
|
} & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<T>>, "icon" | keyof import("@/Buttons/Button/types").ButtonStyleProps | "iconPosition"> & import("@remember-web/shared/types").ConvertTransientProps<Partial<import("@/Buttons/Button/types").ButtonStyleProps>> & {
|
|
10
10
|
icon?: import("react").ReactNode;
|
|
11
|
-
iconPosition?: "
|
|
11
|
+
iconPosition?: "left" | "right" | undefined;
|
|
12
12
|
} & {
|
|
13
13
|
ref?: import("react").ComponentPropsWithRef<T>["ref"] | undefined;
|
|
14
14
|
}) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
|
|
@@ -0,0 +1 @@
|
|
|
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;;;;"}
|
|
@@ -2,14 +2,14 @@
|
|
|
2
2
|
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
3
3
|
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
|
|
4
4
|
import { forwardRef } from 'react';
|
|
5
|
-
import '../../Common/Divider/index.
|
|
6
|
-
import '../../Common/Flex/index.
|
|
7
|
-
import '../../Common/Grid/index.
|
|
8
|
-
import { Spinner } from '../../Common/Spinner/index.
|
|
9
|
-
import '../../Common/Typography/styles.
|
|
5
|
+
import '../../Common/Divider/index.js';
|
|
6
|
+
import '../../Common/Flex/index.js';
|
|
7
|
+
import '../../Common/Grid/index.js';
|
|
8
|
+
import { Spinner } from '../../Common/Spinner/index.js';
|
|
9
|
+
import '../../Common/Typography/styles.js';
|
|
10
10
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
11
|
-
import { SPINNER_SIZE_MAP } from './const.
|
|
12
|
-
import { StyledButton } from './styles.
|
|
11
|
+
import { SPINNER_SIZE_MAP } from './const.js';
|
|
12
|
+
import { StyledButton } from './styles.js';
|
|
13
13
|
|
|
14
14
|
var _excluded = ["children", "color", "size", "variant", "layout", "isLoading", "filled", "icon", "iconPosition"];
|
|
15
15
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
@@ -52,4 +52,4 @@ var Button = function Button(_ref, ref) {
|
|
|
52
52
|
var index = /*#__PURE__*/forwardRef(Button);
|
|
53
53
|
|
|
54
54
|
export { index as default };
|
|
55
|
-
//# sourceMappingURL=index.
|
|
55
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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;;"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
4
|
import { getTypographyStyles, primary100, primary200, disabled, bg100 } from '@remember-web/mixin';
|
|
5
|
-
import { ICON_GAP_MAP, BUTTON_SIZES, BUTTON_COLORS } from './const.
|
|
5
|
+
import { ICON_GAP_MAP, BUTTON_SIZES, BUTTON_COLORS } from './const.js';
|
|
6
6
|
|
|
7
7
|
var _excluded = ["$size", "$layout", "$color"];
|
|
8
8
|
var StyledButton = styled.button.withConfig({
|
|
@@ -23,4 +23,4 @@ var StyledButton = styled.button.withConfig({
|
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
export { StyledButton };
|
|
26
|
-
//# sourceMappingURL=styles.
|
|
26
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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;;;;AAgB4B;AACvC;AAAA;;;AAA8BA;AAAK;AAEjCC;AAmEA;;AAaA;;AAeD;;"}
|
|
@@ -0,0 +1 @@
|
|
|
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;AAWb;;;AAAqD;AAC/B;AAAGA;AAAe;AAAY;;AAYpD;AACA;AACA;AACA;;;AAC4E;;"}
|
|
@@ -0,0 +1 @@
|
|
|
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;AAkBb;;;AAA6B;AAC3B;AACEA;;AACAC;;AACAC;;AACAC;;AACAC;;AACAC;;AACAC;AAAgB;AAWE;;AAItB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACiB;;;;;;;;AASZC;AAAK;AAGNC;AACAH;AACAC;AACAL;AACAG;AACAJ;AACAE;AACAC;;AAEA;;"}
|
|
@@ -0,0 +1 @@
|
|
|
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;AAiBb;;;AAA6B;AAGlB;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,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { IconSpinner } from '@remember-web/icon';
|
|
3
|
-
import { Container } from './styles.
|
|
3
|
+
import { Container } from './styles.js';
|
|
4
4
|
import { jsx } from 'react/jsx-runtime';
|
|
5
5
|
|
|
6
6
|
var Spinner = function Spinner(_ref) {
|
|
@@ -21,4 +21,4 @@ var Spinner = function Spinner(_ref) {
|
|
|
21
21
|
};
|
|
22
22
|
|
|
23
23
|
export { Spinner };
|
|
24
|
-
//# sourceMappingURL=index.
|
|
24
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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;;"}
|
|
@@ -0,0 +1 @@
|
|
|
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":";;;AAMA;;;;AAImC;AACjC;;AAAiB;AAee;;"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
3
3
|
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
|
|
4
4
|
import { forwardRef } from 'react';
|
|
5
|
-
import { StyledTypography } from './styles.
|
|
5
|
+
import { StyledTypography } from './styles.js';
|
|
6
6
|
import { jsx } from 'react/jsx-runtime';
|
|
7
7
|
|
|
8
8
|
var _excluded = ["variant", "as", "color", "children", "ellipsis", "maxWidth"];
|
|
@@ -30,4 +30,4 @@ var Typography = function Typography(_ref, ref) {
|
|
|
30
30
|
var Typography$1 = /*#__PURE__*/forwardRef(Typography);
|
|
31
31
|
|
|
32
32
|
export { Typography$1 as default };
|
|
33
|
-
//# sourceMappingURL=index.
|
|
33
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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;;"}
|
|
@@ -0,0 +1 @@
|
|
|
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":["color","maxWidth"],"mappings":";;;;;;;AAW0C;AAMtC;;;;AAAyC;AAGnCA;AAAeC;AAAoB;AAC1C;;"}
|
|
@@ -0,0 +1 @@
|
|
|
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;;"}
|
|
@@ -2,15 +2,15 @@
|
|
|
2
2
|
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
3
3
|
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
|
|
4
4
|
import { forwardRef } from 'react';
|
|
5
|
-
import '../../Common/Divider/index.
|
|
6
|
-
import '../../Common/Flex/index.
|
|
7
|
-
import '../../Common/Grid/index.
|
|
5
|
+
import '../../Common/Divider/index.js';
|
|
6
|
+
import '../../Common/Flex/index.js';
|
|
7
|
+
import '../../Common/Grid/index.js';
|
|
8
8
|
import '@remember-web/icon';
|
|
9
|
-
import '../../Common/Spinner/styles.
|
|
9
|
+
import '../../Common/Spinner/styles.js';
|
|
10
10
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
11
|
-
import Typography from '../../Common/Typography/index.
|
|
12
|
-
import { ToggleIcon } from './ToggleIcon/index.
|
|
13
|
-
import { ToggleRoot, ToggleInput } from './styles.
|
|
11
|
+
import Typography from '../../Common/Typography/index.js';
|
|
12
|
+
import { ToggleIcon } from './ToggleIcon/index.js';
|
|
13
|
+
import { ToggleRoot, ToggleInput } from './styles.js';
|
|
14
14
|
|
|
15
15
|
var _excluded = ["variant", "label", "labelPosition", "className", "inputClassName", "size", "labelGap", "type", "onToggle", "onChange"];
|
|
16
16
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
@@ -64,4 +64,4 @@ var _BaseToggle = function _BaseToggle(_ref, ref) {
|
|
|
64
64
|
var BaseToggle = /*#__PURE__*/forwardRef(_BaseToggle);
|
|
65
65
|
|
|
66
66
|
export { BaseToggle };
|
|
67
|
-
//# sourceMappingURL=index.
|
|
67
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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;;;"}
|
|
@@ -15,4 +15,4 @@ var ToggleInput = styled.input.withConfig({
|
|
|
15
15
|
})(["all:unset;position:absolute;width:1px;height:0px;margin-left:-1px;&:checked ~ svg.offIcon{display:none;}&:not(:checked) ~ svg.onIcon{display:none;}&:disabled ~ svg{filter:grayscale(1) brightness(1.1);}&:not(:disabled):active ~ svg{filter:grayscale(0.1) brightness(0.9);}&:focus-visible ~ svg{outline:solid 2px ", ";outline-offset:-1px;}"], primary100);
|
|
16
16
|
|
|
17
17
|
export { ToggleInput, ToggleRoot };
|
|
18
|
-
//# sourceMappingURL=styles.
|
|
18
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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":[],"mappings":";;;;;;;AAKsC;AAIlC;AAAO;AAAgC;;;;AAsBJ;;"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
3
3
|
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
|
|
4
4
|
import { forwardRef } from 'react';
|
|
5
|
-
import { CircleBaseToggle } from './Toggle.
|
|
5
|
+
import { CircleBaseToggle } from './Toggle.js';
|
|
6
6
|
import { jsx } from 'react/jsx-runtime';
|
|
7
7
|
|
|
8
8
|
var _excluded = ["variant"];
|
|
@@ -20,4 +20,4 @@ var _Checkbox = function _Checkbox(_ref, ref) {
|
|
|
20
20
|
var Checkbox = /*#__PURE__*/forwardRef(_Checkbox);
|
|
21
21
|
|
|
22
22
|
export { Checkbox, _Checkbox };
|
|
23
|
-
//# sourceMappingURL=Checkbox.
|
|
23
|
+
//# sourceMappingURL=Checkbox.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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;;;"}
|
|
@@ -3,7 +3,7 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
|
3
3
|
import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
|
|
4
4
|
import _extends from '@babel/runtime/helpers/extends';
|
|
5
5
|
import { forwardRef } from 'react';
|
|
6
|
-
import { CircleBaseToggle } from './Toggle.
|
|
6
|
+
import { CircleBaseToggle } from './Toggle.js';
|
|
7
7
|
import { jsx } from 'react/jsx-runtime';
|
|
8
8
|
|
|
9
9
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
@@ -19,4 +19,4 @@ var _Radio = function _Radio(_ref, ref) {
|
|
|
19
19
|
var Radio = /*#__PURE__*/forwardRef(_Radio);
|
|
20
20
|
|
|
21
21
|
export { Radio };
|
|
22
|
-
//# sourceMappingURL=Radio.
|
|
22
|
+
//# sourceMappingURL=Radio.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
3
3
|
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
|
|
4
|
-
import { Label, SwitchRoot, SwitchThumb } from './styles.
|
|
4
|
+
import { Label, SwitchRoot, SwitchThumb } from './styles.js';
|
|
5
5
|
import { jsx } from 'react/jsx-runtime';
|
|
6
6
|
|
|
7
7
|
var _excluded = ["size"];
|
|
@@ -24,4 +24,4 @@ function Switch(_ref) {
|
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
export { Switch };
|
|
27
|
-
//# sourceMappingURL=index.
|
|
27
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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;;"}
|
|
@@ -0,0 +1 @@
|
|
|
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":[],"mappings":";;;;;;;;AASiC;AAM1B;;;AAA+C;AAiBlD;AAAO;AAUH;AAGD;;;AAAiD;AASpD;AAAO;AAkBH;;"}
|
|
@@ -3,7 +3,7 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
|
3
3
|
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
|
|
4
4
|
import { forwardRef } from 'react';
|
|
5
5
|
import styled from 'styled-components';
|
|
6
|
-
import { BaseToggle } from './BaseToggle/index.
|
|
6
|
+
import { BaseToggle } from './BaseToggle/index.js';
|
|
7
7
|
import { jsx } from 'react/jsx-runtime';
|
|
8
8
|
|
|
9
9
|
var _excluded = ["variant"];
|
|
@@ -24,4 +24,4 @@ var CircleBaseToggle = styled(BaseToggle).withConfig({
|
|
|
24
24
|
})(["& > svg{border-radius:50%;}"]);
|
|
25
25
|
|
|
26
26
|
export { CircleBaseToggle, Toggle, _Toggle };
|
|
27
|
-
//# sourceMappingURL=Toggle.
|
|
27
|
+
//# sourceMappingURL=Toggle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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"],"mappings":";;;;;;;;AAAa;AAAA;AAAA;AAQN;AAKwB;AAAZA;AAAK;AACVC;AAAUC;;AAA+B;;AAKhD;;;AAA2C;;"}
|
package/dist/primitive/src/Floating/DropdownMenu/{DropdownMenuSection.mjs → DropdownMenuSection.js}
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
2
2
|
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
|
|
3
|
-
import { StyledDropdownMenuSection, StyledDropdownMenuSectionTitle } from './styles.
|
|
3
|
+
import { StyledDropdownMenuSection, StyledDropdownMenuSectionTitle } from './styles.js';
|
|
4
4
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
5
5
|
|
|
6
6
|
var _excluded = ["title", "children"];
|
|
@@ -18,4 +18,4 @@ var DropdownMenuSection = function DropdownMenuSection(_ref) {
|
|
|
18
18
|
};
|
|
19
19
|
|
|
20
20
|
export { DropdownMenuSection };
|
|
21
|
-
//# sourceMappingURL=DropdownMenuSection.
|
|
21
|
+
//# sourceMappingURL=DropdownMenuSection.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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,9 +1,9 @@
|
|
|
1
1
|
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
2
2
|
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
|
|
3
3
|
import * as RadixPopover from '@radix-ui/react-popover';
|
|
4
|
-
import { StyledDropdownMenuContent, StyledDropdownMenuItem } from './styles.
|
|
5
|
-
import Popover from '../Popover/index.
|
|
6
|
-
import { DropdownMenuSection } from './DropdownMenuSection.
|
|
4
|
+
import { StyledDropdownMenuContent, StyledDropdownMenuItem } from './styles.js';
|
|
5
|
+
import Popover from '../Popover/index.js';
|
|
6
|
+
import { DropdownMenuSection } from './DropdownMenuSection.js';
|
|
7
7
|
import { jsx } from 'react/jsx-runtime';
|
|
8
8
|
|
|
9
9
|
var _excluded = ["isInsideCloseable"];
|
|
@@ -33,4 +33,4 @@ var DropdownMenu = Object.assign(RadixPopover.Root.bind(null), {
|
|
|
33
33
|
});
|
|
34
34
|
|
|
35
35
|
export { DropdownMenu as default };
|
|
36
|
-
//# sourceMappingURL=index.
|
|
36
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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;;;;"}
|
|
@@ -2,7 +2,7 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
|
2
2
|
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
4
|
import { getTypographyStyles, contents000, bg200, contents200, divider } from '@remember-web/mixin';
|
|
5
|
-
import { StyledPopoverContent } from '../Popover/styles.
|
|
5
|
+
import { StyledPopoverContent } from '../Popover/styles.js';
|
|
6
6
|
|
|
7
7
|
var _excluded = ["active", "disabled"];
|
|
8
8
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
@@ -45,4 +45,4 @@ var StyledDropdownMenuContent = styled(StyledPopoverContent).withConfig({
|
|
|
45
45
|
StyledDropdownMenuItem.defaultProps = {};
|
|
46
46
|
|
|
47
47
|
export { DropdownMenuItemDisabledCSS, DropdownMenuItemHoverCSS, StyledDropdownMenuContent, StyledDropdownMenuItem, StyledDropdownMenuSection, StyledDropdownMenuSectionTitle, dropdownMenuItemCSS, getDropdownMenuItemCss };
|
|
48
|
-
//# sourceMappingURL=styles.
|
|
48
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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","getTypographyStyles","contents000","DropdownMenuItemHoverCSS","bg200","DropdownMenuItemDisabledCSS","StyledDropdownMenuSectionTitle","styled","span","withConfig","displayName","componentId","contents200","getDropdownMenuItemCss","_ref","$active","$disabled","StyledDropdownMenuItem","div","attrs","_ref2","active","disabled","props","_objectWithoutProperties","_excluded","_objectSpread","tabIndex","undefined","StyledDropdownMenuSection","StyledDropdownMenuContent","StyledPopoverContent","divider","defaultProps"],"mappings":";;;;;;;;;AAOO,IAAMA,mBAAmB,GAAGC,GAAG,CAAA,CAAA,mDAAA,EAAA,SAAA,EAAA,8EAAA,CAAA,EAKlCC,mBAAmB,CAAC,OAAO,CAAC,EACrBC,WAAW,EAIrB;IAEYC,wBAAwB,GAAGH,GAAG,CAAA,CAAA,2CAAA,EAAA,IAAA,CAAA,EAGnBI,KAAK,EAE5B;AAEYC,IAAAA,2BAA2B,GAAGL,GAAG,CAE7C,CAAA,sBAAA,CAAA,EAAA;IAEYM,8BAA8B,GAAGC,MAAM,CAACC,IAAI,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,wCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CACrDZ,CAAAA,CAAAA,CAAAA,EAAAA,EAAAA,GAAAA,EAAAA,SAAAA,EAAAA,GAAAA,CAAAA,EAAAA,mBAAmB,EACnBE,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,OAEThB,GAAG,CAAC,YAAA;AAAA,IAAA,OAAM,CACRD,mBAAmB,EACnB,CAACgB,OAAO,IAAIZ,wBAAwB,EACpCa,SAAS,IAAIX,2BAA2B,EACxCL,GAAG,CACce,CAAAA,cAAAA,EAAAA,iCAAAA,CAAAA,EAAAA,OAAO,GAAG,GAAG,GAAG,GAAG,CAMrC,CAAA,CAAA;GAAC,CAAA,CAAA;AAAA,EAAA;AAEG,IAAME,sBAAsB,GAAGV,MAAM,CAACW,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;AACjCb,IAAAA,OAAO,EAAEM,MAAM;AACfL,IAAAA,SAAS,EAAEM,QAAAA;AAAQ,GAAA,EAChBC,KAAK,CAAA,CAAA;AAAA,CAEZ,CAAC,CAAAd,UAAA,CAAA;EAAAC,WAAA,EAAA,gCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAA8BE,sBAAsB,EAAC;IAEzCgB,yBAAyB,GAAGtB,MAAM,CAACW,GAAG,CAAAT,UAAA,CAAA;EAAAC,WAAA,EAAA,mCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAE,CAAA,CAAA,CAAA,EAAA,CAAA,EAAA;AAE9C,IAAMmB,yBAAyB,GAAGvB,MAAM,CAACwB,oBAAoB,CAAC,CAAAtB,UAAA,CAAA;EAAAC,WAAA,EAAA,mCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,2BAAA,EAAA,IAAA,EAAA,kCAAA,CAAA,EACjEkB,yBAAyB,EACEG,OAAO,EAElCH,yBAAyB,EAG5B;AACDZ,sBAAsB,CAACgB,YAAY,GAAG,EAAE;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
|
|
2
2
|
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
3
3
|
import * as RadixPopover from '@radix-ui/react-popover';
|
|
4
|
-
import { StyledPopoverContent } from './styles.
|
|
4
|
+
import { StyledPopoverContent } from './styles.js';
|
|
5
5
|
import { jsx } from 'react/jsx-runtime';
|
|
6
6
|
|
|
7
7
|
var _excluded = ["isInsideCloseable"];
|
|
@@ -37,4 +37,4 @@ var Popover = Object.assign(RadixPopover.Root.bind(null), {
|
|
|
37
37
|
});
|
|
38
38
|
|
|
39
39
|
export { Popover as default };
|
|
40
|
-
//# sourceMappingURL=index.
|
|
40
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
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","showFadeOut","StyledPopoverContent","styled","PopoverContent","withConfig","displayName","componentId","contents000","bg100","defaultProps","avoidCollisions","align","side","sideOffset"],"mappings":";;;;AAKaA,IAAAA,UAAU,GAAGC,SAAS,CAOlC,CAAA,gCAAA,CAAA,EAAA;AACYC,IAAAA,WAAW,GAAGD,SAAS,CAOnC,CAAA,gCAAA,CAAA,EAAA;AAEM,IAAME,oBAAoB,GAAGC,MAAM,CAACC,cAAc,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,8BAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAA,CAAA,qHAAA,EAAA,oBAAA,EAAA,gHAAA,EAAA,gFAAA,EAAA,2CAAA,CAAA,EAQ/CC,WAAW,EACAC,KAAK,EAUVV,UAAU,EAGVE,WAAW,EAE3B;AAEDC,oBAAoB,CAACQ,YAAY,GAAG;AAClCC,EAAAA,eAAe,EAAE,IAAI;AACrBC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,IAAI,EAAE,QAAQ;AACdC,EAAAA,UAAU,EAAE,CAAA;AACd,CAAC;;;;"}
|