@worktif/purei
Version:
Work TIF Material UI Theme Provider and Customization Suite for React applications with dark mode support and dynamic color schemes
179 lines • 8.35 kB
JavaScript
;
/*
* Work TIF, Raman Marozau.
* All rights reserved.
* Copyright(c), 2025-present.
*
* Business Source License 1.1
*
* Copyright (C) 2025 Raman Marozau, raman@worktif.com
* Use of this software is governed by the Business Source License included in the LICENSE file and at www.mariadb.com/bsl11.
*
* Change Date: Never
* On the date above, in accordance with the Business Source License, use of this software will be governed by the open source license specified in the LICENSE file.
* Additional Use Grant: Free for personal and non-commercial research use only.
*
*
* SPDX-License-Identifier: BUSL-1.1
*/
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.GradientProfileCard = exports.GradientSalesCard = exports.MotionCard = exports.GradientCard = exports.LayeredShadowCard = exports.ThreeDCard = exports.InteractiveCard = void 0;
exports.CardProduct = CardProduct;
const React = __importStar(require("react"));
const material_1 = require("@mui/material");
/**
* Represents an interactive card component.
* Extends Card component with additional styling for hover effect.
*/
exports.InteractiveCard = (0, material_1.styled)(material_1.Card)(({ theme }) => ({
transition: 'transform 0.3s ease, box-shadow 0.3s ease',
borderRadius: theme.spacing(0.5),
'&:hover': {
transform: 'translateY(-5px)', // Subtle lift effect
boxShadow: '0px 10px 20px rgba(47, 72, 88, 0.2)', // Shadow with muted blue tint
},
}));
/**
* ThreeDCard component extends the Card component and adds 3D hover effect.
*
* It applies a box shadow and scale transformation when hovered over.
*/
exports.ThreeDCard = (0, material_1.styled)(material_1.Card)(({ theme }) => ({
boxShadow: '0px 6px 12px rgba(47, 72, 88, 0.1)', // Shadow with base tint
borderRadius: theme.spacing(0.5),
transition: 'box-shadow 0.3s ease, transform 0.3s ease',
'&:hover': {
transform: 'scale(1.02)',
boxShadow: '0px 12px 24px rgba(47, 72, 88, 0.2)', // Deeper shadow on hover
},
}));
/**
* Represents a styled card component with layered shadow effect.
* Inherits styles from Card component.
* @constant {Component} LayeredShadowCard
* @property {string} boxShadow - The box shadow applied to the card element.
* @property {string} transition - The transition effect applied to the card element for transform and box-shadow.
* @property {string} '&:hover' - The styles applied to the card element on hover.
* @property {string} '&:hover.transform' - The transform effect applied on hover.
* @property {string} '&:hover.boxShadow' - The box shadow applied to the card element on hover.
*/
exports.LayeredShadowCard = (0, material_1.styled)(material_1.Card)(({ theme }) => ({
boxShadow: '0px 4px 6px rgba(47, 72, 88, 0.1), 0px 8px 12px rgba(47, 72, 88, 0.15)', // Base tint
borderRadius: theme.spacing(0.5),
transition: 'transform 0.3s ease, box-shadow 0.3s ease',
'&:hover': {
transform: 'translateY(-5px)',
boxShadow: '0px 12px 18px rgba(47, 72, 88, 0.2), 0px 16px 24px rgba(47, 72, 88, 0.25)', // Deep accent
},
}));
exports.GradientCard = (0, material_1.styled)(material_1.Card)(({ theme, raised }) => ({
position: 'relative',
overflow: 'visible',
borderRadius: theme.spacing(0.5),
padding: theme.spacing(3),
backgroundColor: '#F2F6FF',
transform: raised ? 'scale(1.02)' : 'none',
transition: 'transform 0.3s ease, box-shadow 0.3s ease',
boxShadow: raised
? '0px 4px 16px rgba(0, 0, 0, 0.08), 0px 6px 12px rgba(0, 174, 255, 0.12)'
: '0px 2px 6px rgba(0, 0, 0, 0.20)',
'&:hover': {
transform: raised ? 'scale(1.04)' : 'scale(1.02)',
boxShadow: '0px 0px 28px 14px rgba(0, 174, 255, 0.5), 0px 0px 56px 28px rgba(136, 93, 255, 0.3)',
},
}));
exports.MotionCard = (0, material_1.styled)(material_1.Card)(({ theme, raised }) => ({
bgcolor: 'rgba(255, 255, 255, 0.05)',
backdropFilter: 'blur(10px)',
borderRadius: theme.spacing(0.5),
boxShadow: raised
? '0px 4px 16px rgba(0, 0, 0, 0.08), 0px 6px 12px rgba(0, 174, 255, 0.12)'
: '0px 2px 6px rgba(0, 0, 0, 0.20)',
transition: 'all 0.3s ease',
'&:hover': {
boxShadow: 10,
transform: 'scale(1.03)',
},
}));
exports.GradientSalesCard = (0, material_1.styled)(material_1.Card)(({ theme, raised }) => ({
position: 'relative',
overflow: 'visible',
borderRadius: theme.spacing(0.5),
transform: raised ? 'scale(1.02)' : 'none', // Subtle zoom
boxShadow: raised
? '0px 0px 20px 10px rgba(0, 174, 255, 0.3), 0px 0px 40px 20px rgba(136, 93, 255, 0.2)'
: '0px 4px 10px rgba(0, 0, 0, 0.1)',
transition: 'transform 0.3s ease, box-shadow 0.3s ease', // smooth animations
'&:hover': {
transform: raised ? 'scale(1.04)' : 'scale(1.02)', // Subtle zoom on hover
boxShadow: '0px 0px 20px 10px rgba(0, 174, 255, 0.3), 0px 0px 40px 20px rgba(136, 93, 255, 0.2)', // gradient shadow
},
}));
exports.GradientProfileCard = (0, material_1.styled)(material_1.Card)(({ theme }) => ({
position: 'relative',
overflow: 'visible',
borderRadius: theme.spacing(0.5),
boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.1)', // Basic card shadow
transition: 'transform 0.3s ease, box-shadow 0.3s ease', // smooth animations
'&:hover': {
transform: 'scale(1.02)', // Subtle zoom on hover
},
}));
/**
* Renders a card component with a styled container and optional children elements.
* The card includes custom styling such as background color, border radius,
* shadow effects, and responsive text alignment.
*
* @param {object} props - The properties object.
* @param {any} props.children - Elements or components to be rendered inside the card.
* @return {JSX.Element} The styled card component with the provided children.
*/
function CardProduct({ theme, action, children, seoSection, bgcolor, sx }) {
const isMobile = (0, material_1.useMediaQuery)((theme) => theme.breakpoints.down('sm'));
return (React.createElement(material_1.Card, { sx: (theme) => (Object.assign({ bgcolor: bgcolor === void 0 ? void 0 : bgcolor !== null && bgcolor !== void 0 ? bgcolor : '#1e1b34', borderRadius: 4, height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', boxShadow: '0 0 20px rgba(255,0,204,0.1)', '&:hover': { boxShadow: '0 0 25px rgba(255,0,204,0.4)' } }, (sx ? sx(theme) : {}))) },
React.createElement(material_1.CardContent, { sx: (theme) => ({
textAlign: 'left',
px: 2,
py: 2,
[theme.breakpoints.down('sm')]: {
px: 0,
textAlign: 'center',
},
}) },
React.createElement(material_1.Box, null, children)),
React.createElement(material_1.Box, { sx: (theme) => ({ px: 2, pb: 3, width: '100%' }) }, action)));
}
//# sourceMappingURL=index.js.map