kwikid-components-react
Version:
KwikID's Component Library in React
120 lines (117 loc) • 9.58 kB
JavaScript
"use strict";
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"));
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12;
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
// Animation keyframes
const fadeIn = (0, _styledComponents.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n from { opacity: 0; }\n to { opacity: 1; }\n"])));
// 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(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n border-radius: ", ";\n overflow: hidden;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);\n animation: ", " 0.5s ease-out;\n position: relative;\n margin: 0 auto;\n\n ", "\n"])), BORDER_RADIUS.md, fadeIn, _ref => {
let {
customStyles
} = _ref;
return customStyles && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n ", "\n "])), customStyles);
});
const KwikUIStyleCarouselWrapper = exports.KwikUIStyleCarouselWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n width: 100%;\n position: relative;\n background: linear-gradient(to bottom, #f8f9fa, #e9ecef);\n"])));
const KwikUIStyleCarouselContentWrapper = exports.KwikUIStyleCarouselContentWrapper = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n overflow: hidden;\n width: 100%;\n height: 100%;\n position: relative;\n\n &::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n pointer-events: none;\n box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.05);\n }\n"])));
const KwikUIStyleCarouselContent = exports.KwikUIStyleCarouselContent = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n display: flex;\n transition: all 350ms cubic-bezier(0.4, 0, 0.2, 1);\n -ms-overflow-style: none;\n scrollbar-width: none;\n height: 500px;\n width: 100%;\n position: relative;\n\n ::-webkit-scrollbar {\n display: none;\n }\n\n > * {\n width: 100%;\n object-fit: cover;\n flex-shrink: 0;\n flex-grow: 1;\n border-radius: ", ";\n overflow: hidden;\n opacity: 0.99; /* Prevents some rendering issues in certain browsers */\n }\n\n ", "\n"])), BORDER_RADIUS.sm, _ref2 => {
let {
customStyles
} = _ref2;
return customStyles && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n ", "\n "])), customStyles);
});
const KwikUIStyleCarouselControlsContainer = exports.KwikUIStyleCarouselControlsContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n padding: ", " ", " ", ";\n position: relative;\n width: 100%;\n gap: ", ";\n"])), SPACE.md, SPACE.md, SPACE.sm, SPACE.md);
const KwikUIStyleCarouselIndicatorsDiv = exports.KwikUIStyleCarouselIndicatorsDiv = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n display: flex;\n position: relative;\n justify-content: center;\n align-items: center;\n padding: ", " ", ";\n background: ", ";\n border-radius: ", ";\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);\n gap: ", ";\n min-height: 32px;\n"])), SPACE.xs, SPACE.sm, COLORS.background, BORDER_RADIUS.pill, SPACE.xs);
const KwikUIStyleCarouselIndicatorsIcons = exports.KwikUIStyleCarouselIndicatorsIcons = _styledComponents.default.div(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["\n width: 30px;\n height: 8px;\n border-radius: ", ";\n background: ", ";\n cursor: pointer;\n transition: all 0.2s ease-in-out;\n opacity: ", ";\n transform: ", ";\n\n &:hover {\n background: ", ";\n opacity: ", ";\n }\n\n &:focus {\n outline: none;\n box-shadow: 0 0 0 2px ", "40;\n }\n"])), BORDER_RADIUS.pill, _ref3 => {
let {
isActive
} = _ref3;
return isActive ? COLORS.primary : COLORS.lightGray;
}, _ref4 => {
let {
isActive
} = _ref4;
return isActive ? OPACITY.full : OPACITY.medium;
}, _ref5 => {
let {
isActive
} = _ref5;
return isActive ? "scaleX(1.2)" : "scaleX(1)";
}, _ref6 => {
let {
isActive
} = _ref6;
return isActive ? COLORS.primaryDark : COLORS.mediumGray;
}, OPACITY.high, COLORS.primaryDark);
const KwikUIStyleSlideCounter = exports.KwikUIStyleSlideCounter = _styledComponents.default.div(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.85rem;\n font-weight: 500;\n color: ", ";\n padding: ", " ", ";\n background: ", ";\n border-radius: ", ";\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);\n letter-spacing: 0.02em;\n min-width: 60px;\n height: 28px;\n\n &::before {\n content: \"\";\n display: inline-block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: ", ";\n margin-right: ", ";\n }\n"])), COLORS.textGray, SPACE.xs, SPACE.md, COLORS.background, BORDER_RADIUS.pill, COLORS.primary, SPACE.xs);
const ArrowBase = (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n background: ", ";\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n width: 40px;\n height: 40px;\n border-radius: 50%;\n z-index: 2;\n border: 1px solid rgba(229, 231, 235, 1);\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);\n transition: all 0.2s ease-in-out;\n color: ", ";\n\n &:hover {\n background: ", ";\n color: rgba(17, 24, 39, 1);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n }\n"])), COLORS.whiteFaded, COLORS.textGray, COLORS.white);
const KwikUIStyleArrowLeft = exports.KwikUIStyleArrowLeft = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n ", "\n left: ", ";\n opacity: ", ";\n visibility: ", ";\n transform: ", ";\n transition: all 0.3s ease-in-out;\n"])), ArrowBase, SPACE.md, _ref7 => {
let {
currentIndex
} = _ref7;
return currentIndex > 0 ? OPACITY.full : 0;
}, _ref8 => {
let {
currentIndex
} = _ref8;
return currentIndex > 0 ? "visible" : "hidden";
}, _ref9 => {
let {
currentIndex
} = _ref9;
return currentIndex > 0 ? "translateY(-50%) translateX(0)" : "translateY(-50%) translateX(-10px)";
});
const KwikUIStyleArrowRight = exports.KwikUIStyleArrowRight = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n ", "\n right: ", ";\n opacity: ", ";\n visibility: ", ";\n transform: ", ";\n transition: all 0.3s ease-in-out;\n"])), ArrowBase, SPACE.md, _ref0 => {
let {
currentIndex,
childrenLength
} = _ref0;
return currentIndex < childrenLength - 1 ? OPACITY.full : 0;
}, _ref1 => {
let {
currentIndex,
childrenLength
} = _ref1;
return currentIndex < childrenLength - 1 ? "visible" : "hidden";
}, _ref10 => {
let {
currentIndex,
childrenLength
} = _ref10;
return currentIndex < childrenLength - 1 ? "translateY(-50%) translateX(0)" : "translateY(-50%) translateX(10px)";
});