bord-design-system 0.0.2 → 0.0.3
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/components/BordButton/BordButton.types.d.ts +5 -5
- package/dist/components/BordButton/BordButton.types.d.ts.map +1 -1
- package/dist/components/BordCellCard/components/BordCellHeader/BordCellHeader.d.ts.map +1 -1
- package/dist/components/BordInfoCard/BordInfoCard.d.ts +17 -0
- package/dist/components/BordInfoCard/BordInfoCard.d.ts.map +1 -0
- package/dist/components/BordInfoCard/BordInfoCard.types.d.ts +25 -0
- package/dist/components/BordInfoCard/BordInfoCard.types.d.ts.map +1 -0
- package/dist/components/BordMetricCard/BordMetricCard.d.ts +11 -0
- package/dist/components/BordMetricCard/BordMetricCard.d.ts.map +1 -0
- package/dist/components/BordOneToneIcon/BordOneToneIcon.d.ts +1 -1
- package/dist/components/BordOneToneIcon/BordOneToneIcon.d.ts.map +1 -1
- package/dist/components/BordTabBar/BordTabBar.d.ts +16 -0
- package/dist/components/BordTabBar/BordTabBar.d.ts.map +1 -0
- package/dist/components/BordTabs/BordTabs.type.d.ts.map +1 -1
- package/dist/components/BordTrelloRowFooterBadgeList/BordTrelloRowFooterBadgeList.d.ts +4 -3
- package/dist/components/BordTrelloRowFooterBadgeList/BordTrelloRowFooterBadgeList.d.ts.map +1 -1
- package/dist/components/index.d.ts +16 -10
- package/dist/components/index.d.ts.map +1 -1
- package/dist/hooks/index.d.ts +4 -0
- package/dist/hooks/index.d.ts.map +1 -0
- package/dist/hooks/useViewport.d.ts +46 -0
- package/dist/hooks/useViewport.d.ts.map +1 -0
- package/dist/index.d.ts +135 -12
- package/dist/index.esm.js +663 -14
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +667 -12
- package/dist/index.js.map +1 -1
- package/dist/utils/setOpacityToHex.d.ts +1 -1
- package/dist/utils/setOpacityToHex.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
2
|
-
import React, { useState, useEffect, createElement } from 'react';
|
|
2
|
+
import React, { useState, useEffect, createElement, createContext, isValidElement, useContext } from 'react';
|
|
3
3
|
|
|
4
4
|
const BordCircularFigmaAvatar = (props) => {
|
|
5
5
|
return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", children: [jsx("rect", { width: "31", height: "31", x: ".5", y: ".5", fill: "#262B39", rx: "15.5" }), jsx("rect", { width: "31", height: "31", x: ".5", y: ".5", stroke: "#626C82", rx: "15.5" }), jsx("path", { stroke: "#C6C7CB", "stroke-miterlimit": "10", strokeWidth: "1.2", d: "M15.9996 8.5h-2.475c-1.425 0-2.55 1.125-2.55 2.475s1.125 2.475 2.475 2.475h2.55m0-4.95v4.95m0-4.95h2.475c1.35 0 2.475 1.125 2.475 2.475s-1.125 2.475-2.475 2.475h-2.475m-2.475 5.025c-1.35 0-2.475-1.125-2.475-2.475s1.125-2.475 2.475-2.475h2.475v4.95m-2.475 0h2.475m-2.475 0c-1.35 0-2.475 1.125-2.475 2.475s1.125 2.475 2.475 2.475 2.475-1.125 2.475-2.475v-2.475m2.475-4.95c1.35 0 2.475 1.125 2.475 2.475s-1.125 2.475-2.475 2.475-2.475-1.125-2.475-2.475 1.125-2.475 2.475-2.475Z" })] }));
|
|
@@ -4086,8 +4086,8 @@ function styleInject(css, ref) {
|
|
|
4086
4086
|
}
|
|
4087
4087
|
}
|
|
4088
4088
|
|
|
4089
|
-
var css_248z$
|
|
4090
|
-
styleInject(css_248z$
|
|
4089
|
+
var css_248z$d = ".bordTextInput .labelSkeletonLoader,.bordTextInput label,.bordTextInputSkeletonLoader .labelSkeletonLoader,.bordTextInputSkeletonLoader label{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity));display:block;font-size:1.2rem;line-height:1.5rem;margin-bottom:.4rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.bordTextInput .inputContainer,.bordTextInput .inputSkeletonLoader,.bordTextInputSkeletonLoader .inputContainer,.bordTextInputSkeletonLoader .inputSkeletonLoader{--tw-border-opacity:1;align-items:center;background-color:transparent;border-color:rgb(98 108 130/var(--tw-border-opacity));border-radius:.6rem;border-style:solid;border-width:1px;display:flex;font-size:1.4rem;height:4rem;line-height:1.8rem;padding-left:1.6rem;padding-right:1.6rem}.bordTextInput .inputContainer .bordOneToneIcon,.bordTextInput .inputSkeletonLoader .bordOneToneIcon,.bordTextInputSkeletonLoader .inputContainer .bordOneToneIcon,.bordTextInputSkeletonLoader .inputSkeletonLoader .bordOneToneIcon{margin-right:.8rem}.bordTextInput .inputContainer .bordOneToneIcon svg path,.bordTextInput .inputSkeletonLoader .bordOneToneIcon svg path,.bordTextInputSkeletonLoader .inputContainer .bordOneToneIcon svg path,.bordTextInputSkeletonLoader .inputSkeletonLoader .bordOneToneIcon svg path{stroke:#626c82}.bordTextInput .inputContainer .passwordToggle,.bordTextInput .inputSkeletonLoader .passwordToggle,.bordTextInputSkeletonLoader .inputContainer .passwordToggle,.bordTextInputSkeletonLoader .inputSkeletonLoader .passwordToggle{cursor:pointer}.bordTextInput .inputContainer input,.bordTextInput .inputSkeletonLoader input,.bordTextInputSkeletonLoader .inputContainer input,.bordTextInputSkeletonLoader .inputSkeletonLoader input{--tw-text-opacity:1;background-color:transparent;color:rgb(98 108 130/var(--tw-text-opacity));height:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.bordTextInput .inputContainer input:focus,.bordTextInput .inputSkeletonLoader input:focus,.bordTextInputSkeletonLoader .inputContainer input:focus,.bordTextInputSkeletonLoader .inputSkeletonLoader input:focus{outline:2px solid transparent;outline-offset:2px}.bordTextInput .inputContainer input::-moz-placeholder,.bordTextInput .inputSkeletonLoader input::-moz-placeholder,.bordTextInputSkeletonLoader .inputContainer input::-moz-placeholder,.bordTextInputSkeletonLoader .inputSkeletonLoader input::-moz-placeholder{--tw-text-opacity:1;color:rgb(98 108 130/var(--tw-text-opacity))}.bordTextInput .inputContainer input::placeholder,.bordTextInput .inputSkeletonLoader input::placeholder,.bordTextInputSkeletonLoader .inputContainer input::placeholder,.bordTextInputSkeletonLoader .inputSkeletonLoader input::placeholder{--tw-text-opacity:1;color:rgb(98 108 130/var(--tw-text-opacity))}.bordTextInput .caption,.bordTextInputSkeletonLoader .caption{--tw-text-opacity:1;color:rgb(198 199 203/var(--tw-text-opacity));font-size:1rem;line-height:1.3rem;margin-top:.4rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.bordTextInput .errorText,.bordTextInputSkeletonLoader .errorText{--tw-text-opacity:1;color:rgb(252 84 61/var(--tw-text-opacity));margin-top:.4rem}.bordTextInput.filled .inputContainer,.bordTextInputSkeletonLoader.filled .inputContainer{--tw-border-opacity:1;border-color:rgb(98 108 130/var(--tw-border-opacity))}.bordTextInput.filled .inputContainer .bordOneToneIcon svg path,.bordTextInputSkeletonLoader.filled .inputContainer .bordOneToneIcon svg path{stroke:#fff}.bordTextInput.filled .inputContainer input,.bordTextInputSkeletonLoader.filled .inputContainer input{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.bordTextInput:hover .inputContainer,.bordTextInputSkeletonLoader:hover .inputContainer{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity))}.bordTextInput:hover .inputContainer .bordOneToneIcon svg path,.bordTextInputSkeletonLoader:hover .inputContainer .bordOneToneIcon svg path{stroke:#fff}.bordTextInput:hover .inputContainer input,.bordTextInputSkeletonLoader:hover .inputContainer input{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.bordTextInput:hover .inputContainer input::-moz-placeholder,.bordTextInputSkeletonLoader:hover .inputContainer input::-moz-placeholder{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.bordTextInput:hover .inputContainer input::placeholder,.bordTextInputSkeletonLoader:hover .inputContainer input::placeholder{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.bordTextInput:hover .inputContainer input:focus::-moz-placeholder,.bordTextInputSkeletonLoader:hover .inputContainer input:focus::-moz-placeholder{--tw-text-opacity:1;color:rgb(198 199 203/var(--tw-text-opacity))}.bordTextInput:hover .inputContainer input:focus::placeholder,.bordTextInputSkeletonLoader:hover .inputContainer input:focus::placeholder{--tw-text-opacity:1;color:rgb(198 199 203/var(--tw-text-opacity))}.bordTextInput.focused .inputContainer,.bordTextInputSkeletonLoader.focused .inputContainer{--tw-border-opacity:1;border-color:rgb(34 207 171/var(--tw-border-opacity))}.bordTextInput.focused .inputContainer .bordOneToneIcon svg path,.bordTextInputSkeletonLoader.focused .inputContainer .bordOneToneIcon svg path{stroke:#fff}.bordTextInput.error label,.bordTextInputSkeletonLoader.error label{--tw-text-opacity:1;color:rgb(252 84 61/var(--tw-text-opacity))}.bordTextInput.error .inputContainer,.bordTextInputSkeletonLoader.error .inputContainer{--tw-border-opacity:1;border-color:rgb(252 84 61/var(--tw-border-opacity))}.bordTextInput.error .inputContainer .bordOneToneIcon svg path,.bordTextInputSkeletonLoader.error .inputContainer .bordOneToneIcon svg path{stroke:#fc543d}.bordTextInput.error .inputContainer input,.bordTextInputSkeletonLoader.error .inputContainer input{--tw-text-opacity:1;color:rgb(252 84 61/var(--tw-text-opacity))}.bordTextInput.error .inputContainer input::-moz-placeholder,.bordTextInputSkeletonLoader.error .inputContainer input::-moz-placeholder{--tw-text-opacity:1;color:rgb(252 84 61/var(--tw-text-opacity))}.bordTextInput.error .inputContainer input::placeholder,.bordTextInputSkeletonLoader.error .inputContainer input::placeholder{--tw-text-opacity:1;color:rgb(252 84 61/var(--tw-text-opacity))}.bordTextInput.disabled,.bordTextInputSkeletonLoader.disabled{cursor:not-allowed}.bordTextInput.disabled label,.bordTextInputSkeletonLoader.disabled label{--tw-text-opacity:1;color:rgb(98 108 130/var(--tw-text-opacity));cursor:not-allowed}.bordTextInput.disabled .inputContainer,.bordTextInputSkeletonLoader.disabled .inputContainer{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(38 43 57/var(--tw-bg-opacity));border-color:rgb(98 108 130/var(--tw-border-opacity))}.bordTextInput.disabled .inputContainer .bordOneToneIcon svg path,.bordTextInputSkeletonLoader.disabled .inputContainer .bordOneToneIcon svg path{stroke:#626c82}.bordTextInput.disabled .inputContainer input,.bordTextInputSkeletonLoader.disabled .inputContainer input{--tw-text-opacity:1;color:rgb(98 108 130/var(--tw-text-opacity));cursor:not-allowed}.bordTextInput.disabled .inputContainer input::-moz-placeholder,.bordTextInputSkeletonLoader.disabled .inputContainer input::-moz-placeholder{--tw-text-opacity:1;color:rgb(98 108 130/var(--tw-text-opacity))}.bordTextInput.disabled .inputContainer input::placeholder,.bordTextInputSkeletonLoader.disabled .inputContainer input::placeholder{--tw-text-opacity:1;color:rgb(98 108 130/var(--tw-text-opacity))}.bordTextInput.disabled .inputContainer .passwordToggle,.bordTextInputSkeletonLoader.disabled .inputContainer .passwordToggle{cursor:not-allowed}.bordTextInput.disabled .caption,.bordTextInput.disabled .errorText,.bordTextInputSkeletonLoader.disabled .caption,.bordTextInputSkeletonLoader.disabled .errorText{--tw-text-opacity:1;color:rgb(98 108 130/var(--tw-text-opacity))}.bordTextInputSkeletonLoader .labelSkeletonLoader{border-radius:.4rem;height:1.4rem;width:66.666667%}.bordTextInputSkeletonLoader .inputSkeletonLoader{border-style:none}";
|
|
4090
|
+
styleInject(css_248z$d);
|
|
4091
4091
|
|
|
4092
4092
|
const BordTextInput = ({ placeholder, currentText = "", setCurrentText, standardSize = FORM_COMPONENTS_STANDARD_SIZES.MD, label, caption, className = "", isFilled, style, inputProps, labelProps, leftIconVariant, errorText = "", disabled, showSkeletonLoader = false, autoComplete = "off", hideErrorText, handleBlur, setIsPassword, isPassword, showPasswordIcon, }) => {
|
|
4093
4093
|
const [inputValue, setInputValue] = useState("");
|
|
@@ -4268,8 +4268,8 @@ const BordTwoToneIcon = ({ variant, standardSize = 24, customWidth, colorTones,
|
|
|
4268
4268
|
return (jsx("div", { className: "bordTwoToneIcon", style: { width: iconWidth }, children: React.createElement(twoToneIcon, { colorTones }) }));
|
|
4269
4269
|
};
|
|
4270
4270
|
|
|
4271
|
-
var css_248z$
|
|
4272
|
-
styleInject(css_248z$
|
|
4271
|
+
var css_248z$c = ".bordBackButton{align-items:center;cursor:pointer;display:flex;gap:.4rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.bordBackButton .buttonText{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity));font-size:1.2rem;line-height:1.6rem}";
|
|
4272
|
+
styleInject(css_248z$c);
|
|
4273
4273
|
|
|
4274
4274
|
/**
|
|
4275
4275
|
* @param {IBordBackButtonProps} props - The properties for the BordBackButton component.
|
|
@@ -4281,8 +4281,8 @@ const BordBackButton = ({ buttonText, onClick, ...rest }) => {
|
|
|
4281
4281
|
return (jsxs("div", { className: "bordBackButton", onClick: onClick, ...rest, children: [jsx(BordOneToneIcon, { variant: "arrowHeadLeft", customWidth: "1.2rem" }), jsx("div", { className: "buttonText", children: buttonText })] }));
|
|
4282
4282
|
};
|
|
4283
4283
|
|
|
4284
|
-
var css_248z$
|
|
4285
|
-
styleInject(css_248z$
|
|
4284
|
+
var css_248z$b = "@keyframes sonarPulse{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(2.5)}}.bordAttentionButton{align-items:center;cursor:pointer;display:flex;justify-content:center;position:relative}.bordAttentionButton .attentionDot{background-color:#fc3d5f;border-radius:15998.4rem;height:1.2rem;position:relative;width:1.2rem;z-index:2}.bordAttentionButton .attentionDot.active:after,.bordAttentionButton .attentionDot.active:before{animation:sonarPulse 2s ease-out infinite;background-color:#fc3d5f;border-radius:50%;content:\"\";height:100%;left:0;position:absolute;top:0;width:100%;z-index:-1}.bordAttentionButton .attentionDot.active:after{animation-delay:1s}";
|
|
4285
|
+
styleInject(css_248z$b);
|
|
4286
4286
|
|
|
4287
4287
|
/**
|
|
4288
4288
|
* @description A component that displays a pulsating red attention indicator dot.
|
|
@@ -4295,8 +4295,8 @@ const BordAttentionButton = (props) => {
|
|
|
4295
4295
|
return (jsx("div", { className: `bordAttentionButton ${customClassName}`, ...restProps, children: jsx("div", { className: `attentionDot ${isInactive ? '' : 'active'}` }) }));
|
|
4296
4296
|
};
|
|
4297
4297
|
|
|
4298
|
-
var css_248z$
|
|
4299
|
-
styleInject(css_248z$
|
|
4298
|
+
var css_248z$a = ".bordInfoBanner{align-items:center;border-radius:.6rem;display:flex;padding:1.2rem 1.6rem;width:-moz-fit-content;width:fit-content}.bordInfoBanner.withBackground{--tw-bg-opacity:1;background-color:rgb(38 43 57/var(--tw-bg-opacity))}.bordInfoBanner .infoBannerContent{align-items:center;display:flex;flex-wrap:wrap}.bordInfoBanner .infoBannerContent .infoBannerIcon{align-items:center;display:flex;justify-content:center}.bordInfoBanner .infoBannerContent .infoBannerTexts{align-items:center;display:flex;gap:.8rem;margin-left:5px}.bordInfoBanner .infoBannerContent .infoBannerTexts .infoBannerPrimaryText{--tw-text-opacity:1;color:rgb(111 115 125/var(--tw-text-opacity));font-size:1.4rem;font-weight:400;line-height:2rem;white-space:nowrap}.bordInfoBanner .infoBannerContent .infoBannerTexts .infoBannerRangeText{--tw-text-opacity:1;color:rgb(111 115 125/var(--tw-text-opacity));font-size:1.4rem;font-weight:700;line-height:2rem;margin-left:8px;white-space:nowrap}.bordInfoBanner .infoBannerContent .infoBannerDivider{--tw-bg-opacity:1;background-color:rgb(38 43 57/var(--tw-bg-opacity));border-radius:15998.4rem;height:2rem;margin-left:16px;margin-right:16px;width:.1rem}.bordInfoBanner .infoBannerContent .infoBannerAlert{align-items:center;display:flex;gap:.8rem}.bordInfoBanner .infoBannerContent .infoBannerAlert .alertLabel{--tw-text-opacity:1;color:rgb(111 115 125/var(--tw-text-opacity));font-size:1.4rem;font-weight:500;line-height:2rem;margin-left:8px}@media (max-width:640px){.bordInfoBanner{width:100%}.bordInfoBanner .infoBannerContent{align-items:flex-start;flex-wrap:wrap;gap:8px}.bordInfoBanner .infoBannerContent .infoBannerIcon,.bordInfoBanner .infoBannerContent .infoBannerTexts{flex-shrink:0}.bordInfoBanner .infoBannerContent .infoBannerDivider{display:none}.bordInfoBanner .infoBannerContent .infoBannerAlert{flex-basis:100%;justify-content:flex-start;width:100%}}";
|
|
4299
|
+
styleInject(css_248z$a);
|
|
4300
4300
|
|
|
4301
4301
|
/**
|
|
4302
4302
|
* @description An informational banner component with icon, text, and optional alert indicator.
|
|
@@ -4328,8 +4328,8 @@ const BordInfoBanner = (props) => {
|
|
|
4328
4328
|
return (jsx("div", { className: `bordInfoBanner ${backgroundClass}`, ...bordInfoBannerContainerProps, ...restProps, children: jsxs("div", { className: "infoBannerContent", ...bordInfoBannerContentProps, children: [jsx("div", { className: "infoBannerIcon", ...bordInfoBannerIconContainerProps, children: jsx(BordOneToneIcon, { ...bordOneToneIconProps }) }), jsxs("div", { className: "infoBannerTexts", ...bordInfoBannerTextsContainerProps, children: [primaryText && (jsx("span", { className: "infoBannerPrimaryText", ...bordInfoBannerPrimaryTextProps, children: primaryText })), rangeText && (jsx("span", { className: "infoBannerRangeText", ...bordInfoBannerRangeTextProps, children: rangeText }))] }), alertLabel && (jsxs(Fragment, { children: [jsx("div", { className: "infoBannerDivider", ...bordInfoBannerDividerProps }), jsxs("div", { className: "infoBannerAlert", ...bordInfoBannerAlertContainerProps, children: [jsx(BordAttentionButton, { isInactive: isAlertInactive }), jsx("span", { className: "alertLabel", ...bordInfoBannerAlertLabelProps, children: alertLabel })] })] }))] }) }));
|
|
4329
4329
|
};
|
|
4330
4330
|
|
|
4331
|
-
var css_248z = ".bordButton{align-items:center;border-radius:.6rem;border-style:none;display:flex;gap:.8rem;height:auto;justify-content:center}.bordButton.ht-42{height:4.2rem}.bordButton.rectangular{padding:1.2rem .8rem}.bordButton.squared{padding:.8rem}.bordButton.primary{--tw-bg-opacity:1;background-color:rgb(34 207 171/var(--tw-bg-opacity))}.bordButton.primary .textContainer{--tw-text-opacity:1;color:rgb(
|
|
4332
|
-
styleInject(css_248z);
|
|
4331
|
+
var css_248z$9 = ".bordButton{align-items:center;border-radius:.6rem;border-style:none;display:flex;gap:.8rem;height:auto;justify-content:center}.bordButton.ht-42{height:4.2rem}.bordButton.rectangular{padding:1.2rem .8rem}.bordButton.squared{padding:.8rem}.bordButton.primary{--tw-bg-opacity:1;background-color:rgb(34 207 171/var(--tw-bg-opacity))}.bordButton.primary .textContainer{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity));font-size:1.4rem;font-weight:500;line-height:1.823rem}.bordButton.primary:hover{--tw-bg-opacity:1;background-color:rgb(96 221 195/var(--tw-bg-opacity))}.bordButton.primary:hover .textContainer{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.bordButton.primary:disabled{--tw-bg-opacity:1;background-color:rgb(98 108 130/var(--tw-bg-opacity));cursor:not-allowed}.bordButton.primary:disabled .textContainer{--tw-text-opacity:1;color:rgb(38 43 57/var(--tw-text-opacity))}.bordButton.primary:disabled .bordOneToneIcon>svg>path{stroke:#262b39}.bordButton.primary.bordButtonOutlined{--tw-border-opacity:1;background-color:transparent;border-color:rgb(96 221 195/var(--tw-border-opacity));border-style:solid;border-width:1px}.bordButton.primary.bordButtonOutlined .bordOneToneIcon>svg>path{stroke:#22cfab}.bordButton.primary.bordButtonOutlined:hover{background:rgba(0,177,136,.1)}.bordButton.primary.bordButtonOutlined:disabled{--tw-border-opacity:1;border-color:rgb(98 108 130/var(--tw-border-opacity))}.bordButton.primary.bordButtonOutlined:disabled .textContainer{--tw-text-opacity:1;color:rgb(98 108 130/var(--tw-text-opacity))}.bordButton.primary.bordButtonOutlined:disabled .bordOneToneIcon>svg>path{stroke:#626c82}.bordButton.primary.bordButtonOutlined .textContainer{--tw-text-opacity:1;color:rgb(34 207 171/var(--tw-text-opacity))}.bordButton.primary .bordOneToneIcon>svg>path{stroke:#070f21}.bordButton.secondary{--tw-bg-opacity:1;background-color:rgb(27 32 47/var(--tw-bg-opacity))}.bordButton.secondary .textContainer{--tw-text-opacity:1;color:rgb(198 199 203/var(--tw-text-opacity));font-size:1.4rem;font-weight:500;line-height:1.823rem}.bordButton.secondary:hover{--tw-bg-opacity:1;background-color:rgb(38 43 57/var(--tw-bg-opacity))}.bordButton.secondary:hover .textContainer{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.bordButton.secondary:hover .bordOneToneIcon>svg>path{stroke:#fff}.bordButton.secondary:disabled{--tw-bg-opacity:1;background-color:rgb(27 32 47/var(--tw-bg-opacity))}.bordButton.secondary:disabled .textContainer{--tw-text-opacity:1;color:rgb(98 108 130/var(--tw-text-opacity))}.bordButton.secondary:disabled .bordOneToneIcon>svg>path{stroke:#626c82}.bordButton.secondary.bordButtonOutlined{--tw-border-opacity:1;background-color:transparent;border-color:rgb(38 43 57/var(--tw-border-opacity));border-style:solid;border-width:1px}.bordButton.secondary.bordButtonOutlined:hover{--tw-border-opacity:1;border-color:rgb(98 108 130/var(--tw-border-opacity))}.bordButton.secondary.bordButtonOutlined:hover .textContainer{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.bordButton.secondary.bordButtonOutlined:disabled{--tw-border-opacity:1;border-color:rgb(38 43 57/var(--tw-border-opacity))}.bordButton.secondary.bordButtonOutlined:disabled .textContainer{--tw-text-opacity:1;color:rgb(98 108 130/var(--tw-text-opacity))}.bordButton.secondary.bordButtonOutlined .textContainer{--tw-text-opacity:1;color:rgb(198 199 203/var(--tw-text-opacity))}.bordButton.secondary .bordOneToneIcon>svg>path{stroke:#c6c7cb}.bordButton.tertiary{--tw-border-opacity:1;background-color:transparent;border-color:rgb(38 43 57/var(--tw-border-opacity));border-style:solid;border-width:1px}.bordButton.tertiary .textContainer{--tw-text-opacity:1;color:rgb(198 199 203/var(--tw-text-opacity));font-size:1.2rem;font-weight:500;line-height:1.562rem}.bordButton.tertiary:hover .textContainer{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.bordButton.tertiary:hover .bordOneToneIcon>svg>path{stroke:#fff}.bordButton.tertiary:disabled .textContainer{--tw-text-opacity:1;color:rgb(98 108 130/var(--tw-text-opacity))}.bordButton.tertiary .bordOneToneIcon>svg>path{stroke:#c6c7cb}.bordButtonSkeletonLoader{background-color:transparent;border-radius:.6rem;height:4.2rem;pointer-events:none}";
|
|
4332
|
+
styleInject(css_248z$9);
|
|
4333
4333
|
|
|
4334
4334
|
/**
|
|
4335
4335
|
* @description A button component with different styles and loading state.
|
|
@@ -4350,7 +4350,11 @@ styleInject(css_248z);
|
|
|
4350
4350
|
* @returns {React.ReactElement} A button component with different styles and loading state.
|
|
4351
4351
|
*/
|
|
4352
4352
|
const BordButton = (props) => {
|
|
4353
|
-
const { formId, customWidth, bordButtonStyle, onClick, disabled, customClassName = "", customFontSize,
|
|
4353
|
+
const { formId, customWidth, bordButtonStyle, onClick, disabled, customClassName = "", customFontSize, isLoading, label, customHeight = "auto", modeButton = "primary", standardPaddingSize = "rectangular", buttonIconOneProps = {
|
|
4354
|
+
standardSize: 14,
|
|
4355
|
+
}, buttonIconTwoProps = {
|
|
4356
|
+
standardSize: 14,
|
|
4357
|
+
}, buttonIconOne, buttonIconTwo, } = props;
|
|
4354
4358
|
// Add a custom class based on the custom height
|
|
4355
4359
|
const customHeightStyle = customHeight !== "auto" ? `ht-${customHeight}` : "";
|
|
4356
4360
|
// Add a custom class based on the bordButtonStyle
|
|
@@ -4362,8 +4366,653 @@ const BordButton = (props) => {
|
|
|
4362
4366
|
// If the button is in a loading state, render a skeleton loader
|
|
4363
4367
|
if (isLoading)
|
|
4364
4368
|
return jsx("div", { className: skeletonLoaderClassnames });
|
|
4365
|
-
return (jsxs("button", { className: `bordButton ${standardPaddingSize} ${customClassName} ${buttonOutlineStyle} ${customWidth} ${customHeightStyle} ${styleModeButton}`, form: formId, onClick: onClick, disabled: disabled, ...props, children: [buttonIconOne && (jsx(
|
|
4369
|
+
return (jsxs("button", { className: `bordButton ${standardPaddingSize} ${customClassName} ${buttonOutlineStyle} ${customWidth} ${customHeightStyle} ${styleModeButton}`, form: formId, onClick: onClick, disabled: disabled, ...props, children: [buttonIconOneProps && buttonIconOne && (jsx(BordOneToneIcon, { ...buttonIconOneProps, variant: buttonIconOne })), label && (jsx("div", { className: 'textContainer', style: { fontSize: customFontSize }, children: label })), buttonIconTwoProps && buttonIconTwo && (jsx(BordOneToneIcon, { ...buttonIconTwoProps, variant: buttonIconTwo }))] }));
|
|
4370
|
+
};
|
|
4371
|
+
|
|
4372
|
+
var css_248z$8 = ".bordTabs{--tw-border-opacity:1;border-bottom-width:1px;border-color:rgb(38 43 57/var(--tw-border-opacity));display:flex}";
|
|
4373
|
+
styleInject(css_248z$8);
|
|
4374
|
+
|
|
4375
|
+
const TabsContext = createContext({
|
|
4376
|
+
activeTab: undefined,
|
|
4377
|
+
setActiveTab: () => { },
|
|
4378
|
+
});
|
|
4379
|
+
const BordTabs = ({ value, children, defaultValue, textColor, onChange }) => {
|
|
4380
|
+
const [activeTab, setActiveTab] = useState(defaultValue);
|
|
4381
|
+
const handleSetActive = (value) => {
|
|
4382
|
+
setActiveTab(value);
|
|
4383
|
+
onChange?.(value);
|
|
4384
|
+
};
|
|
4385
|
+
return (jsx(TabsContext.Provider, { value: { activeTab: value ?? activeTab, textColor, setActiveTab: handleSetActive }, children: jsx("div", { className: "bordTabs", children: children }) }));
|
|
4386
|
+
};
|
|
4387
|
+
|
|
4388
|
+
var css_248z$7 = ".bordCellHeader{align-items:flex-start;display:flex;gap:1.2rem}.bordCellHeader .cellHeaderIcon{align-items:center;display:flex;font-size:2.4rem;justify-content:center;line-height:3.2rem}.bordCellHeader .cellHeaderContent{display:flex;flex-direction:column;gap:.4rem}.bordCellHeader .cellHeaderContent .cellHeaderTitleContainer{align-items:center;display:flex;gap:.8rem}.bordCellHeader .cellHeaderContent .cellHeaderTitle{--tw-text-opacity:1;color:rgb(7 15 33/var(--tw-text-opacity));font-size:1.6rem;font-weight:700;line-height:2.4rem}.bordCellHeader .cellHeaderContent .cellHeaderSubtitle{--tw-text-opacity:1;color:rgb(7 15 33/var(--tw-text-opacity));font-size:1.4rem;font-weight:400;line-height:2rem}.bordCellHeader .cellHeaderContent .cellHeaderDescription{--tw-text-opacity:1;color:rgb(198 199 203/var(--tw-text-opacity));font-size:1.2rem;font-weight:400;line-height:1.6rem}";
|
|
4389
|
+
styleInject(css_248z$7);
|
|
4390
|
+
|
|
4391
|
+
/**
|
|
4392
|
+
* @description A cell header component with icon, title, subtitle and description.
|
|
4393
|
+
* @prop {ReactNode} [icon] - The icon to display.
|
|
4394
|
+
* @prop {string} title - The title text.
|
|
4395
|
+
* @prop {string} [subtitle] - The subtitle text.
|
|
4396
|
+
* @prop {string} [description] - The description text.
|
|
4397
|
+
* @prop {string} [customClassName=""] - Add a custom class to the component.
|
|
4398
|
+
* @returns {React.ReactElement} A cell header component.
|
|
4399
|
+
*/
|
|
4400
|
+
const BordCellHeader = (props) => {
|
|
4401
|
+
const { icon, title, subtitle, description, customClassName = "", ...restProps } = props;
|
|
4402
|
+
return (jsx("div", { className: `bordCellHeader ${customClassName}`, ...restProps, children: jsxs("div", { className: "cellHeaderContent", children: [jsxs("div", { className: "cellHeaderTitleContainer", children: [icon && jsx("div", { className: "cellHeaderIcon", children: icon }), jsx("div", { className: "cellHeaderTitle", children: title })] }), subtitle && jsx("div", { className: "cellHeaderSubtitle", children: subtitle }), description && jsx("div", { className: "cellHeaderDescription", children: description })] }) }));
|
|
4403
|
+
};
|
|
4404
|
+
|
|
4405
|
+
var css_248z$6 = ".bordCellItem{display:flex;flex-direction:column;max-width:104px;min-width:104px}.bordCellItem .cellItemTitle{--tw-text-opacity:1;color:rgb(111 115 125/var(--tw-text-opacity));font-size:1.2rem;font-weight:400;line-height:1.6rem;margin-bottom:.8rem}.bordCellItem .cellItemContent{align-items:center;display:flex;gap:.8rem}.bordCellItem .cellItemContent .cellItemIcon{align-items:center;display:flex;font-size:1.6rem;justify-content:center;line-height:2.4rem}.bordCellItem .cellItemContent .cellItemLabel{--tw-text-opacity:1;color:rgb(7 15 33/var(--tw-text-opacity));font-size:1.2rem;font-weight:400;line-height:1.6rem}@media (max-width:640px){.bordCellItem{align-items:center;flex-direction:row;gap:7px}.bordCellItem .cellItemTitle{margin-bottom:0}.bordCellItem .cellItemContent{flex:1 1 0%}}";
|
|
4406
|
+
styleInject(css_248z$6);
|
|
4407
|
+
|
|
4408
|
+
/**
|
|
4409
|
+
* @description A cell item component with optional title, icon and label.
|
|
4410
|
+
* @prop {string} [title] - Optional title text to show above the item.
|
|
4411
|
+
* @prop {ReactNode} [icon] - The icon to display (can be emoji, component, etc).
|
|
4412
|
+
* @prop {string} label - The label text to display.
|
|
4413
|
+
* @prop {string} [customClassName=""] - Add a custom class to the component.
|
|
4414
|
+
* @returns {React.ReactElement} A cell item component.
|
|
4415
|
+
*/
|
|
4416
|
+
const BordCellItem = (props) => {
|
|
4417
|
+
const { title, icon, label, customClassName = "", ...restProps } = props;
|
|
4418
|
+
return (jsxs("div", { className: `bordCellItem ${customClassName}`, ...restProps, children: [title && jsx("div", { className: "cellItemTitle", children: title }), jsxs("div", { className: "cellItemContent", children: [icon && jsx("div", { className: "cellItemIcon", children: icon }), jsx("span", { className: "cellItemLabel", children: label })] })] }));
|
|
4419
|
+
};
|
|
4420
|
+
|
|
4421
|
+
/**
|
|
4422
|
+
* Breakpoints basados en Tailwind
|
|
4423
|
+
* xs: 400px
|
|
4424
|
+
* sm: 640px
|
|
4425
|
+
* md: 768px
|
|
4426
|
+
* lg: 1024px
|
|
4427
|
+
* xl: 1440px
|
|
4428
|
+
* 2xl: 1920px
|
|
4429
|
+
*/
|
|
4430
|
+
const BREAKPOINTS = {
|
|
4431
|
+
xs: 400,
|
|
4432
|
+
sm: 640,
|
|
4433
|
+
md: 768,
|
|
4434
|
+
lg: 1024,
|
|
4435
|
+
xl: 1440,
|
|
4436
|
+
"2xl": 1920,
|
|
4437
|
+
};
|
|
4438
|
+
/**
|
|
4439
|
+
* Custom hook para detectar el tamaño del viewport y breakpoints de Tailwind
|
|
4440
|
+
* @returns {ViewportInfo} Información sobre el viewport actual
|
|
4441
|
+
*
|
|
4442
|
+
* @example
|
|
4443
|
+
* const { isMobile, isTablet, isDesktop, width, breakpoint } = useViewport();
|
|
4444
|
+
*
|
|
4445
|
+
* if (isMobile) {
|
|
4446
|
+
* // Renderizar versión mobile
|
|
4447
|
+
* }
|
|
4448
|
+
*/
|
|
4449
|
+
function useViewport() {
|
|
4450
|
+
const [viewport, setViewport] = useState(() => {
|
|
4451
|
+
const width = typeof window !== "undefined" ? window.innerWidth : 0;
|
|
4452
|
+
const height = typeof window !== "undefined" ? window.innerHeight : 0;
|
|
4453
|
+
return getViewportInfo(width, height);
|
|
4454
|
+
});
|
|
4455
|
+
useEffect(() => {
|
|
4456
|
+
// Función para actualizar el viewport
|
|
4457
|
+
const handleResize = () => {
|
|
4458
|
+
setViewport(getViewportInfo(window.innerWidth, window.innerHeight));
|
|
4459
|
+
};
|
|
4460
|
+
// Agregar listener
|
|
4461
|
+
window.addEventListener("resize", handleResize);
|
|
4462
|
+
// Cleanup
|
|
4463
|
+
return () => {
|
|
4464
|
+
window.removeEventListener("resize", handleResize);
|
|
4465
|
+
};
|
|
4466
|
+
}, []);
|
|
4467
|
+
return viewport;
|
|
4468
|
+
}
|
|
4469
|
+
/**
|
|
4470
|
+
* Obtiene la información del viewport basado en el ancho y alto
|
|
4471
|
+
*/
|
|
4472
|
+
function getViewportInfo(width, height) {
|
|
4473
|
+
const isXs = width >= BREAKPOINTS.xs;
|
|
4474
|
+
const isSm = width >= BREAKPOINTS.sm;
|
|
4475
|
+
const isMd = width >= BREAKPOINTS.md;
|
|
4476
|
+
const isLg = width >= BREAKPOINTS.lg;
|
|
4477
|
+
const isXl = width >= BREAKPOINTS.xl;
|
|
4478
|
+
const is2Xl = width >= BREAKPOINTS["2xl"];
|
|
4479
|
+
// Determinar el breakpoint actual
|
|
4480
|
+
let breakpoint = "base";
|
|
4481
|
+
if (is2Xl)
|
|
4482
|
+
breakpoint = "2xl";
|
|
4483
|
+
else if (isXl)
|
|
4484
|
+
breakpoint = "xl";
|
|
4485
|
+
else if (isLg)
|
|
4486
|
+
breakpoint = "lg";
|
|
4487
|
+
else if (isMd)
|
|
4488
|
+
breakpoint = "md";
|
|
4489
|
+
else if (isSm)
|
|
4490
|
+
breakpoint = "sm";
|
|
4491
|
+
else if (isXs)
|
|
4492
|
+
breakpoint = "xs";
|
|
4493
|
+
// Categorías generales
|
|
4494
|
+
const isMobile = width < BREAKPOINTS.md; // < 768px
|
|
4495
|
+
const isTablet = width >= BREAKPOINTS.md && width < BREAKPOINTS.lg; // 768px - 1023px
|
|
4496
|
+
const isDesktop = width >= BREAKPOINTS.lg; // >= 1024px
|
|
4497
|
+
return {
|
|
4498
|
+
width,
|
|
4499
|
+
height,
|
|
4500
|
+
isMobile,
|
|
4501
|
+
isTablet,
|
|
4502
|
+
isDesktop,
|
|
4503
|
+
isXs,
|
|
4504
|
+
isSm,
|
|
4505
|
+
isMd,
|
|
4506
|
+
isLg,
|
|
4507
|
+
isXl,
|
|
4508
|
+
is2Xl,
|
|
4509
|
+
breakpoint,
|
|
4510
|
+
};
|
|
4511
|
+
}
|
|
4512
|
+
|
|
4513
|
+
var css_248z$5 = ".badgeContainer{--tw-text-opacity:1;border-radius:2.4rem;color:rgb(255 255 255/var(--tw-text-opacity));width:-moz-max-content;width:max-content}.badgeContainer.defaultStyles{--tw-bg-opacity:1;background-color:rgb(38 43 57/var(--tw-bg-opacity));padding:.4rem .8rem}.badgeContainer.gradientStyles{--tw-gradient-from:#22cfab var(--tw-gradient-from-position);--tw-gradient-to:rgba(34,207,171,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);--tw-gradient-to:#0057a7 var(--tw-gradient-to-position);background-image:linear-gradient(to right,var(--tw-gradient-stops));padding:.1rem}.badgeContainer .gradientComponentStyles{--tw-bg-opacity:1;background-color:rgb(28 50 59/var(--tw-bg-opacity));border-radius:2.4rem;height:100%;padding:.4rem .8rem;width:100%}.badgeContainer.bordBadge{display:flex;flex-direction:column;font-size:12px;height:24px;justify-content:center;min-width:24px;text-align:center}.badgeContainer.defaultBordBadge{--tw-border-opacity:1;--tw-text-opacity:1;background-color:transparent;border-color:rgb(38 43 57/var(--tw-border-opacity));border-width:1px;color:rgb(198 199 203/var(--tw-text-opacity))}.badgeContainer.informativeBordBadge{--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(223 242 255/var(--tw-bg-opacity));color:rgb(64 150 240/var(--tw-text-opacity))}.badgeContainer.informativeBordBadge.filled{--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(64 150 240/var(--tw-bg-opacity));color:rgb(255 255 255/var(--tw-text-opacity))}.badgeContainer.informativeBordBadge.disabled{--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(230 230 230/var(--tw-bg-opacity));color:rgb(180 180 180/var(--tw-text-opacity))}.badgeContainer.successBordBadge{--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(234 249 244/var(--tw-bg-opacity));color:rgb(0 153 79/var(--tw-text-opacity))}.badgeContainer.successBordBadge.filled{--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(0 153 79/var(--tw-bg-opacity));color:rgb(255 255 255/var(--tw-text-opacity))}.badgeContainer.successBordBadge.disabled{--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(230 230 230/var(--tw-bg-opacity));color:rgb(180 180 180/var(--tw-text-opacity))}.badgeContainer.warningBordBadge{--tw-text-opacity:1;background-color:#f5dd281a;color:rgb(245 221 40/var(--tw-text-opacity))}.badgeContainer.warningBordBadge.filled{--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(245 221 40/var(--tw-bg-opacity));color:rgb(255 255 255/var(--tw-text-opacity))}.badgeContainer.warningBordBadge.disabled{--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(230 230 230/var(--tw-bg-opacity));color:rgb(180 180 180/var(--tw-text-opacity))}.badgeContainer.dangerBordBadge{--tw-text-opacity:1;background-color:#fc543d1a;color:rgb(222 7 46/var(--tw-text-opacity))}.badgeContainer.dangerBordBadge.filled{--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(222 7 46/var(--tw-bg-opacity));color:rgb(255 255 255/var(--tw-text-opacity))}.badgeContainer.dangerBordBadge.disabled{--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(230 230 230/var(--tw-bg-opacity));color:rgb(180 180 180/var(--tw-text-opacity))}";
|
|
4514
|
+
styleInject(css_248z$5);
|
|
4515
|
+
|
|
4516
|
+
var BADGE_VARIANTS;
|
|
4517
|
+
(function (BADGE_VARIANTS) {
|
|
4518
|
+
BADGE_VARIANTS["default"] = "default";
|
|
4519
|
+
BADGE_VARIANTS["gradient"] = "gradient";
|
|
4520
|
+
})(BADGE_VARIANTS || (BADGE_VARIANTS = {}));
|
|
4521
|
+
const BordBadge = ({ label = 'Label', variant = 'default', color, className = '', filled, disabled, }) => {
|
|
4522
|
+
const renderVariants = {
|
|
4523
|
+
[BADGE_VARIANTS.default]: {
|
|
4524
|
+
styles: 'defaultStyles',
|
|
4525
|
+
component: jsx("span", { children: label }),
|
|
4526
|
+
},
|
|
4527
|
+
[BADGE_VARIANTS.gradient]: {
|
|
4528
|
+
styles: 'gradientStyles',
|
|
4529
|
+
component: (jsx("div", { className: "gradientComponentStyles", children: jsx("span", { children: label }) })),
|
|
4530
|
+
},
|
|
4531
|
+
};
|
|
4532
|
+
return (jsx(Fragment, { children: jsx("div", { className: `badgeContainer ${renderVariants[variant]?.styles} ${className} ${color ? `bordBadge ${color}BordBadge ${filled ? 'filled' : ''}` : ''} ${disabled ? 'disabled' : ''}`, children: renderVariants[variant]?.component }) }));
|
|
4533
|
+
};
|
|
4534
|
+
|
|
4535
|
+
var css_248z$4 = ".bordTrelloRowFooterTagList{align-items:center;border-top-width:1px;display:flex;padding-top:12px}.bordTrelloRowFooterTagList .bordTrelloRowFooterTagListTitle{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity));font-size:1.4rem;line-height:2rem}.bordTrelloRowFooterTagList .bordTrelloRowFooterTagListTitle .bordTrelloRowFooterTagListTitleIcon{width:12px}.bordTrelloRowFooterTagList .bordTrelloRowFooterTagListTitle .bordTrelloRowFooterTagListTitleIcon svg path{stroke:#070f21}.bordTrelloRowFooterTagList .bordTrelloRowFooterTagListTitle .bordTrelloRowFooterTagListTitleText{font-size:12px}.bordTrelloRowFooterTagList .bordTrelloRowFooterTagListBadgeList{align-items:center;display:flex;flex-wrap:wrap;gap:8px;margin-left:8px}.bordTrelloRowFooterTagList .bordTrelloRowFooterTagListBadgeLabel{--tw-text-opacity:1;align-items:center;color:rgb(7 15 33/var(--tw-text-opacity));display:flex;gap:4px}.bordTrelloRowFooterTagList .bordTrelloRowFooterTagListBadgeLabel .bordTrelloRowFooterTagListBadgeLabelIcon{width:9px}.bordTrelloRowFooterTagList .bordTrelloRowFooterTagListBadgeLabel .bordTrelloRowFooterTagListBadgeLabelIcon svg path{stroke:#070f21}.bordTrelloRowFooterTagList .bordTrelloRowFooterTagListBadgeLabel .bordTrelloRowFooterTagListBadgeLabelContent{align-items:center;display:flex;gap:4px}.bordTrelloRowFooterTagList .bordTrelloRowFooterTagListBadgeLabel .bordTrelloRowFooterTagListBadgeLabelText,.bordTrelloRowFooterTagList .bordTrelloRowFooterTagListBadgeLabel .bordTrelloRowFooterTagListBadgeLabelTitle{--tw-text-opacity:1;color:rgb(7 15 33/var(--tw-text-opacity));font-size:10px}";
|
|
4536
|
+
styleInject(css_248z$4);
|
|
4537
|
+
|
|
4538
|
+
const BordTrelloRowFooterBadgeList = ({ title, children, badgeList = [] }) => {
|
|
4539
|
+
const renderTitle = () => {
|
|
4540
|
+
if (isValidElement(title))
|
|
4541
|
+
return title;
|
|
4542
|
+
const config = title;
|
|
4543
|
+
return (jsxs("div", { className: `bordTrelloRowFooterTagListTitle ${config?.className ?? ''}`, children: [jsx("span", { className: "bordTrelloRowFooterTagListTitleIcon", children: config?.icon }), jsx("p", { className: "bordTrelloRowFooterTagListTitleText", children: config?.text })] }));
|
|
4544
|
+
};
|
|
4545
|
+
return (jsxs("div", { className: "bordTrelloRowFooterTagList", children: [renderTitle(), jsxs("div", { className: "bordTrelloRowFooterTagListBadgeList", children: [badgeList?.map((item, index) => {
|
|
4546
|
+
if (isValidElement(item))
|
|
4547
|
+
return jsx("div", { children: item }, index);
|
|
4548
|
+
const badge = item;
|
|
4549
|
+
return (jsx(BordBadge, { color: "informative", className: badge?.className, label: jsxs("div", { className: "bordTrelloRowFooterTagListBadgeLabel", children: [badge?.icon && jsx(BordOneToneIcon, { ...badge?.icon }), jsxs("p", { className: "bordTrelloRowFooterTagListBadgeLabelContent", children: [jsxs("span", { className: "bordTrelloRowFooterTagListBadgeLabelTitle", children: [badge?.title, ":"] }), jsx("span", { className: "bordTrelloRowFooterTagListBadgeLabelText", children: badge?.text })] })] }) }, index));
|
|
4550
|
+
}), children] })] }));
|
|
4551
|
+
};
|
|
4552
|
+
|
|
4553
|
+
var css_248z$3 = ".bordInfoCard{border:1px solid;border-radius:12px;max-width:1180px;overflow:hidden;padding:16px 16px 12px;transition:all .3s ease}.bordInfoCard.success{--tw-border-opacity:1;border-color:rgb(230 230 230/var(--tw-border-opacity))}.bordInfoCard.danger{background-color:rgba(252,84,61,.05);border-color:#fc543d}.bordInfoCard.danger .header{border-color:rgba(252,84,61,.2)}.bordInfoCard .content{display:flex;gap:0}@media (max-width:700px){.bordInfoCard .content{flex-direction:column}}@media (min-width:701px){.bordInfoCard .content{align-items:stretch;flex-direction:row}}.bordInfoCard .tabletContent{display:flex;flex-direction:column;gap:0}@media (min-width:1024px){.bordInfoCard .header{flex-shrink:0;max-width:156px;min-width:156px}}.bordInfoCard .items{flex:1 1 0%}@media (max-width:700px){.bordInfoCard .items{display:grid;gap:24px;grid-template-columns:1fr;margin-right:0;max-width:156px;min-width:156px}}@media (min-width:768px) and (max-width:1023px){.bordInfoCard .items{display:grid;gap:0;grid-template-columns:repeat(3,1fr)}}@media (min-width:1024px){.bordInfoCard .items{align-items:center;display:flex;flex-direction:row;gap:8px;overflow-x:auto}}.bordInfoCard .actions{align-items:center;display:flex;gap:.8rem}@media (max-width:700px){.bordInfoCard .actions{align-items:stretch;flex-direction:column;padding-top:24px;width:100%}}";
|
|
4554
|
+
styleInject(css_248z$3);
|
|
4555
|
+
|
|
4556
|
+
/**
|
|
4557
|
+
* @description A card component that displays information in a horizontal layout (desktop): Header | Items (horizontal row) | Buttons.
|
|
4558
|
+
* @prop {IBordInfoCardHeader} [header] - Optional header with icon, title, subtitle, and description (left section).
|
|
4559
|
+
* @prop {IBordInfoCardItem[]} [items] - Optional array of items to display in a horizontal row (center section, desktop) or grid (tablet/mobile).
|
|
4560
|
+
* @prop {Omit<IBordButton, 'bordButtonStyle' | 'modeButton'>} [primaryButton] - Optional primary button (filled style, right section).
|
|
4561
|
+
* @prop {Omit<IBordButton, 'bordButtonStyle' | 'modeButton'>} [secondaryButton] - Optional secondary button (outlined style, right section).
|
|
4562
|
+
* @prop {Omit<IBordButton, 'bordButtonStyle' | 'modeButton' | 'label'>} [menuButton] - Optional menu button (icon only, right section).
|
|
4563
|
+
* @prop {"success" | "danger"} [variant="success"] - The color variant of the card.
|
|
4564
|
+
* @prop {string} [customClassName=""] - Add a custom class to the component.
|
|
4565
|
+
* @returns {React.ReactElement} An info card component.
|
|
4566
|
+
*/
|
|
4567
|
+
const BordInfoCard = (props) => {
|
|
4568
|
+
const { isTablet } = useViewport();
|
|
4569
|
+
const { header, items, primaryButtonProps = {
|
|
4570
|
+
standardPaddingSize: 'squared'
|
|
4571
|
+
}, secondaryButtonProps = {
|
|
4572
|
+
bordButtonStyle: 'outlined',
|
|
4573
|
+
standardPaddingSize: 'squared'
|
|
4574
|
+
}, tertiaryButtonProps = {
|
|
4575
|
+
buttonIconOne: 'moreVertical',
|
|
4576
|
+
standardPaddingSize: 'squared'
|
|
4577
|
+
}, variant = "success", customClassName = "", bordTrelloRowFooterBadgeListProps, ...restProps } = props;
|
|
4578
|
+
// No renderizar nada si no hay contenido
|
|
4579
|
+
const hasContent = header || items || primaryButtonProps || secondaryButtonProps || tertiaryButtonProps;
|
|
4580
|
+
if (!hasContent)
|
|
4581
|
+
return jsx(Fragment, {});
|
|
4582
|
+
const componentClassNames = `bordInfoCard ${variant} ${customClassName}`;
|
|
4583
|
+
const renderDesktopContent = jsxs("div", { className: "content", children: [header && header.title && (jsx("div", { className: "header", children: jsx(BordCellHeader, { icon: header.icon, title: header.title, subtitle: header.subtitle, description: header.description }) })), items && items.length > 0 && (jsx("div", { className: "items", children: items.map((item, index) => (jsx(BordCellItem, { title: item.title, icon: item.icon, label: item.label }, index))) })), (primaryButtonProps || secondaryButtonProps || tertiaryButtonProps) && (jsxs("div", { className: "actions", children: [secondaryButtonProps && (jsx(BordButton, { ...secondaryButtonProps })), primaryButtonProps && (jsx(BordButton, { ...primaryButtonProps })), tertiaryButtonProps && (jsx(BordButton, { ...tertiaryButtonProps }))] }))] });
|
|
4584
|
+
const renderTabletContent = jsxs("div", { className: "tabletContent", children: [jsxs("div", { className: "flex items-center gap-[24px]", children: [header && header.title && (jsx("div", { className: "header", children: jsx(BordCellHeader, { icon: header.icon, title: header.title, subtitle: header.subtitle, description: header.description }) })), items && items.length > 0 && (jsx("div", { className: "items", children: items.map((item, index) => (jsx(BordCellItem, { title: item.title, icon: item.icon, label: item.label }, index))) }))] }), (primaryButtonProps || secondaryButtonProps || tertiaryButtonProps) && (jsxs("div", { className: "actions", children: [secondaryButtonProps && (jsx(BordButton, { ...secondaryButtonProps })), primaryButtonProps && (jsx(BordButton, { ...primaryButtonProps })), tertiaryButtonProps && (jsx(BordButton, { ...tertiaryButtonProps }))] }))] });
|
|
4585
|
+
return (jsxs("div", { className: componentClassNames, ...restProps, children: [!isTablet && renderDesktopContent, isTablet && renderTabletContent, jsx(BordTrelloRowFooterBadgeList, { ...bordTrelloRowFooterBadgeListProps })] }));
|
|
4586
|
+
};
|
|
4587
|
+
|
|
4588
|
+
const setOpacityToHex = (hexColor, opacity) => {
|
|
4589
|
+
if (!hexColor.startsWith('#'))
|
|
4590
|
+
return;
|
|
4591
|
+
const alpha = Math.round(opacity * 255);
|
|
4592
|
+
const alphaHex = alpha.toString(16).padStart(2, '0');
|
|
4593
|
+
const hexWithOpacity = `${hexColor}${alphaHex}`;
|
|
4594
|
+
return hexWithOpacity;
|
|
4595
|
+
};
|
|
4596
|
+
|
|
4597
|
+
var css_248z$2 = ".bordMetricCard{--tw-border-opacity:1;border-color:rgb(230 230 230/var(--tw-border-opacity));border-radius:9.5px;border-width:1px;display:flex;flex-direction:column;justify-content:space-between;min-width:233px}.bordMetricCard .bordMetricCardTitle{--tw-text-opacity:1;color:rgb(198 199 203/var(--tw-text-opacity));color:rgb(111 115 125/var(--tw-text-opacity));font-weight:400}.bordMetricCard .bordMetricCardValue{font-size:32px;font-weight:700}";
|
|
4598
|
+
styleInject(css_248z$2);
|
|
4599
|
+
|
|
4600
|
+
const BordMetricCard = ({ title, value, textColor = '', size = 'sm' }) => {
|
|
4601
|
+
const bgcolor = setOpacityToHex(textColor, 0.1);
|
|
4602
|
+
const color = textColor;
|
|
4603
|
+
const sizeStyles = {
|
|
4604
|
+
sm: {
|
|
4605
|
+
container: 'px-[12px] py-[7px] ',
|
|
4606
|
+
title: 'text-[10px]',
|
|
4607
|
+
},
|
|
4608
|
+
lg: {
|
|
4609
|
+
container: 'p-[12px] gap-[4px]',
|
|
4610
|
+
title: 'text-[14px]',
|
|
4611
|
+
},
|
|
4612
|
+
};
|
|
4613
|
+
return (jsxs("div", { style: {
|
|
4614
|
+
backgroundColor: bgcolor,
|
|
4615
|
+
}, className: `bordMetricCard ${sizeStyles[size]?.container ?? ''}`, children: [jsx("header", { children: jsx("h3", { className: `bordMetricCardTitle ${sizeStyles[size]?.title ?? ''}`, children: title }) }), jsx("main", { children: jsx("span", { style: { color }, className: `bordMetricCardValue`, children: value === 0 ? '00' : (value ?? '') }) })] }));
|
|
4616
|
+
};
|
|
4617
|
+
|
|
4618
|
+
var css_248z$1 = ".bordTabBarContainer{align-items:center;display:flex;gap:8px;padding:4px}.bordTabBarContainer .bordTabButton{--tw-text-opacity:1;border-radius:8px;color:rgb(100 116 139/var(--tw-text-opacity));font-size:14px;padding:8px 16px;transition-duration:.2s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.bordTabBarContainer .bordTabButton:hover{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.bordTabBarContainer .bordTabButton.bordTabButtonActive{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;--tw-shadow:0 5px 8px 0 rgba(0,0,0,.15);--tw-shadow-colored:0 5px 8px 0 var(--tw-shadow-color);background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(180 180 180/var(--tw-border-opacity));border-width:1px;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);color:rgb(7 15 33/var(--tw-text-opacity))}";
|
|
4619
|
+
styleInject(css_248z$1);
|
|
4620
|
+
|
|
4621
|
+
const BordTabBar = ({ tabs, defaultValue, activeTab: externalActiveTab, onChange, containerClassName = '', buttonClassName = '', activeTabClassName = '', }) => {
|
|
4622
|
+
const [internalActiveTab, setInternalActiveTab] = useState(defaultValue || tabs[0]?.id || '');
|
|
4623
|
+
const currentActiveTab = externalActiveTab !== undefined ? externalActiveTab : internalActiveTab;
|
|
4624
|
+
const handleTabClick = (tabId) => {
|
|
4625
|
+
if (externalActiveTab === undefined) {
|
|
4626
|
+
setInternalActiveTab(tabId);
|
|
4627
|
+
}
|
|
4628
|
+
onChange?.(tabId);
|
|
4629
|
+
};
|
|
4630
|
+
return (jsx("nav", { className: `bordTabBarContainer w-min ${containerClassName}`, children: tabs.map(tab => {
|
|
4631
|
+
const isActive = currentActiveTab === tab.id;
|
|
4632
|
+
return (jsx("button", { type: "button", onClick: () => handleTabClick(tab.id), className: `
|
|
4633
|
+
bordTabButton
|
|
4634
|
+
${buttonClassName}
|
|
4635
|
+
${isActive ? `bordTabButtonActive ${activeTabClassName}` : ''}
|
|
4636
|
+
`, "aria-selected": isActive, role: "tab", children: tab.label }, tab.id));
|
|
4637
|
+
}) }));
|
|
4638
|
+
};
|
|
4639
|
+
|
|
4640
|
+
const colors = {
|
|
4641
|
+
'navy-blue': {
|
|
4642
|
+
400: '#C6C7CB',
|
|
4643
|
+
500: '#6F737D',
|
|
4644
|
+
600: '#626C82',
|
|
4645
|
+
700: '#262B39',
|
|
4646
|
+
800: '#1B202F',
|
|
4647
|
+
900: '#070F21',
|
|
4648
|
+
},
|
|
4649
|
+
cyan: {
|
|
4650
|
+
200: '#60DDC3',
|
|
4651
|
+
300: '#22CFAB',
|
|
4652
|
+
400: '#00B188',
|
|
4653
|
+
500: '#1B9F88',
|
|
4654
|
+
600: '#098381',
|
|
4655
|
+
700: '#077573',
|
|
4656
|
+
900: '#1C323B',
|
|
4657
|
+
},
|
|
4658
|
+
white: {
|
|
4659
|
+
50: '#FFF',
|
|
4660
|
+
100: '#F4F4F4',
|
|
4661
|
+
200: '#EBEBEB',
|
|
4662
|
+
300: '#E6E6E6',
|
|
4663
|
+
400: '#B4B4B4',
|
|
4664
|
+
default: '#FFF',
|
|
4665
|
+
},
|
|
4666
|
+
blue: {
|
|
4667
|
+
50: '#DFF2FF',
|
|
4668
|
+
400: '#23A5FF',
|
|
4669
|
+
500: '#4096F0',
|
|
4670
|
+
900: '#0057A7',
|
|
4671
|
+
},
|
|
4672
|
+
'dark-blue': {
|
|
4673
|
+
900: '#052143',
|
|
4674
|
+
},
|
|
4675
|
+
green: {
|
|
4676
|
+
600: '#09A432',
|
|
4677
|
+
700: '#00994F',
|
|
4678
|
+
900: '#00230A',
|
|
4679
|
+
},
|
|
4680
|
+
'light-green': {
|
|
4681
|
+
50: '#EAF9F4',
|
|
4682
|
+
200: '#74DAB5',
|
|
4683
|
+
300: '#4FD2A2',
|
|
4684
|
+
},
|
|
4685
|
+
red: {
|
|
4686
|
+
100: '#FFD7DC',
|
|
4687
|
+
300: '#FF6175',
|
|
4688
|
+
400: '#FC3D5F',
|
|
4689
|
+
700: '#DE072E',
|
|
4690
|
+
800: '#452436',
|
|
4691
|
+
},
|
|
4692
|
+
['red-bright']: {
|
|
4693
|
+
500: '#FC543D',
|
|
4694
|
+
900: '#210602',
|
|
4695
|
+
},
|
|
4696
|
+
yellow: {
|
|
4697
|
+
100: '#FEFBE8',
|
|
4698
|
+
400: '#E29E28',
|
|
4699
|
+
500: '#F5DD28',
|
|
4700
|
+
600: '#F5DD28',
|
|
4701
|
+
700: '#DCC410',
|
|
4702
|
+
800: '#373822',
|
|
4703
|
+
900: '#272300',
|
|
4704
|
+
},
|
|
4705
|
+
};
|
|
4706
|
+
|
|
4707
|
+
const bordTheme = {
|
|
4708
|
+
...colors,
|
|
4709
|
+
special: {
|
|
4710
|
+
degrade: {
|
|
4711
|
+
cyan: colors.cyan[300],
|
|
4712
|
+
blue: colors.blue[900],
|
|
4713
|
+
},
|
|
4714
|
+
skeleton: {
|
|
4715
|
+
primary: colors['navy-blue'][700],
|
|
4716
|
+
secondary: '#3B4256',
|
|
4717
|
+
},
|
|
4718
|
+
},
|
|
4719
|
+
layout: {
|
|
4720
|
+
bg: colors['navy-blue'][900],
|
|
4721
|
+
'level-1': colors.white[50],
|
|
4722
|
+
'level-2': '#FAFAF9',
|
|
4723
|
+
},
|
|
4724
|
+
primary: {
|
|
4725
|
+
bg: {
|
|
4726
|
+
DEFAULT: colors.cyan[400],
|
|
4727
|
+
hover: colors.cyan[500],
|
|
4728
|
+
secondary: `${colors.cyan[400]}1A`,
|
|
4729
|
+
},
|
|
4730
|
+
fg: {
|
|
4731
|
+
DEFAULT: colors.white[50],
|
|
4732
|
+
},
|
|
4733
|
+
},
|
|
4734
|
+
disabled: {
|
|
4735
|
+
bg: {
|
|
4736
|
+
primary: colors['navy-blue'][600],
|
|
4737
|
+
secondary: colors['navy-blue'][700],
|
|
4738
|
+
},
|
|
4739
|
+
fg: {
|
|
4740
|
+
primary: colors['navy-blue'][700],
|
|
4741
|
+
secondary: colors['navy-blue'][600],
|
|
4742
|
+
},
|
|
4743
|
+
},
|
|
4744
|
+
content: {
|
|
4745
|
+
DEFAULT: colors['navy-blue'][900],
|
|
4746
|
+
secondary: colors['navy-blue'][500],
|
|
4747
|
+
},
|
|
4748
|
+
stroke: {
|
|
4749
|
+
DEFAULT: colors.white[300],
|
|
4750
|
+
interactive: colors.white[400],
|
|
4751
|
+
},
|
|
4752
|
+
informative: {
|
|
4753
|
+
bg: {
|
|
4754
|
+
primary: colors.blue[400],
|
|
4755
|
+
},
|
|
4756
|
+
fg: {
|
|
4757
|
+
primary: colors['dark-blue'][900],
|
|
4758
|
+
},
|
|
4759
|
+
},
|
|
4760
|
+
success: {
|
|
4761
|
+
DEFAULT: colors.green[700],
|
|
4762
|
+
},
|
|
4763
|
+
warning: {
|
|
4764
|
+
DEFAULT: colors.yellow[700],
|
|
4765
|
+
},
|
|
4766
|
+
danger: {
|
|
4767
|
+
DEFAULT: colors['red-bright'][500],
|
|
4768
|
+
},
|
|
4769
|
+
complementary: {
|
|
4770
|
+
blue: {
|
|
4771
|
+
DEFAULT: colors.blue[900],
|
|
4772
|
+
},
|
|
4773
|
+
red: {
|
|
4774
|
+
DEFAULT: colors.red[300],
|
|
4775
|
+
},
|
|
4776
|
+
yellow: {
|
|
4777
|
+
DEFAULT: colors.yellow[500],
|
|
4778
|
+
},
|
|
4779
|
+
},
|
|
4780
|
+
tags: {
|
|
4781
|
+
blue: {
|
|
4782
|
+
fg: {
|
|
4783
|
+
DEFAULT: `${colors.blue[900]}4D`,
|
|
4784
|
+
},
|
|
4785
|
+
DEFAULT: colors.blue[900],
|
|
4786
|
+
},
|
|
4787
|
+
},
|
|
4788
|
+
booleans: {
|
|
4789
|
+
informative: {
|
|
4790
|
+
fg: {
|
|
4791
|
+
primary: colors.blue[500],
|
|
4792
|
+
},
|
|
4793
|
+
bg: {
|
|
4794
|
+
primary: colors.blue[50],
|
|
4795
|
+
opacity: setOpacityToHex(colors.blue[400], 0.1),
|
|
4796
|
+
},
|
|
4797
|
+
},
|
|
4798
|
+
success: {
|
|
4799
|
+
fg: {
|
|
4800
|
+
primary: colors.green[700],
|
|
4801
|
+
},
|
|
4802
|
+
bg: {
|
|
4803
|
+
primary: colors['light-green'][50],
|
|
4804
|
+
opacity: setOpacityToHex(colors.green[600], 0.1),
|
|
4805
|
+
},
|
|
4806
|
+
},
|
|
4807
|
+
warning: {
|
|
4808
|
+
fg: {
|
|
4809
|
+
primary: colors.yellow[600],
|
|
4810
|
+
},
|
|
4811
|
+
bg: {
|
|
4812
|
+
primary: colors.yellow[900],
|
|
4813
|
+
opacity: setOpacityToHex(colors.yellow[600], 0.1),
|
|
4814
|
+
},
|
|
4815
|
+
},
|
|
4816
|
+
danger: {
|
|
4817
|
+
fg: {
|
|
4818
|
+
primary: colors.red[700],
|
|
4819
|
+
},
|
|
4820
|
+
bg: {
|
|
4821
|
+
primary: colors.red[100],
|
|
4822
|
+
opacity: setOpacityToHex(colors['red-bright'][500], 0.1),
|
|
4823
|
+
},
|
|
4824
|
+
},
|
|
4825
|
+
},
|
|
4826
|
+
};
|
|
4827
|
+
|
|
4828
|
+
({
|
|
4829
|
+
special: {
|
|
4830
|
+
degrade: {
|
|
4831
|
+
cyan: colors.cyan[300],
|
|
4832
|
+
blue: colors.blue[900],
|
|
4833
|
+
},
|
|
4834
|
+
skeleton: {
|
|
4835
|
+
primary: colors['navy-blue'][700]},
|
|
4836
|
+
},
|
|
4837
|
+
layout: {
|
|
4838
|
+
bg: colors['navy-blue'][900],
|
|
4839
|
+
'level-1': colors.white[50]},
|
|
4840
|
+
primary: {
|
|
4841
|
+
bg: {
|
|
4842
|
+
DEFAULT: colors.cyan[400],
|
|
4843
|
+
hover: colors.cyan[500],
|
|
4844
|
+
secondary: `${colors.cyan[400]}1A`,
|
|
4845
|
+
},
|
|
4846
|
+
fg: {
|
|
4847
|
+
DEFAULT: colors.white[50],
|
|
4848
|
+
},
|
|
4849
|
+
},
|
|
4850
|
+
disabled: {
|
|
4851
|
+
bg: {
|
|
4852
|
+
primary: colors['navy-blue'][600],
|
|
4853
|
+
secondary: colors['navy-blue'][700],
|
|
4854
|
+
},
|
|
4855
|
+
fg: {
|
|
4856
|
+
primary: colors['navy-blue'][700],
|
|
4857
|
+
secondary: colors['navy-blue'][600],
|
|
4858
|
+
},
|
|
4859
|
+
},
|
|
4860
|
+
content: {
|
|
4861
|
+
DEFAULT: colors['navy-blue'][900],
|
|
4862
|
+
secondary: colors['navy-blue'][500],
|
|
4863
|
+
},
|
|
4864
|
+
stroke: {
|
|
4865
|
+
DEFAULT: colors.white[300],
|
|
4866
|
+
interactive: colors.white[400],
|
|
4867
|
+
},
|
|
4868
|
+
informative: {
|
|
4869
|
+
bg: {
|
|
4870
|
+
primary: colors.blue[400],
|
|
4871
|
+
},
|
|
4872
|
+
fg: {
|
|
4873
|
+
primary: colors['dark-blue'][900],
|
|
4874
|
+
},
|
|
4875
|
+
},
|
|
4876
|
+
success: {
|
|
4877
|
+
DEFAULT: colors.green[700],
|
|
4878
|
+
},
|
|
4879
|
+
warning: {
|
|
4880
|
+
DEFAULT: colors.yellow[700],
|
|
4881
|
+
},
|
|
4882
|
+
danger: {
|
|
4883
|
+
DEFAULT: colors['red-bright'][500],
|
|
4884
|
+
},
|
|
4885
|
+
complementary: {
|
|
4886
|
+
blue: {
|
|
4887
|
+
DEFAULT: colors.blue[900],
|
|
4888
|
+
},
|
|
4889
|
+
red: {
|
|
4890
|
+
DEFAULT: colors.red[300],
|
|
4891
|
+
},
|
|
4892
|
+
yellow: {
|
|
4893
|
+
DEFAULT: colors.yellow[500],
|
|
4894
|
+
},
|
|
4895
|
+
},
|
|
4896
|
+
tags: {
|
|
4897
|
+
blue: {
|
|
4898
|
+
fg: {
|
|
4899
|
+
DEFAULT: `${colors.blue[900]}4D`,
|
|
4900
|
+
},
|
|
4901
|
+
DEFAULT: colors.blue[900],
|
|
4902
|
+
},
|
|
4903
|
+
},
|
|
4904
|
+
booleans: {
|
|
4905
|
+
informative: {
|
|
4906
|
+
fg: {
|
|
4907
|
+
primary: colors.blue[500],
|
|
4908
|
+
},
|
|
4909
|
+
bg: {
|
|
4910
|
+
primary: colors.blue[50],
|
|
4911
|
+
opacity: colors.blue[400],
|
|
4912
|
+
},
|
|
4913
|
+
},
|
|
4914
|
+
success: {
|
|
4915
|
+
fg: {
|
|
4916
|
+
primary: colors.green[700],
|
|
4917
|
+
},
|
|
4918
|
+
bg: {
|
|
4919
|
+
primary: colors['light-green'][50],
|
|
4920
|
+
opacity: colors.green[600],
|
|
4921
|
+
},
|
|
4922
|
+
},
|
|
4923
|
+
warning: {
|
|
4924
|
+
fg: {
|
|
4925
|
+
primary: colors.yellow[600],
|
|
4926
|
+
},
|
|
4927
|
+
bg: {
|
|
4928
|
+
primary: colors.yellow[900],
|
|
4929
|
+
opacity: `${colors.yellow[600]}1A`,
|
|
4930
|
+
},
|
|
4931
|
+
},
|
|
4932
|
+
danger: {
|
|
4933
|
+
fg: {
|
|
4934
|
+
primary: colors['red-bright'][500],
|
|
4935
|
+
},
|
|
4936
|
+
bg: {
|
|
4937
|
+
primary: colors['red-bright'][900],
|
|
4938
|
+
opacity: setOpacityToHex(colors['red-bright'][500], 0.1),
|
|
4939
|
+
},
|
|
4940
|
+
},
|
|
4941
|
+
},
|
|
4942
|
+
});
|
|
4943
|
+
|
|
4944
|
+
const ThemeContext = createContext({
|
|
4945
|
+
isDark: false,
|
|
4946
|
+
theme: bordTheme,
|
|
4947
|
+
});
|
|
4948
|
+
|
|
4949
|
+
var css_248z = ".bordTabRoot{--tw-text-opacity:1;align-items:center;border-bottom-width:1px;border-color:transparent;border-radius:8px 8px 0 0;color:rgb(111 115 125/var(--tw-text-opacity));display:flex;font-size:14px;font-weight:400;gap:.5rem;gap:8px;justify-content:center;min-width:108px;padding:8px 24px}.selected{background-color:var(--bord-tab-bgcolor);border-color:var(--bord-tab-color);color:var(--bord-tab-color)}.disabled{--tw-text-opacity:1;color:rgb(180 180 180/var(--tw-text-opacity))}.disabled:hover{cursor:not-allowed}";
|
|
4950
|
+
styleInject(css_248z);
|
|
4951
|
+
|
|
4952
|
+
const positions = {
|
|
4953
|
+
top: 'flex-col-reverse',
|
|
4954
|
+
bottom: 'flex-col',
|
|
4955
|
+
start: 'flex-row-reverse',
|
|
4956
|
+
end: 'flex-row',
|
|
4957
|
+
};
|
|
4958
|
+
const BordTab = ({ label, className = '', style, icon, iconPosition = 'end', textColor, selected = false, value, disabled = false, onClick, }) => {
|
|
4959
|
+
const bord = useContext(ThemeContext);
|
|
4960
|
+
const context = useContext(TabsContext);
|
|
4961
|
+
const { setActiveTab, activeTab } = context ?? {};
|
|
4962
|
+
const getColors = (textColor) => {
|
|
4963
|
+
let colorVariableName;
|
|
4964
|
+
let bgColorVariableName;
|
|
4965
|
+
if (!textColor) {
|
|
4966
|
+
colorVariableName = bord.theme.content.secondary;
|
|
4967
|
+
bgColorVariableName = 'transparent';
|
|
4968
|
+
return {
|
|
4969
|
+
colorVariableName,
|
|
4970
|
+
bgColorVariableName,
|
|
4971
|
+
};
|
|
4972
|
+
}
|
|
4973
|
+
const color = textColor;
|
|
4974
|
+
const isHex = color.startsWith('#');
|
|
4975
|
+
colorVariableName = isHex ? textColor : bord.theme.booleans?.[textColor]?.fg?.primary;
|
|
4976
|
+
bgColorVariableName = isHex ? setOpacityToHex(textColor, 0.1) : bord.theme.booleans?.[textColor]?.bg?.opacity;
|
|
4977
|
+
return {
|
|
4978
|
+
colorVariableName,
|
|
4979
|
+
bgColorVariableName,
|
|
4980
|
+
};
|
|
4981
|
+
};
|
|
4982
|
+
const { bgColorVariableName, colorVariableName } = getColors(textColor ?? context?.textColor);
|
|
4983
|
+
const isSelected = !disabled && (selected || (value !== undefined && value === activeTab));
|
|
4984
|
+
const handleOnClick = (evt) => {
|
|
4985
|
+
if (disabled)
|
|
4986
|
+
return;
|
|
4987
|
+
if (onClick) {
|
|
4988
|
+
onClick(evt, value);
|
|
4989
|
+
}
|
|
4990
|
+
else {
|
|
4991
|
+
setActiveTab?.(value);
|
|
4992
|
+
}
|
|
4993
|
+
};
|
|
4994
|
+
return (jsxs("button", { type: "button", onClick: handleOnClick, style: {
|
|
4995
|
+
...style,
|
|
4996
|
+
'--bord-tab-color': colorVariableName,
|
|
4997
|
+
'--bord-tab-bgcolor': bgColorVariableName,
|
|
4998
|
+
}, className: `bordTabRoot ${disabled ? 'disabled' : ''} ${isSelected ? 'selected' : ''} ${positions[iconPosition]} ${className}`, children: [label, icon] }));
|
|
4366
4999
|
};
|
|
4367
5000
|
|
|
4368
|
-
|
|
5001
|
+
function BordTabsGroupWithBadge({ value, defaultValue, tabs, textColor, onChange }) {
|
|
5002
|
+
const [active, setActive] = useState(defaultValue);
|
|
5003
|
+
useEffect(() => {
|
|
5004
|
+
if (value) {
|
|
5005
|
+
setActive(value);
|
|
5006
|
+
}
|
|
5007
|
+
}, [value]);
|
|
5008
|
+
return (jsx(BordTabs, { value: active, textColor: textColor, onChange: value => {
|
|
5009
|
+
setActive(value);
|
|
5010
|
+
onChange?.(value);
|
|
5011
|
+
}, children: tabs.map((tab, idx) => {
|
|
5012
|
+
const isSelected = active === tab.value || active === idx;
|
|
5013
|
+
return (jsx(BordTab, { value: tab.value ?? idx, disabled: tab.disabled, selected: isSelected, label: tab.label, icon: tab.badge && (jsx(BordBadge, { color: textColor, disabled: tab.disabled, label: tab.badge?.label, filled: tab.badge?.filled ?? isSelected })) }, tab.value));
|
|
5014
|
+
}) }));
|
|
5015
|
+
}
|
|
5016
|
+
|
|
5017
|
+
export { BordAttentionButton, BordAvatar, BordBackButton, BordButton, BordFlag, BordInfoBanner, BordInfoCard, BordMetricCard, BordOneToneIcon, BordTab, BordTabBar, BordTabs, BordTabsGroupWithBadge, BordTextInput, BordTwoToneIcon };
|
|
4369
5018
|
//# sourceMappingURL=index.esm.js.map
|