design-zystem 1.0.85 → 1.0.86
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/index.js +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -81,7 +81,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
81
81
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
82
82
|
|
|
83
83
|
"use strict";
|
|
84
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ Button: () => (/* binding */ Button)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _Button_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Button.css */ \"./src/Components/Button/Button.css\");\n/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! styled-components */ \"./node_modules/styled-components/dist/styled-components.browser.esm.js\");\n/* harmony import */ var _data_colors__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../data/colors */ \"./src/data/colors.js\");\nvar _excluded = [\"children\", \"isLoading\", \"onClick\", \"color\", \"fontWeight\"];\nvar _templateObject, _templateObject2;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\nfunction _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }\n\n\n\n\nvar textSizes = {\n xxs: \".4em\",\n xs: \".6em\",\n s: \".8em\",\n m: \"1em\",\n l: \"1.2em\",\n xl: \"1.4em\",\n xxl: \"1.6em\"\n};\nvar StyledButton = styled_components__WEBPACK_IMPORTED_MODULE_3__[\"default\"].button(_templateObject || (_templateObject = _taggedTemplateLiteral([\"\\n position: relative;\\n box-shadow: \", \";\\n background-color: \", \";\\n color: \", \";\\n border: \", \";\\n border-radius: 5px;\\n font-size: \", \";\\n font-weight: \", \";\\n width: \", \";\\n height: \", \";\\n padding: \", \";\\n margin: \", \";\\n cursor: \", \";\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n transition: color 0.5s, transform 0.3s ease-in-out;\\n overflow: hidden;\\n\\n &::before {\\n content: \\\"\\\";\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n width: 100%;\\n height: 100%;\\n background: rgba(255, 255, 255, 0.1);\\n transition: transform 0.4s ease, opacity 0.4s ease;\\n transform: translate(-50%, -50%) scale(0);\\n z-index: -1;\\n }\\n\\n &:hover::before {\\n transform: translate(-50%, -50%) scale(1);\\n }\\n\\n &:hover {\\n transform: scale(1.05);\\n }\\n\\n &:active {\\n transform: scale(0.95);\\n }\\n\\n &:active::before {\\n transform: translate(-50%, -50%) scale(0.8);\\n opacity: 0.7;\\n }\\n\"])), function (props) {\n return props.boxShadow || \"rgba(0, 0, 0, 0.16) 0px 1px 4px\";\n}, function (props) {\n return props.disabled ? \"grey\" : props.outline ? \"transparent\" : props.variant ? _data_colors__WEBPACK_IMPORTED_MODULE_2__[\"default\"][props.variant] : _data_colors__WEBPACK_IMPORTED_MODULE_2__[\"default\"][\"primary\"];\n}, function (props) {\n return props.outline ? _data_colors__WEBPACK_IMPORTED_MODULE_2__[\"default\"][props.variant] : \"white\";\n}, function (props) {\n return props.outline ? \"1px solid \".concat(_data_colors__WEBPACK_IMPORTED_MODULE_2__[\"default\"][props.variant]) : \"none\";\n}, function (props) {\n return textSizes[props.size] || props.size;\n}, function (props) {\n return props.fontWeight || \"700\";\n}, function (props) {\n return props.width || \"fit-content\";\n}, function (props) {\n return props.height || \"fit-content\";\n}, function (props) {\n return props.padding || \".7em 1em\";\n}, function (props) {\n return props.margin || \"0\";\n}, function (props) {\n return props.disabled || props.isLoading ? \"not-allowed\" : \"pointer\";\n});\nvar Loader = styled_components__WEBPACK_IMPORTED_MODULE_3__[\"default\"].span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([\"\\n border: 3px solid transparent;\\n border-top: 3px solid white;\\n border-radius: 50%;\\n width: 1.5em;\\n height: 1.5em;\\n animation: spin 0.6s linear infinite;\\n position: absolute;\\n transform: translate(-50%, -50%);\\n\\n @keyframes spin {\\n 0% {\\n transform: rotate(0deg);\\n }\\n 100% {\\n transform: rotate(360deg);\\n }\\n }\\n\"])));\nvar Button = function Button(props) {\n var children = props.children,\n isLoading = props.isLoading,\n onClick = props.onClick,\n color = props.color,\n fontWeight = props.fontWeight,\n otherProps = _objectWithoutProperties(props, _excluded);\n var buttonRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n\n // Handle ripple effect\n var handleRipple = function handleRipple(e) {\n var rect = buttonRef.current.getBoundingClientRect();\n var size = Math.max(rect.width, rect.height);\n var x = e.clientX - rect.left - size / 2;\n var y = e.clientY - rect.top - size / 2;\n var ripple = document.createElement(\"div\");\n ripple.className = \"ripple\";\n ripple.style.position = \"absolute\";\n ripple.style.width = ripple.style.height = \"\".concat(size, \"px\");\n ripple.style.left = \"\".concat(x, \"px\");\n ripple.style.top = \"\".concat(y, \"px\");\n ripple.style.borderRadius = \"50%\";\n ripple.style.backgroundColor = \"rgba(255, 255, 255, 0.5)\";\n ripple.style.pointerEvents = \"none\";\n buttonRef.current.appendChild(ripple);\n\n // Remove ripple after animation\n setTimeout(function () {\n ripple.remove();\n }, 600);\n };\n var handleClick = function handleClick(e) {\n handleRipple(e);\n if (onClick) onClick(e);\n };\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(StyledButton, _extends({\n ref: buttonRef,\n onClick: handleClick\n }, otherProps), isLoading && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Loader, null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", {\n style: {\n color: isLoading ? \"transparent\" : _data_colors__WEBPACK_IMPORTED_MODULE_2__[\"default\"][color],\n fontWeight: fontWeight\n }\n }, children));\n};\n\n//# sourceURL=webpack://YourLibraryName/./src/Components/Button/Button.jsx?");
|
|
84
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ Button: () => (/* binding */ Button)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _Button_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Button.css */ \"./src/Components/Button/Button.css\");\n/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! styled-components */ \"./node_modules/styled-components/dist/styled-components.browser.esm.js\");\n/* harmony import */ var _data_colors__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../data/colors */ \"./src/data/colors.js\");\nvar _excluded = [\"children\", \"isLoading\", \"onClick\", \"color\", \"fontWeight\"];\nvar _templateObject, _templateObject2;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\nfunction _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }\n\n\n\n\nvar textSizes = {\n xxs: \".4em\",\n xs: \".6em\",\n s: \".8em\",\n m: \"1em\",\n l: \"1.2em\",\n xl: \"1.4em\",\n xxl: \"1.6em\"\n};\nvar shouldForwardPropTableRow = function shouldForwardPropTableRow(prop) {\n return ![\"boxShadow\", \"outline\", \"colors\", \"size\", \"fontWeight\", \"width\", \"height\", \"padding\", \"margin\", \"variant\"].includes(prop);\n};\nvar StyledButton = styled_components__WEBPACK_IMPORTED_MODULE_3__[\"default\"].button.withConfig({\n shouldForwardProp: shouldForwardPropTableRow\n})(_templateObject || (_templateObject = _taggedTemplateLiteral([\"\\n position: relative;\\n box-shadow: \", \";\\n background-color: \", \";\\n color: \", \";\\n border: \", \";\\n border-radius: 5px;\\n font-size: \", \";\\n font-weight: \", \";\\n width: \", \";\\n height: \", \";\\n padding: \", \";\\n margin: \", \";\\n cursor: \", \";\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n transition: color 0.5s, transform 0.3s ease-in-out;\\n overflow: hidden;\\n\\n &::before {\\n content: \\\"\\\";\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n width: 100%;\\n height: 100%;\\n background: rgba(255, 255, 255, 0.1);\\n transition: transform 0.4s ease, opacity 0.4s ease;\\n transform: translate(-50%, -50%) scale(0);\\n z-index: -1;\\n }\\n\\n &:hover::before {\\n transform: translate(-50%, -50%) scale(1);\\n }\\n\\n &:hover {\\n transform: scale(1.05);\\n }\\n\\n &:active {\\n transform: scale(0.95);\\n }\\n\\n &:active::before {\\n transform: translate(-50%, -50%) scale(0.8);\\n opacity: 0.7;\\n }\\n\"])), function (props) {\n return props.boxShadow || \"rgba(0, 0, 0, 0.16) 0px 1px 4px\";\n}, function (props) {\n return props.disabled ? \"grey\" : props.outline ? \"transparent\" : props.variant ? _data_colors__WEBPACK_IMPORTED_MODULE_2__[\"default\"][props.variant] : _data_colors__WEBPACK_IMPORTED_MODULE_2__[\"default\"][\"primary\"];\n}, function (props) {\n return props.outline ? _data_colors__WEBPACK_IMPORTED_MODULE_2__[\"default\"][props.variant] : \"white\";\n}, function (props) {\n return props.outline ? \"1px solid \".concat(_data_colors__WEBPACK_IMPORTED_MODULE_2__[\"default\"][props.variant]) : \"none\";\n}, function (props) {\n return textSizes[props.size] || props.size;\n}, function (props) {\n return props.fontWeight || \"700\";\n}, function (props) {\n return props.width || \"fit-content\";\n}, function (props) {\n return props.height || \"fit-content\";\n}, function (props) {\n return props.padding || \".7em 1em\";\n}, function (props) {\n return props.margin || \"0\";\n}, function (props) {\n return props.disabled || props.isLoading ? \"not-allowed\" : \"pointer\";\n});\nvar Loader = styled_components__WEBPACK_IMPORTED_MODULE_3__[\"default\"].span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([\"\\n border: 3px solid transparent;\\n border-top: 3px solid white;\\n border-radius: 50%;\\n width: 1.5em;\\n height: 1.5em;\\n animation: spin 0.6s linear infinite;\\n position: absolute;\\n transform: translate(-50%, -50%);\\n\\n @keyframes spin {\\n 0% {\\n transform: rotate(0deg);\\n }\\n 100% {\\n transform: rotate(360deg);\\n }\\n }\\n\"])));\nvar Button = function Button(props) {\n var children = props.children,\n isLoading = props.isLoading,\n onClick = props.onClick,\n color = props.color,\n fontWeight = props.fontWeight,\n otherProps = _objectWithoutProperties(props, _excluded);\n var buttonRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n\n // Handle ripple effect\n var handleRipple = function handleRipple(e) {\n var rect = buttonRef.current.getBoundingClientRect();\n var size = Math.max(rect.width, rect.height);\n var x = e.clientX - rect.left - size / 2;\n var y = e.clientY - rect.top - size / 2;\n var ripple = document.createElement(\"div\");\n ripple.className = \"ripple\";\n ripple.style.position = \"absolute\";\n ripple.style.width = ripple.style.height = \"\".concat(size, \"px\");\n ripple.style.left = \"\".concat(x, \"px\");\n ripple.style.top = \"\".concat(y, \"px\");\n ripple.style.borderRadius = \"50%\";\n ripple.style.backgroundColor = \"rgba(255, 255, 255, 0.5)\";\n ripple.style.pointerEvents = \"none\";\n buttonRef.current.appendChild(ripple);\n\n // Remove ripple after animation\n setTimeout(function () {\n ripple.remove();\n }, 600);\n };\n var handleClick = function handleClick(e) {\n handleRipple(e);\n if (onClick) onClick(e);\n };\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(StyledButton, _extends({\n ref: buttonRef,\n onClick: handleClick\n }, otherProps), isLoading && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Loader, null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", {\n style: {\n color: isLoading ? \"transparent\" : _data_colors__WEBPACK_IMPORTED_MODULE_2__[\"default\"][color],\n fontWeight: fontWeight\n }\n }, children));\n};\n\n//# sourceURL=webpack://YourLibraryName/./src/Components/Button/Button.jsx?");
|
|
85
85
|
|
|
86
86
|
/***/ }),
|
|
87
87
|
|