kwikid-components-react
Version:
KwikID's Component Library in React
152 lines (147 loc) • 4.88 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.KwikUIStyleTooltipParentContainer = exports.KwikUIStyleTooltipContainer = exports.KwikUIStyleTooltipChildren = void 0;
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _Tooltip = require("./Tooltip.definition");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
// Add subtle fade-in animation
const fadeIn = (0, _styledComponents.keyframes)`
from { opacity: 0; }
to { opacity: 1; }
`;
const KwikUIStyleTooltipParentContainer = exports.KwikUIStyleTooltipParentContainer = _styledComponents.default.div`
display: flex;
flex-direction: column;
position: relative;
width: fit-content;
max-width: 500px;
word-wrap: break-word;
`;
const KwikUIStyleTooltipContainer = exports.KwikUIStyleTooltipContainer = _styledComponents.default.div`
border: 1px solid #e2e8f0;
border-radius: var(--kwikui-radius-m);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
background-color: white;
display: flex;
flex-direction: column;
gap: var(--kwikui-radius-m);
width: max-content;
position: absolute;
padding: var(--kwikui-space-m);
z-index: 10000;
margin-top: -15px;
animation: ${fadeIn} 0.2s ease;
// Better text rendering
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
&::before {
content: "";
position: absolute;
background: transparent;
/* background-color: red; */
width: 100%;
height: 100%;
}
&::after {
content: "";
background-color: white;
position: absolute;
width: 10px;
height: 10px;
}
${_ref => {
let {
position
} = _ref;
switch (position) {
case _Tooltip.IKwikUITooltipPosition.BOTTOM:
return (0, _styledComponents.css)`
transform: translateX(-50%);
left: 50%;
top: calc(100% + 20px);
&::before {
bottom: 20%;
}
&::after {
right: 50%;
bottom: 100%;
border-top: 1px solid #e2e8f0;
border-right: 1px solid #e2e8f0;
margin: 0 -5px -5px 0;
transform: rotate(-45deg);
}
`;
case _Tooltip.IKwikUITooltipPosition.TOP:
return (0, _styledComponents.css)`
transform: translateX(-50%);
left: 50%;
bottom: calc(100% + 8px);
&::before {
top: 20%;
}
&::after {
right: 50%;
top: 100%;
border-bottom: 1px solid #e2e8f0;
border-right: 1px solid #e2e8f0;
margin: -5px -5px 0 0;
transform: rotate(45deg);
}
`;
case _Tooltip.IKwikUITooltipPosition.LEFT:
return (0, _styledComponents.css)`
right: calc(100% + 8px);
&::before {
left: 20%;
}
&::after {
left: 100%;
border-top: 1px solid #e2e8f0;
border-right: 1px solid #e2e8f0;
margin: 5px 5px -5px -5px;
transform: rotate(45deg);
}
`;
case _Tooltip.IKwikUITooltipPosition.RIGHT:
return (0, _styledComponents.css)`
left: calc(100% + 8px);
&::before {
right: 20%;
}
&::after {
right: 100%;
border-top: 1px solid #e2e8f0;
border-left: 1px solid #e2e8f0;
margin: 5px -5px -5px 0;
transform: rotate(-45deg);
}
`;
default:
return (0, _styledComponents.css)`
left: calc(100% + 8px);
&::before {
right: 20%;
}
&::after {
right: 100%;
border-top: 1px solid #e2e8f0;
border-left: 1px solid #e2e8f0;
margin: 5px -5px -5px 0;
transform: rotate(-45deg);
}
`;
}
}}
`;
const KwikUIStyleTooltipChildren = exports.KwikUIStyleTooltipChildren = _styledComponents.default.div`
position: relative;
z-index: 1;
max-width: 500px;
word-wrap: break-word;
font-size: 0.875rem;
line-height: 1.5;
color: #2d3748;
`;