kwikid-components-react
Version:
KwikID's Component Library in React
284 lines (272 loc) • 8.07 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.KwikUIStyleSlideCounter = exports.KwikUIStyleCarouselWrapper = exports.KwikUIStyleCarouselIndicatorsIcons = exports.KwikUIStyleCarouselIndicatorsDiv = exports.KwikUIStyleCarouselControlsContainer = exports.KwikUIStyleCarouselContentWrapper = exports.KwikUIStyleCarouselContent = exports.KwikUIStyleCarouselContainer = exports.KwikUIStyleArrowRight = exports.KwikUIStyleArrowLeft = void 0;
var _styledComponents = _interopRequireWildcard(require("styled-components"));
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; }
// Animation keyframes
const fadeIn = (0, _styledComponents.keyframes)`
from { opacity: 0; }
to { opacity: 1; }
`;
// CSS variables for consistent spacing and styling
const SPACE = {
xs: "0.25rem",
sm: "0.5rem",
md: "1rem",
lg: "1.5rem",
xl: "2rem"
};
const BORDER_RADIUS = {
sm: "4px",
md: "8px",
lg: "12px",
pill: "50px"
};
const COLORS = {
primary: "rgba(59, 130, 246, 0.9)",
primaryDark: "rgba(37, 99, 235, 1)",
lightGray: "rgba(209, 213, 219, 0.5)",
mediumGray: "rgba(156, 163, 175, 0.7)",
darkGray: "rgba(107, 114, 128, 0.8)",
textGray: "rgba(75, 85, 99, 1)",
white: "#ffffff",
whiteFaded: "rgba(255, 255, 255, 0.8)",
whiteTransparent: "rgba(255, 255, 255, 0.25)",
background: "rgba(249, 250, 251, 0.95)"
};
// Opacity constants to avoid magic numbers
const OPACITY = {
full: 1,
medium: 0.6,
high: 0.9
};
const KwikUIStyleCarouselContainer = exports.KwikUIStyleCarouselContainer = _styledComponents.default.div`
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
border-radius: ${BORDER_RADIUS.md};
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
animation: ${fadeIn} 0.5s ease-out;
position: relative;
margin: 0 auto;
${_ref => {
let {
customStyles
} = _ref;
return customStyles && (0, _styledComponents.css)`
${customStyles}
`;
}}
`;
const KwikUIStyleCarouselWrapper = exports.KwikUIStyleCarouselWrapper = _styledComponents.default.div`
display: flex;
width: 100%;
position: relative;
background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
`;
const KwikUIStyleCarouselContentWrapper = exports.KwikUIStyleCarouselContentWrapper = _styledComponents.default.div`
overflow: hidden;
width: 100%;
height: 100%;
position: relative;
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.05);
}
`;
const KwikUIStyleCarouselContent = exports.KwikUIStyleCarouselContent = _styledComponents.default.div`
display: flex;
transition: all 350ms cubic-bezier(0.4, 0, 0.2, 1);
-ms-overflow-style: none;
scrollbar-width: none;
height: 500px;
width: 100%;
position: relative;
::-webkit-scrollbar {
display: none;
}
> * {
width: 100%;
object-fit: cover;
flex-shrink: 0;
flex-grow: 1;
border-radius: ${BORDER_RADIUS.sm};
overflow: hidden;
opacity: 0.99; /* Prevents some rendering issues in certain browsers */
}
${_ref2 => {
let {
customStyles
} = _ref2;
return customStyles && (0, _styledComponents.css)`
${customStyles}
`;
}}
`;
const KwikUIStyleCarouselControlsContainer = exports.KwikUIStyleCarouselControlsContainer = _styledComponents.default.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: ${SPACE.md} ${SPACE.md} ${SPACE.sm};
position: relative;
width: 100%;
gap: ${SPACE.md};
`;
const KwikUIStyleCarouselIndicatorsDiv = exports.KwikUIStyleCarouselIndicatorsDiv = _styledComponents.default.div`
display: flex;
position: relative;
justify-content: center;
align-items: center;
padding: ${SPACE.xs} ${SPACE.sm};
background: ${COLORS.background};
border-radius: ${BORDER_RADIUS.pill};
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
gap: ${SPACE.xs};
min-height: 32px;
`;
const KwikUIStyleCarouselIndicatorsIcons = exports.KwikUIStyleCarouselIndicatorsIcons = _styledComponents.default.div`
width: 30px;
height: 8px;
border-radius: ${BORDER_RADIUS.pill};
background: ${_ref3 => {
let {
isActive
} = _ref3;
return isActive ? COLORS.primary : COLORS.lightGray;
}};
cursor: pointer;
transition: all 0.2s ease-in-out;
opacity: ${_ref4 => {
let {
isActive
} = _ref4;
return isActive ? OPACITY.full : OPACITY.medium;
}};
transform: ${_ref5 => {
let {
isActive
} = _ref5;
return isActive ? "scaleX(1.2)" : "scaleX(1)";
}};
&:hover {
background: ${_ref6 => {
let {
isActive
} = _ref6;
return isActive ? COLORS.primaryDark : COLORS.mediumGray;
}};
opacity: ${OPACITY.high};
}
&:focus {
outline: none;
box-shadow: 0 0 0 2px ${COLORS.primaryDark}40;
}
`;
const KwikUIStyleSlideCounter = exports.KwikUIStyleSlideCounter = _styledComponents.default.div`
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
font-weight: 500;
color: ${COLORS.textGray};
padding: ${SPACE.xs} ${SPACE.md};
background: ${COLORS.background};
border-radius: ${BORDER_RADIUS.pill};
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
letter-spacing: 0.02em;
min-width: 60px;
height: 28px;
&::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: ${COLORS.primary};
margin-right: ${SPACE.xs};
}
`;
const ArrowBase = (0, _styledComponents.css)`
background: ${COLORS.whiteFaded};
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border-radius: 50%;
z-index: 2;
border: 1px solid rgba(229, 231, 235, 1);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
transition: all 0.2s ease-in-out;
color: ${COLORS.textGray};
&:hover {
background: ${COLORS.white};
color: rgba(17, 24, 39, 1);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
`;
const KwikUIStyleArrowLeft = exports.KwikUIStyleArrowLeft = _styledComponents.default.div`
${ArrowBase}
left: ${SPACE.md};
opacity: ${_ref7 => {
let {
currentIndex
} = _ref7;
return currentIndex > 0 ? OPACITY.full : 0;
}};
visibility: ${_ref8 => {
let {
currentIndex
} = _ref8;
return currentIndex > 0 ? "visible" : "hidden";
}};
transform: ${_ref9 => {
let {
currentIndex
} = _ref9;
return currentIndex > 0 ? "translateY(-50%) translateX(0)" : "translateY(-50%) translateX(-10px)";
}};
transition: all 0.3s ease-in-out;
`;
const KwikUIStyleArrowRight = exports.KwikUIStyleArrowRight = _styledComponents.default.div`
${ArrowBase}
right: ${SPACE.md};
opacity: ${_ref10 => {
let {
currentIndex,
childrenLength
} = _ref10;
return currentIndex < childrenLength - 1 ? OPACITY.full : 0;
}};
visibility: ${_ref11 => {
let {
currentIndex,
childrenLength
} = _ref11;
return currentIndex < childrenLength - 1 ? "visible" : "hidden";
}};
transform: ${_ref12 => {
let {
currentIndex,
childrenLength
} = _ref12;
return currentIndex < childrenLength - 1 ? "translateY(-50%) translateX(0)" : "translateY(-50%) translateX(10px)";
}};
transition: all 0.3s ease-in-out;
`;