@remember-web/primitive 0.3.2 → 0.3.3
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/src/Floating/Tooltip/index.cjs.js +1 -1
- package/dist/src/Floating/Tooltip/index.cjs.js.map +1 -1
- package/dist/src/Floating/Tooltip/index.esm.js +2 -2
- package/dist/src/Floating/Tooltip/index.esm.js.map +1 -1
- package/dist/src/Floating/Tooltip/styles.cjs.js +6 -1
- package/dist/src/Floating/Tooltip/styles.cjs.js.map +1 -1
- package/dist/src/Floating/Tooltip/styles.d.ts +3 -0
- package/dist/src/Floating/Tooltip/styles.d.ts.map +1 -1
- package/dist/src/Floating/Tooltip/styles.esm.js +6 -2
- package/dist/src/Floating/Tooltip/styles.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/Floating/Tooltip/index.tsx +2 -2
- package/src/Floating/Tooltip/styles.ts +4 -0
|
@@ -122,7 +122,7 @@ function Tooltip(_ref) {
|
|
|
122
122
|
return _setOpen(false);
|
|
123
123
|
},
|
|
124
124
|
children: /*#__PURE__*/jsxRuntime.jsx(icon.IconCloseS, {})
|
|
125
|
-
}), types.isLargeSizeProps(props) && props.hasArrow && /*#__PURE__*/jsxRuntime.jsx(
|
|
125
|
+
}), types.isLargeSizeProps(props) && props.hasArrow && /*#__PURE__*/jsxRuntime.jsx(styles.Arrow, {
|
|
126
126
|
width: 14,
|
|
127
127
|
height: 8,
|
|
128
128
|
color: backgroundColor
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../../src/Floating/Tooltip/index.tsx"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { IconCloseS } from '@remember-web/icon';\nimport { contents000, contents999 } from '@remember-web/mixin';\nimport { isSSR } from '@remember-web/shared';\nimport { type PropsWithChildren, useState } from 'react';\n\nimport { CloseButton, TooltipContent, TooltipContentWrapper, TooltipTriggerWrapper } from './styles';\nimport {\n type TooltipProps,\n type TooltipSize,\n type TooltipType,\n isLargeSizeProps,\n isStaticTypeProps,\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 <TooltipContentWrapper $zIndex={zIndex}>\n <TooltipContent\n $size={size}\n $maxWidth={maxWidth}\n $backgroundColor={backgroundColor}\n $contentColor={contentColor}\n $textAlign={textAlign}\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 <
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../../src/Floating/Tooltip/index.tsx"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { IconCloseS } from '@remember-web/icon';\nimport { contents000, contents999 } from '@remember-web/mixin';\nimport { isSSR } from '@remember-web/shared';\nimport { type PropsWithChildren, useState } from 'react';\n\nimport { Arrow, CloseButton, TooltipContent, TooltipContentWrapper, TooltipTriggerWrapper } from './styles';\nimport {\n type TooltipProps,\n type TooltipSize,\n type TooltipType,\n isLargeSizeProps,\n isStaticTypeProps,\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 <TooltipContentWrapper $zIndex={zIndex}>\n <TooltipContent\n $size={size}\n $maxWidth={maxWidth}\n $backgroundColor={backgroundColor}\n $contentColor={contentColor}\n $textAlign={textAlign}\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 <Arrow\n width={14}\n height={8}\n color={backgroundColor}\n />\n )}\n </TooltipContent>\n </TooltipContentWrapper>\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","$zIndex","$size","$maxWidth","$backgroundColor","$contentColor","$textAlign","sideOffset","onPointerDownOutside","onClickOutside","collisionPadding","onClick","width","height","color"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAa;AAiBb;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;;AAGlCK;;AAEnBC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAvB;AACAwB;AACE;;AAEA;AACAC;;AAEFC;AACAC;AAIEA;;;;;;AAK4Cf;AAC5B;AAKdgB;AACAC;AACAC;AAAuB;;;AAIP;;AAER;AAG1B;;"}
|
|
@@ -6,7 +6,7 @@ import { IconCloseS } from '@remember-web/icon';
|
|
|
6
6
|
import { contents000, contents999 } from '@remember-web/mixin';
|
|
7
7
|
import { isSSR } from '@remember-web/shared';
|
|
8
8
|
import { useState } from 'react';
|
|
9
|
-
import { TooltipTriggerWrapper, TooltipContentWrapper, TooltipContent, CloseButton } from './styles.esm.js';
|
|
9
|
+
import { TooltipTriggerWrapper, TooltipContentWrapper, TooltipContent, CloseButton, Arrow } from './styles.esm.js';
|
|
10
10
|
import { isStaticTypeProps, isLargeSizeProps } from './types.esm.js';
|
|
11
11
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
12
12
|
|
|
@@ -96,7 +96,7 @@ function Tooltip(_ref) {
|
|
|
96
96
|
return _setOpen(false);
|
|
97
97
|
},
|
|
98
98
|
children: /*#__PURE__*/jsx(IconCloseS, {})
|
|
99
|
-
}), isLargeSizeProps(props) && props.hasArrow && /*#__PURE__*/jsx(
|
|
99
|
+
}), isLargeSizeProps(props) && props.hasArrow && /*#__PURE__*/jsx(Arrow, {
|
|
100
100
|
width: 14,
|
|
101
101
|
height: 8,
|
|
102
102
|
color: backgroundColor
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":["../../../../src/Floating/Tooltip/index.tsx"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { IconCloseS } from '@remember-web/icon';\nimport { contents000, contents999 } from '@remember-web/mixin';\nimport { isSSR } from '@remember-web/shared';\nimport { type PropsWithChildren, useState } from 'react';\n\nimport { CloseButton, TooltipContent, TooltipContentWrapper, TooltipTriggerWrapper } from './styles';\nimport {\n type TooltipProps,\n type TooltipSize,\n type TooltipType,\n isLargeSizeProps,\n isStaticTypeProps,\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 <TooltipContentWrapper $zIndex={zIndex}>\n <TooltipContent\n $size={size}\n $maxWidth={maxWidth}\n $backgroundColor={backgroundColor}\n $contentColor={contentColor}\n $textAlign={textAlign}\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 <
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":["../../../../src/Floating/Tooltip/index.tsx"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { IconCloseS } from '@remember-web/icon';\nimport { contents000, contents999 } from '@remember-web/mixin';\nimport { isSSR } from '@remember-web/shared';\nimport { type PropsWithChildren, useState } from 'react';\n\nimport { Arrow, CloseButton, TooltipContent, TooltipContentWrapper, TooltipTriggerWrapper } from './styles';\nimport {\n type TooltipProps,\n type TooltipSize,\n type TooltipType,\n isLargeSizeProps,\n isStaticTypeProps,\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 <TooltipContentWrapper $zIndex={zIndex}>\n <TooltipContent\n $size={size}\n $maxWidth={maxWidth}\n $backgroundColor={backgroundColor}\n $contentColor={contentColor}\n $textAlign={textAlign}\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 <Arrow\n width={14}\n height={8}\n color={backgroundColor}\n />\n )}\n </TooltipContent>\n </TooltipContentWrapper>\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","$zIndex","$size","$maxWidth","$backgroundColor","$contentColor","$textAlign","sideOffset","onPointerDownOutside","onClickOutside","collisionPadding","onClick","width","height","color"],"mappings":";;;;;;;;;;;;AAAa;AAiBb;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;;AAGlCK;;AAEnBC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAvB;AACAwB;AACE;;AAEA;AACAC;;AAEFC;AACAC;AAIEA;;;;;;AAK4Cf;AAC5B;AAKdgB;AACAC;AACAC;AAAuB;;;AAIP;;AAER;AAG1B;;"}
|
|
@@ -30,7 +30,7 @@ var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTempla
|
|
|
30
30
|
var RadixTooltip__namespace = /*#__PURE__*/_interopNamespace(RadixTooltip);
|
|
31
31
|
var styled__default = /*#__PURE__*/_interopDefault(styled);
|
|
32
32
|
|
|
33
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
|
|
33
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
|
|
34
34
|
var TOOLTIP_CONTENT_CONSTANTS = {
|
|
35
35
|
large: {
|
|
36
36
|
padding: '8px 12px',
|
|
@@ -56,7 +56,12 @@ var TooltipContent = styled__default.default(RadixTooltip__namespace.Content)(_t
|
|
|
56
56
|
return [styled.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default.default(["\n padding: ", ";\n ", ";\n background-color: ", ";\n color: ", ";\n text-align: ", ";\n "])), TOOLTIP_CONTENT_CONSTANTS[$size].padding, mixin.getTypographyStyles(TOOLTIP_CONTENT_CONSTANTS[$size].typography), $backgroundColor, $contentColor, $textAlign), typeof $maxWidth === 'string' ? "max-width: ".concat($maxWidth, ";") : "max-width: ".concat($maxWidth, "px;")];
|
|
57
57
|
});
|
|
58
58
|
var CloseButton = styled__default.default.button(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default.default(["\n all: unset;\n appearance: none;\n cursor: pointer;\n & > svg {\n display: block;\n }\n"])));
|
|
59
|
+
var Arrow = styled__default.default(RadixTooltip__namespace.Arrow)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default.default(["\n fill: ", ";\n"])), function (_ref3) {
|
|
60
|
+
var color = _ref3.color;
|
|
61
|
+
return color;
|
|
62
|
+
});
|
|
59
63
|
|
|
64
|
+
exports.Arrow = Arrow;
|
|
60
65
|
exports.CloseButton = CloseButton;
|
|
61
66
|
exports.TooltipContent = TooltipContent;
|
|
62
67
|
exports.TooltipContentWrapper = TooltipContentWrapper;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Floating/Tooltip/styles.ts"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport type { TypographyStyle } from '@remember-web/mixin';\nimport {\n contents000,\n contents999,\n getTypographyStyles,\n} from '@remember-web/mixin';\nimport styled, { css, keyframes } from 'styled-components';\n\nimport type { CSSProperties } from 'react';\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: 'UIBody2',\n },\n small: {\n padding: '4px 8px',\n typography: 'UIBody3',\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 TooltipContentWrapper = styled.div<{\n $zIndex?: CSSProperties['zIndex'];\n}>`\n [data-radix-popper-content-wrapper]{\n ${({ $zIndex }) => $zIndex && css` z-index: ${$zIndex} !important; `}\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}>`\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 ${({ $size, $maxWidth, $backgroundColor, $contentColor, $textAlign }) => [\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 `,\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","TooltipContentWrapper","CloseButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAa;AAcb;AAIEA;AACEC;AACAC;;AAEFC;AACEF;AACAC;AACF;AACF;AAEA;AASaE;AAQAC;AAIP;;AAAkE;AAIjE;AAgBH;;;;;;AAWD;AAGUC
|
|
1
|
+
{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Floating/Tooltip/styles.ts"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport type { TypographyStyle } from '@remember-web/mixin';\nimport {\n contents000,\n contents999,\n getTypographyStyles,\n} from '@remember-web/mixin';\nimport styled, { css, keyframes } from 'styled-components';\n\nimport type { CSSProperties } from 'react';\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: 'UIBody2',\n },\n small: {\n padding: '4px 8px',\n typography: 'UIBody3',\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 TooltipContentWrapper = styled.div<{\n $zIndex?: CSSProperties['zIndex'];\n}>`\n [data-radix-popper-content-wrapper]{\n ${({ $zIndex }) => $zIndex && css` z-index: ${$zIndex} !important; `}\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}>`\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 ${({ $size, $maxWidth, $backgroundColor, $contentColor, $textAlign }) => [\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 `,\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\nexport const Arrow = styled(RadixTooltip.Arrow)`\n fill: ${({color}) => color};\n`"],"names":["large","padding","typography","small","TooltipTriggerWrapper","TooltipContentWrapper","CloseButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAa;AAcb;AAIEA;AACEC;AACAC;;AAEFC;AACEF;AACAC;AACF;AACF;AAEA;AASaE;AAQAC;AAIP;;AAAkE;AAIjE;AAgBH;;;;;;AAWD;AAGUC;;AAUH;AAAO;AAAW;;;;;;"}
|
|
@@ -15,4 +15,7 @@ export declare const TooltipContent: import("styled-components").IStyledComponen
|
|
|
15
15
|
$textAlign?: TooltipTextAlign | undefined;
|
|
16
16
|
}>> & Omit<import("react").ForwardRefExoticComponent<RadixTooltip.TooltipContentProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
|
|
17
17
|
export declare const CloseButton: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>;
|
|
18
|
+
export declare const Arrow: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<RadixTooltip.TooltipArrowProps & import("react").RefAttributes<SVGSVGElement>, "ref"> & {
|
|
19
|
+
ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
|
|
20
|
+
}, never>> & Omit<import("react").ForwardRefExoticComponent<RadixTooltip.TooltipArrowProps & import("react").RefAttributes<SVGSVGElement>>, keyof import("react").Component<any, {}, any>>;
|
|
18
21
|
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Floating/Tooltip/styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,YAAY,MAAM,yBAAyB,CAAC;AASxD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAyB7D,eAAO,MAAM,qBAAqB,gNAMjC,CAAC;AAEF,eAAO,MAAM,qBAAqB;cACtB,aAAa,CAAC,QAAQ,CAAC;GAKlC,CAAC;AAEF,eAAO,MAAM,cAAc;;;WAClB,WAAW;eACP,MAAM,GAAG,MAAM;sBACR,MAAM;mBACT,MAAM;;sLAwBtB,CAAC;AAEF,eAAO,MAAM,WAAW,4NAOvB,CAAC"}
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Floating/Tooltip/styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,YAAY,MAAM,yBAAyB,CAAC;AASxD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAyB7D,eAAO,MAAM,qBAAqB,gNAMjC,CAAC;AAEF,eAAO,MAAM,qBAAqB;cACtB,aAAa,CAAC,QAAQ,CAAC;GAKlC,CAAC;AAEF,eAAO,MAAM,cAAc;;;WAClB,WAAW;eACP,MAAM,GAAG,MAAM;sBACR,MAAM;mBACT,MAAM;;sLAwBtB,CAAC;AAEF,eAAO,MAAM,WAAW,4NAOvB,CAAC;AAEF,eAAO,MAAM,KAAK;;0LAEjB,CAAA"}
|
|
@@ -4,7 +4,7 @@ import * as RadixTooltip from '@radix-ui/react-tooltip';
|
|
|
4
4
|
import { contents999, contents000, getTypographyStyles } from '@remember-web/mixin';
|
|
5
5
|
import styled, { keyframes, css } from 'styled-components';
|
|
6
6
|
|
|
7
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
|
|
7
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
|
|
8
8
|
var TOOLTIP_CONTENT_CONSTANTS = {
|
|
9
9
|
large: {
|
|
10
10
|
padding: '8px 12px',
|
|
@@ -30,6 +30,10 @@ var TooltipContent = styled(RadixTooltip.Content)(_templateObject5 || (_template
|
|
|
30
30
|
return [css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n padding: ", ";\n ", ";\n background-color: ", ";\n color: ", ";\n text-align: ", ";\n "])), TOOLTIP_CONTENT_CONSTANTS[$size].padding, getTypographyStyles(TOOLTIP_CONTENT_CONSTANTS[$size].typography), $backgroundColor, $contentColor, $textAlign), typeof $maxWidth === 'string' ? "max-width: ".concat($maxWidth, ";") : "max-width: ".concat($maxWidth, "px;")];
|
|
31
31
|
});
|
|
32
32
|
var CloseButton = styled.button(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n all: unset;\n appearance: none;\n cursor: pointer;\n & > svg {\n display: block;\n }\n"])));
|
|
33
|
+
var Arrow = styled(RadixTooltip.Arrow)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n fill: ", ";\n"])), function (_ref3) {
|
|
34
|
+
var color = _ref3.color;
|
|
35
|
+
return color;
|
|
36
|
+
});
|
|
33
37
|
|
|
34
|
-
export { CloseButton, TooltipContent, TooltipContentWrapper, TooltipTriggerWrapper };
|
|
38
|
+
export { Arrow, CloseButton, TooltipContent, TooltipContentWrapper, TooltipTriggerWrapper };
|
|
35
39
|
//# sourceMappingURL=styles.esm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.esm.js","sources":["../../../../src/Floating/Tooltip/styles.ts"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport type { TypographyStyle } from '@remember-web/mixin';\nimport {\n contents000,\n contents999,\n getTypographyStyles,\n} from '@remember-web/mixin';\nimport styled, { css, keyframes } from 'styled-components';\n\nimport type { CSSProperties } from 'react';\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: 'UIBody2',\n },\n small: {\n padding: '4px 8px',\n typography: 'UIBody3',\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 TooltipContentWrapper = styled.div<{\n $zIndex?: CSSProperties['zIndex'];\n}>`\n [data-radix-popper-content-wrapper]{\n ${({ $zIndex }) => $zIndex && css` z-index: ${$zIndex} !important; `}\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}>`\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 ${({ $size, $maxWidth, $backgroundColor, $contentColor, $textAlign }) => [\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 `,\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","TooltipContentWrapper","CloseButton"],"mappings":";;;;;;AAAa;AAcb;AAIEA;AACEC;AACAC;;AAEFC;AACEF;AACAC;AACF;AACF;AAEA;AASaE;AAQAC;AAIP;;AAAkE;AAIjE;AAgBH;;;;;;AAWD;AAGUC;;"}
|
|
1
|
+
{"version":3,"file":"styles.esm.js","sources":["../../../../src/Floating/Tooltip/styles.ts"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport type { TypographyStyle } from '@remember-web/mixin';\nimport {\n contents000,\n contents999,\n getTypographyStyles,\n} from '@remember-web/mixin';\nimport styled, { css, keyframes } from 'styled-components';\n\nimport type { CSSProperties } from 'react';\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: 'UIBody2',\n },\n small: {\n padding: '4px 8px',\n typography: 'UIBody3',\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 TooltipContentWrapper = styled.div<{\n $zIndex?: CSSProperties['zIndex'];\n}>`\n [data-radix-popper-content-wrapper]{\n ${({ $zIndex }) => $zIndex && css` z-index: ${$zIndex} !important; `}\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}>`\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 ${({ $size, $maxWidth, $backgroundColor, $contentColor, $textAlign }) => [\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 `,\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\nexport const Arrow = styled(RadixTooltip.Arrow)`\n fill: ${({color}) => color};\n`"],"names":["large","padding","typography","small","TooltipTriggerWrapper","TooltipContentWrapper","CloseButton"],"mappings":";;;;;;AAAa;AAcb;AAIEA;AACEC;AACAC;;AAEFC;AACEF;AACAC;AACF;AACF;AAEA;AASaE;AAQAC;AAIP;;AAAkE;AAIjE;AAgBH;;;;;;AAWD;AAGUC;;AAUH;AAAO;AAAW;;"}
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@ import { contents000, contents999 } from '@remember-web/mixin';
|
|
|
6
6
|
import { isSSR } from '@remember-web/shared';
|
|
7
7
|
import { type PropsWithChildren, useState } from 'react';
|
|
8
8
|
|
|
9
|
-
import { CloseButton, TooltipContent, TooltipContentWrapper, TooltipTriggerWrapper } from './styles';
|
|
9
|
+
import { Arrow, CloseButton, TooltipContent, TooltipContentWrapper, TooltipTriggerWrapper } from './styles';
|
|
10
10
|
import {
|
|
11
11
|
type TooltipProps,
|
|
12
12
|
type TooltipSize,
|
|
@@ -107,7 +107,7 @@ export default function Tooltip<
|
|
|
107
107
|
</CloseButton>
|
|
108
108
|
)}
|
|
109
109
|
{isLargeSizeProps(props) && props.hasArrow && (
|
|
110
|
-
<
|
|
110
|
+
<Arrow
|
|
111
111
|
width={14}
|
|
112
112
|
height={8}
|
|
113
113
|
color={backgroundColor}
|