wabi-sabi-ds
Version:
Abundance's Wabi Sabi Design System.
243 lines (219 loc) • 19.3 kB
JavaScript
'use strict';
var jsxRuntime = require('react/jsx-runtime');
var react = require('react');
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z$2 = ".Spinner-modules_spinner__zHsj0 {\n border: 8px solid #efeff7;\n border-top: 8px solid #575ea6;\n border-radius: 50%;\n padding: 0;\n height: 1.5rem;\n width: 1.5rem;\n animation: Spinner-modules_spin__TAuuY 1s linear infinite;\n}\n\n.Spinner-modules_size__small__SoCdc {\n border: 4px solid #efeff7;\n border-top: 4px solid #575ea6;\n height: 0.5rem;\n width: 0.5rem;\n}\n\n.Spinner-modules_size__medium__xEC9k {\n border: 8px solid #efeff7;\n border-top: 8px solid #575ea6;\n height: 1.5rem;\n width: 1.5rem;\n}\n\n.Spinner-modules_size__large__-KQMU {\n border: 16px solid #efeff7;\n border-top: 16px solid #575ea6;\n height: 2rem;\n width: 2rem;\n}\n\n@keyframes Spinner-modules_spin__TAuuY {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}";
var styles$2 = {"spinner":"Spinner-modules_spinner__zHsj0","spin":"Spinner-modules_spin__TAuuY","size__small":"Spinner-modules_size__small__SoCdc","size__medium":"Spinner-modules_size__medium__xEC9k","size__large":"Spinner-modules_size__large__-KQMU"};
styleInject(css_248z$2);
/**
* Spinner component
* @param size - small, medium and large
* @returns A element with a CSS animated spinner.
*/
function Spinner(_a) {
var _b = _a.size, size = _b === void 0 ? 'medium' : _b;
return (jsxRuntime.jsx("div", { "data-testid": "spinner", className: clsx(styles$2.spinner, styles$2["size__".concat(size)]) }));
}
function _extends() {
_extends = Object.assign ? Object.assign.bind() : function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
/**
* Set a given ref to a given value
* This utility takes care of different types of refs: callback refs and RefObject(s)
*/ function $6ed0406888f73fc4$var$setRef(ref, value) {
if (typeof ref === 'function') ref(value);
else if (ref !== null && ref !== undefined) ref.current = value;
}
/**
* A utility to compose multiple refs together
* Accepts callback refs and RefObject(s)
*/ function $6ed0406888f73fc4$export$43e446d32b3d21af(...refs) {
return (node)=>refs.forEach((ref)=>$6ed0406888f73fc4$var$setRef(ref, node)
)
;
}
/* -------------------------------------------------------------------------------------------------
* Slot
* -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$export$8c6ed5c666ac1360 = /*#__PURE__*/ react.forwardRef((props, forwardedRef)=>{
const { children: children , ...slotProps } = props;
const childrenArray = react.Children.toArray(children);
const slottable = childrenArray.find($5e63c961fc1ce211$var$isSlottable);
if (slottable) {
// the new element to render is the one passed as a child of `Slottable`
const newElement = slottable.props.children;
const newChildren = childrenArray.map((child)=>{
if (child === slottable) {
// because the new element will be the one rendered, we are only interested
// in grabbing its children (`newElement.props.children`)
if (react.Children.count(newElement) > 1) return react.Children.only(null);
return /*#__PURE__*/ react.isValidElement(newElement) ? newElement.props.children : null;
} else return child;
});
return /*#__PURE__*/ react.createElement($5e63c961fc1ce211$var$SlotClone, _extends({}, slotProps, {
ref: forwardedRef
}), /*#__PURE__*/ react.isValidElement(newElement) ? /*#__PURE__*/ react.cloneElement(newElement, undefined, newChildren) : null);
}
return /*#__PURE__*/ react.createElement($5e63c961fc1ce211$var$SlotClone, _extends({}, slotProps, {
ref: forwardedRef
}), children);
});
$5e63c961fc1ce211$export$8c6ed5c666ac1360.displayName = 'Slot';
/* -------------------------------------------------------------------------------------------------
* SlotClone
* -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$var$SlotClone = /*#__PURE__*/ react.forwardRef((props, forwardedRef)=>{
const { children: children , ...slotProps } = props;
if (/*#__PURE__*/ react.isValidElement(children)) return /*#__PURE__*/ react.cloneElement(children, {
...$5e63c961fc1ce211$var$mergeProps(slotProps, children.props),
ref: forwardedRef ? $6ed0406888f73fc4$export$43e446d32b3d21af(forwardedRef, children.ref) : children.ref
});
return react.Children.count(children) > 1 ? react.Children.only(null) : null;
});
$5e63c961fc1ce211$var$SlotClone.displayName = 'SlotClone';
/* -------------------------------------------------------------------------------------------------
* Slottable
* -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$export$d9f1ccf0bdb05d45 = ({ children: children })=>{
return /*#__PURE__*/ react.createElement(react.Fragment, null, children);
};
/* ---------------------------------------------------------------------------------------------- */ function $5e63c961fc1ce211$var$isSlottable(child) {
return /*#__PURE__*/ react.isValidElement(child) && child.type === $5e63c961fc1ce211$export$d9f1ccf0bdb05d45;
}
function $5e63c961fc1ce211$var$mergeProps(slotProps, childProps) {
// all child props should override
const overrideProps = {
...childProps
};
for(const propName in childProps){
const slotPropValue = slotProps[propName];
const childPropValue = childProps[propName];
const isHandler = /^on[A-Z]/.test(propName);
if (isHandler) {
// if the handler exists on both, we compose them
if (slotPropValue && childPropValue) overrideProps[propName] = (...args)=>{
childPropValue(...args);
slotPropValue(...args);
};
else if (slotPropValue) overrideProps[propName] = slotPropValue;
} else if (propName === 'style') overrideProps[propName] = {
...slotPropValue,
...childPropValue
};
else if (propName === 'className') overrideProps[propName] = [
slotPropValue,
childPropValue
].filter(Boolean).join(' ');
}
return {
...slotProps,
...overrideProps
};
}
var css_248z$1 = ".Button-modules_button__rrRy5 {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: unset;\n gap: 10px;\n border: none;\n border-radius: 8px;\n font-family: \"Bai Jamjuree\";\n font-weight: 500;\n font-size: 20px;\n line-height: 22px;\n height: auto;\n color: #ffffff;\n outline-color: #ffffff;\n transition: 0.2s linear;\n transition-property: color, background-color, border-color, outline-color;\n box-sizing: border-box;\n cursor: pointer;\n}\n.Button-modules_button__rrRy5:focus-visible {\n outline: 1px solid #ffffff;\n outline-offset: 1px;\n}\n.Button-modules_button__rrRy5:disabled, .Button-modules_button__rrRy5.Button-modules_disabled__vhDeA {\n cursor: default;\n pointer-events: none;\n}\n\n.Button-modules_variant__primary__jIqC3 {\n background: linear-gradient(270.06deg, #0ca584 1.15%, #726be6 99.99%, #41477d 99.99%);\n}\n.Button-modules_variant__primary__jIqC3:hover {\n background: linear-gradient(270deg, #00de8e -0.02%, #746de2 143.18%);\n}\n.Button-modules_variant__primary__jIqC3:active, .Button-modules_variant__primary__jIqC3.Button-modules_active__StvoA {\n background: linear-gradient(270deg, #139579 -0.02%, #41477d 99.98%);\n}\n.Button-modules_variant__primary__jIqC3:focus-visible {\n outline-color: #19c6a1;\n}\n.Button-modules_variant__primary__jIqC3.Button-modules_disabled__vhDeA {\n background: #f6f8f9;\n color: #bccdd4;\n}\n\n.Button-modules_variant__secondary-outline__e9v86 {\n color: #575ea6;\n background: none;\n border: 1px solid #575ea6;\n}\n.Button-modules_variant__secondary-outline__e9v86:hover {\n background: #575ea6;\n color: #ffffff;\n}\n.Button-modules_variant__secondary-outline__e9v86:active, .Button-modules_variant__secondary-outline__e9v86.Button-modules_active__StvoA {\n background: #2c2f53;\n}\n.Button-modules_variant__secondary-outline__e9v86:focus-visible {\n outline-color: #575ea6;\n}\n.Button-modules_variant__secondary-outline__e9v86:disabled, .Button-modules_variant__secondary-outline__e9v86.Button-modules_disabled__vhDeA {\n border-color: #bccdd4;\n color: #bccdd4;\n}\n\n.Button-modules_variant__secondary-outline-ghost__5K28p {\n border: 1px solid #ffffff;\n color: #ffffff;\n background: none;\n}\n.Button-modules_variant__secondary-outline-ghost__5K28p:hover {\n background: #2c2f53;\n border-color: #41477d;\n color: #ffffff;\n}\n.Button-modules_variant__secondary-outline-ghost__5K28p:active, .Button-modules_variant__secondary-outline-ghost__5K28p.Button-modules_active__StvoA {\n background: #16182a;\n}\n.Button-modules_variant__secondary-outline-ghost__5K28p:focus-visible {\n outline-color: #ffffff;\n}\n.Button-modules_variant__secondary-outline-ghost__5K28p:disabled, .Button-modules_variant__secondary-outline-ghost__5K28p.Button-modules_disabled__vhDeA {\n color: #2c414a;\n border-color: #2c414a;\n}\n\n.Button-modules_variant__tertiary__H5hpz {\n background: #ffffff;\n color: #575ea6;\n}\n.Button-modules_variant__tertiary__H5hpz:hover {\n background: #2c2f53;\n border-color: #41477d;\n color: #ffffff;\n border-radius: 8px;\n}\n.Button-modules_variant__tertiary__H5hpz:active, .Button-modules_variant__tertiary__H5hpz.Button-modules_active__StvoA {\n background: #16182a;\n border-color: #2c2f53;\n color: #ffffff;\n}\n.Button-modules_variant__tertiary__H5hpz:focus-visible {\n outline-color: #ffffff;\n}\n.Button-modules_variant__tertiary__H5hpz:disabled, .Button-modules_variant__tertiary__H5hpz.Button-modules_disabled__vhDeA {\n color: #bccdd4;\n}\n\n.Button-modules_variant__text__x5xCb {\n color: #575ea6;\n background: none;\n padding: 0 !important;\n text-decoration: none;\n}\n.Button-modules_variant__text__x5xCb:hover {\n color: #797eb8;\n text-decoration: underline;\n}\n.Button-modules_variant__text__x5xCb:active, .Button-modules_variant__text__x5xCb.Button-modules_active__StvoA {\n color: #2c2f53;\n}\n.Button-modules_variant__text__x5xCb:focus-visible {\n outline-color: #575ea6;\n outline-offset: 5px;\n border-radius: 4px;\n}\n.Button-modules_variant__text__x5xCb:disabled, .Button-modules_variant__text__x5xCb.Button-modules_disabled__vhDeA {\n color: #bcbfdb;\n}\n\n.Button-modules_variant__destructive__ruHtO {\n background: #ef4444;\n outline-color: #ef4444;\n color: #ffffff;\n}\n.Button-modules_variant__destructive__ruHtO:hover {\n background: #f87171;\n}\n.Button-modules_variant__destructive__ruHtO:active, .Button-modules_variant__destructive__ruHtO.Button-modules_active__StvoA {\n background: #b91c1c;\n}\n.Button-modules_variant__destructive__ruHtO:focus-visible {\n outline-color: #ef4444;\n}\n.Button-modules_variant__destructive__ruHtO:disabled {\n background: #fef2f2;\n color: #fecaca;\n}\n\n.Button-modules_size__56__HNRV9 {\n height: 56px;\n padding: 0 24px;\n border-radius: 12px;\n font-size: 20px;\n line-height: 22px;\n}\n\n.Button-modules_size__48__YaJ6j {\n height: 48px;\n padding: 0 22px;\n border-radius: 10px;\n font-size: 18px;\n line-height: 20px;\n}\n\n.Button-modules_size__40__tYL0- {\n height: 40px;\n padding: 0 16px;\n border-radius: 8px;\n font-size: 16px;\n line-height: 20px;\n}\n\n.Button-modules_size__32__F7Irp {\n height: 32px;\n padding: 0 16px;\n border-radius: 6px;\n font-size: 14px;\n line-height: 16px;\n}\n\n.Button-modules_size__24__r0mRe {\n height: 24px;\n padding: 0 12px;\n border-radius: 6px;\n font-size: 12px;\n line-height: 14px;\n}\n\n.Button-modules_size__16__CholD {\n height: 16px;\n padding: 0 8px;\n border-radius: 4px;\n font-size: 10px;\n line-height: 12px;\n}";
var styles$1 = {"button":"Button-modules_button__rrRy5","disabled":"Button-modules_disabled__vhDeA","variant__primary":"Button-modules_variant__primary__jIqC3","active":"Button-modules_active__StvoA","variant__secondary-outline":"Button-modules_variant__secondary-outline__e9v86","variant__secondary-outline-ghost":"Button-modules_variant__secondary-outline-ghost__5K28p","variant__tertiary":"Button-modules_variant__tertiary__H5hpz","variant__text":"Button-modules_variant__text__x5xCb","variant__destructive":"Button-modules_variant__destructive__ruHtO","size__56":"Button-modules_size__56__HNRV9","size__48":"Button-modules_size__48__YaJ6j","size__40":"Button-modules_size__40__tYL0-","size__32":"Button-modules_size__32__F7Irp","size__24":"Button-modules_size__24__r0mRe","size__16":"Button-modules_size__16__CholD"};
styleInject(css_248z$1);
/**
* Custom WabiSabi button component
*
* @param size - The size of the component ranging from '56', '48', '40', '32', '24' and '16'.
* @param variant - Visual style of the button: 'primary', 'secondary-outline',
* 'secondary-outline-ghost', 'tertiary', 'text', 'destructive'.
* @param disabled - Disable button interactions.
* @param active - Keep the button states as active (same when it is clicked).
* @param isLoading - Show a loading message and disable the button while true.
* @param loadingMessage - Set a custom loading message when isLoading.
*
* @returns A button element.
*/
function Button(props) {
var _a = props.size, size = _a === void 0 ? '48' : _a, _b = props.variant, variant = _b === void 0 ? 'primary' : _b, _c = props.active, active = _c === void 0 ? false : _c, _d = props.isLoading, isLoading = _d === void 0 ? false : _d, _e = props.disabled, disabled = _e === void 0 ? false : _e, _f = props.loadingMessage, loadingMessage = _f === void 0 ? 'Loading' : _f, children = props.children, onClick = props.onClick, className = props.className, asChild = props.asChild, rest = __rest(props, ["size", "variant", "active", "isLoading", "disabled", "loadingMessage", "children", "onClick", "className", "asChild"]);
var Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'button';
return (jsxRuntime.jsx(Component, __assign({}, rest, { className: clsx(styles$1.button, styles$1["variant__".concat(variant)], styles$1["size__".concat(size)], active && styles$1.active, disabled && styles$1.disabled, className), disabled: isLoading || disabled, onClick: onClick, children: isLoading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spinner, { size: "small" }), "".concat(loadingMessage, "\u2026")] })) : (children) })));
}
var css_248z = ".Link-modules_link__QdD8o {\n width: fit-content;\n text-decoration: none;\n}";
var styles = {"link":"Link-modules_link__QdD8o"};
styleInject(css_248z);
/**
* Custom WabiSabi link component.
*
* @param size - The size of the component ranging from '56', '48', '40', '32', '24' and '16'.
* @param variant - Visual style of the button:'text', 'primary', 'secondary-outline',
* 'secondary-outline-ghost', 'tertiary', 'destructive'.
* @param disabled - Disable link interactions.
* @param isLoading - Show a loading message and disable the button while true.
* @param loadingMessage - Set a custom loading message when isLoading.
*
* @returns A link element.
*/
function Link(props) {
var _a = props.size, size = _a === void 0 ? '48' : _a, _b = props.variant, variant = _b === void 0 ? 'text' : _b, _c = props.disabled, disabled = _c === void 0 ? false : _c, children = props.children, href = props.href, isLoading = props.isLoading, _d = props.loadingMessage, loadingMessage = _d === void 0 ? 'Loading' : _d, className = props.className, rest = __rest(props, ["size", "variant", "disabled", "children", "href", "isLoading", "loadingMessage", "className"]);
return (jsxRuntime.jsx(Button, { variant: variant, size: size, disabled: disabled, className: clsx(styles.link, className), asChild: true, children: jsxRuntime.jsx("a", __assign({}, rest, { href: disabled ? '/' : href, children: isLoading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spinner, { size: "small" }), "".concat(loadingMessage, "\u2026")] })) : (children) })) }));
}
exports.Button = Button;
exports.Link = Link;
//# sourceMappingURL=index.js.map