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.js
CHANGED
|
@@ -4092,8 +4092,8 @@ function styleInject(css, ref) {
|
|
|
4092
4092
|
}
|
|
4093
4093
|
}
|
|
4094
4094
|
|
|
4095
|
-
var css_248z$
|
|
4096
|
-
styleInject(css_248z$
|
|
4095
|
+
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}";
|
|
4096
|
+
styleInject(css_248z$d);
|
|
4097
4097
|
|
|
4098
4098
|
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, }) => {
|
|
4099
4099
|
const [inputValue, setInputValue] = React.useState("");
|
|
@@ -4274,8 +4274,8 @@ const BordTwoToneIcon = ({ variant, standardSize = 24, customWidth, colorTones,
|
|
|
4274
4274
|
return (jsxRuntime.jsx("div", { className: "bordTwoToneIcon", style: { width: iconWidth }, children: React__default.default.createElement(twoToneIcon, { colorTones }) }));
|
|
4275
4275
|
};
|
|
4276
4276
|
|
|
4277
|
-
var css_248z$
|
|
4278
|
-
styleInject(css_248z$
|
|
4277
|
+
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}";
|
|
4278
|
+
styleInject(css_248z$c);
|
|
4279
4279
|
|
|
4280
4280
|
/**
|
|
4281
4281
|
* @param {IBordBackButtonProps} props - The properties for the BordBackButton component.
|
|
@@ -4287,8 +4287,8 @@ const BordBackButton = ({ buttonText, onClick, ...rest }) => {
|
|
|
4287
4287
|
return (jsxRuntime.jsxs("div", { className: "bordBackButton", onClick: onClick, ...rest, children: [jsxRuntime.jsx(BordOneToneIcon, { variant: "arrowHeadLeft", customWidth: "1.2rem" }), jsxRuntime.jsx("div", { className: "buttonText", children: buttonText })] }));
|
|
4288
4288
|
};
|
|
4289
4289
|
|
|
4290
|
-
var css_248z$
|
|
4291
|
-
styleInject(css_248z$
|
|
4290
|
+
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}";
|
|
4291
|
+
styleInject(css_248z$b);
|
|
4292
4292
|
|
|
4293
4293
|
/**
|
|
4294
4294
|
* @description A component that displays a pulsating red attention indicator dot.
|
|
@@ -4301,8 +4301,8 @@ const BordAttentionButton = (props) => {
|
|
|
4301
4301
|
return (jsxRuntime.jsx("div", { className: `bordAttentionButton ${customClassName}`, ...restProps, children: jsxRuntime.jsx("div", { className: `attentionDot ${isInactive ? '' : 'active'}` }) }));
|
|
4302
4302
|
};
|
|
4303
4303
|
|
|
4304
|
-
var css_248z$
|
|
4305
|
-
styleInject(css_248z$
|
|
4304
|
+
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%}}";
|
|
4305
|
+
styleInject(css_248z$a);
|
|
4306
4306
|
|
|
4307
4307
|
/**
|
|
4308
4308
|
* @description An informational banner component with icon, text, and optional alert indicator.
|
|
@@ -4334,8 +4334,8 @@ const BordInfoBanner = (props) => {
|
|
|
4334
4334
|
return (jsxRuntime.jsx("div", { className: `bordInfoBanner ${backgroundClass}`, ...bordInfoBannerContainerProps, ...restProps, children: jsxRuntime.jsxs("div", { className: "infoBannerContent", ...bordInfoBannerContentProps, children: [jsxRuntime.jsx("div", { className: "infoBannerIcon", ...bordInfoBannerIconContainerProps, children: jsxRuntime.jsx(BordOneToneIcon, { ...bordOneToneIconProps }) }), jsxRuntime.jsxs("div", { className: "infoBannerTexts", ...bordInfoBannerTextsContainerProps, children: [primaryText && (jsxRuntime.jsx("span", { className: "infoBannerPrimaryText", ...bordInfoBannerPrimaryTextProps, children: primaryText })), rangeText && (jsxRuntime.jsx("span", { className: "infoBannerRangeText", ...bordInfoBannerRangeTextProps, children: rangeText }))] }), alertLabel && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "infoBannerDivider", ...bordInfoBannerDividerProps }), jsxRuntime.jsxs("div", { className: "infoBannerAlert", ...bordInfoBannerAlertContainerProps, children: [jsxRuntime.jsx(BordAttentionButton, { isInactive: isAlertInactive }), jsxRuntime.jsx("span", { className: "alertLabel", ...bordInfoBannerAlertLabelProps, children: alertLabel })] })] }))] }) }));
|
|
4335
4335
|
};
|
|
4336
4336
|
|
|
4337
|
-
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(
|
|
4338
|
-
styleInject(css_248z);
|
|
4337
|
+
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}";
|
|
4338
|
+
styleInject(css_248z$9);
|
|
4339
4339
|
|
|
4340
4340
|
/**
|
|
4341
4341
|
* @description A button component with different styles and loading state.
|
|
@@ -4356,7 +4356,11 @@ styleInject(css_248z);
|
|
|
4356
4356
|
* @returns {React.ReactElement} A button component with different styles and loading state.
|
|
4357
4357
|
*/
|
|
4358
4358
|
const BordButton = (props) => {
|
|
4359
|
-
const { formId, customWidth, bordButtonStyle, onClick, disabled, customClassName = "", customFontSize,
|
|
4359
|
+
const { formId, customWidth, bordButtonStyle, onClick, disabled, customClassName = "", customFontSize, isLoading, label, customHeight = "auto", modeButton = "primary", standardPaddingSize = "rectangular", buttonIconOneProps = {
|
|
4360
|
+
standardSize: 14,
|
|
4361
|
+
}, buttonIconTwoProps = {
|
|
4362
|
+
standardSize: 14,
|
|
4363
|
+
}, buttonIconOne, buttonIconTwo, } = props;
|
|
4360
4364
|
// Add a custom class based on the custom height
|
|
4361
4365
|
const customHeightStyle = customHeight !== "auto" ? `ht-${customHeight}` : "";
|
|
4362
4366
|
// Add a custom class based on the bordButtonStyle
|
|
@@ -4368,16 +4372,667 @@ const BordButton = (props) => {
|
|
|
4368
4372
|
// If the button is in a loading state, render a skeleton loader
|
|
4369
4373
|
if (isLoading)
|
|
4370
4374
|
return jsxRuntime.jsx("div", { className: skeletonLoaderClassnames });
|
|
4371
|
-
return (jsxRuntime.jsxs("button", { className: `bordButton ${standardPaddingSize} ${customClassName} ${buttonOutlineStyle} ${customWidth} ${customHeightStyle} ${styleModeButton}`, form: formId, onClick: onClick, disabled: disabled, ...props, children: [buttonIconOne && (jsxRuntime.jsx(
|
|
4375
|
+
return (jsxRuntime.jsxs("button", { className: `bordButton ${standardPaddingSize} ${customClassName} ${buttonOutlineStyle} ${customWidth} ${customHeightStyle} ${styleModeButton}`, form: formId, onClick: onClick, disabled: disabled, ...props, children: [buttonIconOneProps && buttonIconOne && (jsxRuntime.jsx(BordOneToneIcon, { ...buttonIconOneProps, variant: buttonIconOne })), label && (jsxRuntime.jsx("div", { className: 'textContainer', style: { fontSize: customFontSize }, children: label })), buttonIconTwoProps && buttonIconTwo && (jsxRuntime.jsx(BordOneToneIcon, { ...buttonIconTwoProps, variant: buttonIconTwo }))] }));
|
|
4376
|
+
};
|
|
4377
|
+
|
|
4378
|
+
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}";
|
|
4379
|
+
styleInject(css_248z$8);
|
|
4380
|
+
|
|
4381
|
+
const TabsContext = React.createContext({
|
|
4382
|
+
activeTab: undefined,
|
|
4383
|
+
setActiveTab: () => { },
|
|
4384
|
+
});
|
|
4385
|
+
const BordTabs = ({ value, children, defaultValue, textColor, onChange }) => {
|
|
4386
|
+
const [activeTab, setActiveTab] = React.useState(defaultValue);
|
|
4387
|
+
const handleSetActive = (value) => {
|
|
4388
|
+
setActiveTab(value);
|
|
4389
|
+
onChange?.(value);
|
|
4390
|
+
};
|
|
4391
|
+
return (jsxRuntime.jsx(TabsContext.Provider, { value: { activeTab: value ?? activeTab, textColor, setActiveTab: handleSetActive }, children: jsxRuntime.jsx("div", { className: "bordTabs", children: children }) }));
|
|
4392
|
+
};
|
|
4393
|
+
|
|
4394
|
+
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}";
|
|
4395
|
+
styleInject(css_248z$7);
|
|
4396
|
+
|
|
4397
|
+
/**
|
|
4398
|
+
* @description A cell header component with icon, title, subtitle and description.
|
|
4399
|
+
* @prop {ReactNode} [icon] - The icon to display.
|
|
4400
|
+
* @prop {string} title - The title text.
|
|
4401
|
+
* @prop {string} [subtitle] - The subtitle text.
|
|
4402
|
+
* @prop {string} [description] - The description text.
|
|
4403
|
+
* @prop {string} [customClassName=""] - Add a custom class to the component.
|
|
4404
|
+
* @returns {React.ReactElement} A cell header component.
|
|
4405
|
+
*/
|
|
4406
|
+
const BordCellHeader = (props) => {
|
|
4407
|
+
const { icon, title, subtitle, description, customClassName = "", ...restProps } = props;
|
|
4408
|
+
return (jsxRuntime.jsx("div", { className: `bordCellHeader ${customClassName}`, ...restProps, children: jsxRuntime.jsxs("div", { className: "cellHeaderContent", children: [jsxRuntime.jsxs("div", { className: "cellHeaderTitleContainer", children: [icon && jsxRuntime.jsx("div", { className: "cellHeaderIcon", children: icon }), jsxRuntime.jsx("div", { className: "cellHeaderTitle", children: title })] }), subtitle && jsxRuntime.jsx("div", { className: "cellHeaderSubtitle", children: subtitle }), description && jsxRuntime.jsx("div", { className: "cellHeaderDescription", children: description })] }) }));
|
|
4409
|
+
};
|
|
4410
|
+
|
|
4411
|
+
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%}}";
|
|
4412
|
+
styleInject(css_248z$6);
|
|
4413
|
+
|
|
4414
|
+
/**
|
|
4415
|
+
* @description A cell item component with optional title, icon and label.
|
|
4416
|
+
* @prop {string} [title] - Optional title text to show above the item.
|
|
4417
|
+
* @prop {ReactNode} [icon] - The icon to display (can be emoji, component, etc).
|
|
4418
|
+
* @prop {string} label - The label text to display.
|
|
4419
|
+
* @prop {string} [customClassName=""] - Add a custom class to the component.
|
|
4420
|
+
* @returns {React.ReactElement} A cell item component.
|
|
4421
|
+
*/
|
|
4422
|
+
const BordCellItem = (props) => {
|
|
4423
|
+
const { title, icon, label, customClassName = "", ...restProps } = props;
|
|
4424
|
+
return (jsxRuntime.jsxs("div", { className: `bordCellItem ${customClassName}`, ...restProps, children: [title && jsxRuntime.jsx("div", { className: "cellItemTitle", children: title }), jsxRuntime.jsxs("div", { className: "cellItemContent", children: [icon && jsxRuntime.jsx("div", { className: "cellItemIcon", children: icon }), jsxRuntime.jsx("span", { className: "cellItemLabel", children: label })] })] }));
|
|
4425
|
+
};
|
|
4426
|
+
|
|
4427
|
+
/**
|
|
4428
|
+
* Breakpoints basados en Tailwind
|
|
4429
|
+
* xs: 400px
|
|
4430
|
+
* sm: 640px
|
|
4431
|
+
* md: 768px
|
|
4432
|
+
* lg: 1024px
|
|
4433
|
+
* xl: 1440px
|
|
4434
|
+
* 2xl: 1920px
|
|
4435
|
+
*/
|
|
4436
|
+
const BREAKPOINTS = {
|
|
4437
|
+
xs: 400,
|
|
4438
|
+
sm: 640,
|
|
4439
|
+
md: 768,
|
|
4440
|
+
lg: 1024,
|
|
4441
|
+
xl: 1440,
|
|
4442
|
+
"2xl": 1920,
|
|
4443
|
+
};
|
|
4444
|
+
/**
|
|
4445
|
+
* Custom hook para detectar el tamaño del viewport y breakpoints de Tailwind
|
|
4446
|
+
* @returns {ViewportInfo} Información sobre el viewport actual
|
|
4447
|
+
*
|
|
4448
|
+
* @example
|
|
4449
|
+
* const { isMobile, isTablet, isDesktop, width, breakpoint } = useViewport();
|
|
4450
|
+
*
|
|
4451
|
+
* if (isMobile) {
|
|
4452
|
+
* // Renderizar versión mobile
|
|
4453
|
+
* }
|
|
4454
|
+
*/
|
|
4455
|
+
function useViewport() {
|
|
4456
|
+
const [viewport, setViewport] = React.useState(() => {
|
|
4457
|
+
const width = typeof window !== "undefined" ? window.innerWidth : 0;
|
|
4458
|
+
const height = typeof window !== "undefined" ? window.innerHeight : 0;
|
|
4459
|
+
return getViewportInfo(width, height);
|
|
4460
|
+
});
|
|
4461
|
+
React.useEffect(() => {
|
|
4462
|
+
// Función para actualizar el viewport
|
|
4463
|
+
const handleResize = () => {
|
|
4464
|
+
setViewport(getViewportInfo(window.innerWidth, window.innerHeight));
|
|
4465
|
+
};
|
|
4466
|
+
// Agregar listener
|
|
4467
|
+
window.addEventListener("resize", handleResize);
|
|
4468
|
+
// Cleanup
|
|
4469
|
+
return () => {
|
|
4470
|
+
window.removeEventListener("resize", handleResize);
|
|
4471
|
+
};
|
|
4472
|
+
}, []);
|
|
4473
|
+
return viewport;
|
|
4474
|
+
}
|
|
4475
|
+
/**
|
|
4476
|
+
* Obtiene la información del viewport basado en el ancho y alto
|
|
4477
|
+
*/
|
|
4478
|
+
function getViewportInfo(width, height) {
|
|
4479
|
+
const isXs = width >= BREAKPOINTS.xs;
|
|
4480
|
+
const isSm = width >= BREAKPOINTS.sm;
|
|
4481
|
+
const isMd = width >= BREAKPOINTS.md;
|
|
4482
|
+
const isLg = width >= BREAKPOINTS.lg;
|
|
4483
|
+
const isXl = width >= BREAKPOINTS.xl;
|
|
4484
|
+
const is2Xl = width >= BREAKPOINTS["2xl"];
|
|
4485
|
+
// Determinar el breakpoint actual
|
|
4486
|
+
let breakpoint = "base";
|
|
4487
|
+
if (is2Xl)
|
|
4488
|
+
breakpoint = "2xl";
|
|
4489
|
+
else if (isXl)
|
|
4490
|
+
breakpoint = "xl";
|
|
4491
|
+
else if (isLg)
|
|
4492
|
+
breakpoint = "lg";
|
|
4493
|
+
else if (isMd)
|
|
4494
|
+
breakpoint = "md";
|
|
4495
|
+
else if (isSm)
|
|
4496
|
+
breakpoint = "sm";
|
|
4497
|
+
else if (isXs)
|
|
4498
|
+
breakpoint = "xs";
|
|
4499
|
+
// Categorías generales
|
|
4500
|
+
const isMobile = width < BREAKPOINTS.md; // < 768px
|
|
4501
|
+
const isTablet = width >= BREAKPOINTS.md && width < BREAKPOINTS.lg; // 768px - 1023px
|
|
4502
|
+
const isDesktop = width >= BREAKPOINTS.lg; // >= 1024px
|
|
4503
|
+
return {
|
|
4504
|
+
width,
|
|
4505
|
+
height,
|
|
4506
|
+
isMobile,
|
|
4507
|
+
isTablet,
|
|
4508
|
+
isDesktop,
|
|
4509
|
+
isXs,
|
|
4510
|
+
isSm,
|
|
4511
|
+
isMd,
|
|
4512
|
+
isLg,
|
|
4513
|
+
isXl,
|
|
4514
|
+
is2Xl,
|
|
4515
|
+
breakpoint,
|
|
4516
|
+
};
|
|
4517
|
+
}
|
|
4518
|
+
|
|
4519
|
+
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))}";
|
|
4520
|
+
styleInject(css_248z$5);
|
|
4521
|
+
|
|
4522
|
+
var BADGE_VARIANTS;
|
|
4523
|
+
(function (BADGE_VARIANTS) {
|
|
4524
|
+
BADGE_VARIANTS["default"] = "default";
|
|
4525
|
+
BADGE_VARIANTS["gradient"] = "gradient";
|
|
4526
|
+
})(BADGE_VARIANTS || (BADGE_VARIANTS = {}));
|
|
4527
|
+
const BordBadge = ({ label = 'Label', variant = 'default', color, className = '', filled, disabled, }) => {
|
|
4528
|
+
const renderVariants = {
|
|
4529
|
+
[BADGE_VARIANTS.default]: {
|
|
4530
|
+
styles: 'defaultStyles',
|
|
4531
|
+
component: jsxRuntime.jsx("span", { children: label }),
|
|
4532
|
+
},
|
|
4533
|
+
[BADGE_VARIANTS.gradient]: {
|
|
4534
|
+
styles: 'gradientStyles',
|
|
4535
|
+
component: (jsxRuntime.jsx("div", { className: "gradientComponentStyles", children: jsxRuntime.jsx("span", { children: label }) })),
|
|
4536
|
+
},
|
|
4537
|
+
};
|
|
4538
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("div", { className: `badgeContainer ${renderVariants[variant]?.styles} ${className} ${color ? `bordBadge ${color}BordBadge ${filled ? 'filled' : ''}` : ''} ${disabled ? 'disabled' : ''}`, children: renderVariants[variant]?.component }) }));
|
|
4539
|
+
};
|
|
4540
|
+
|
|
4541
|
+
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}";
|
|
4542
|
+
styleInject(css_248z$4);
|
|
4543
|
+
|
|
4544
|
+
const BordTrelloRowFooterBadgeList = ({ title, children, badgeList = [] }) => {
|
|
4545
|
+
const renderTitle = () => {
|
|
4546
|
+
if (React.isValidElement(title))
|
|
4547
|
+
return title;
|
|
4548
|
+
const config = title;
|
|
4549
|
+
return (jsxRuntime.jsxs("div", { className: `bordTrelloRowFooterTagListTitle ${config?.className ?? ''}`, children: [jsxRuntime.jsx("span", { className: "bordTrelloRowFooterTagListTitleIcon", children: config?.icon }), jsxRuntime.jsx("p", { className: "bordTrelloRowFooterTagListTitleText", children: config?.text })] }));
|
|
4550
|
+
};
|
|
4551
|
+
return (jsxRuntime.jsxs("div", { className: "bordTrelloRowFooterTagList", children: [renderTitle(), jsxRuntime.jsxs("div", { className: "bordTrelloRowFooterTagListBadgeList", children: [badgeList?.map((item, index) => {
|
|
4552
|
+
if (React.isValidElement(item))
|
|
4553
|
+
return jsxRuntime.jsx("div", { children: item }, index);
|
|
4554
|
+
const badge = item;
|
|
4555
|
+
return (jsxRuntime.jsx(BordBadge, { color: "informative", className: badge?.className, label: jsxRuntime.jsxs("div", { className: "bordTrelloRowFooterTagListBadgeLabel", children: [badge?.icon && jsxRuntime.jsx(BordOneToneIcon, { ...badge?.icon }), jsxRuntime.jsxs("p", { className: "bordTrelloRowFooterTagListBadgeLabelContent", children: [jsxRuntime.jsxs("span", { className: "bordTrelloRowFooterTagListBadgeLabelTitle", children: [badge?.title, ":"] }), jsxRuntime.jsx("span", { className: "bordTrelloRowFooterTagListBadgeLabelText", children: badge?.text })] })] }) }, index));
|
|
4556
|
+
}), children] })] }));
|
|
4557
|
+
};
|
|
4558
|
+
|
|
4559
|
+
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%}}";
|
|
4560
|
+
styleInject(css_248z$3);
|
|
4561
|
+
|
|
4562
|
+
/**
|
|
4563
|
+
* @description A card component that displays information in a horizontal layout (desktop): Header | Items (horizontal row) | Buttons.
|
|
4564
|
+
* @prop {IBordInfoCardHeader} [header] - Optional header with icon, title, subtitle, and description (left section).
|
|
4565
|
+
* @prop {IBordInfoCardItem[]} [items] - Optional array of items to display in a horizontal row (center section, desktop) or grid (tablet/mobile).
|
|
4566
|
+
* @prop {Omit<IBordButton, 'bordButtonStyle' | 'modeButton'>} [primaryButton] - Optional primary button (filled style, right section).
|
|
4567
|
+
* @prop {Omit<IBordButton, 'bordButtonStyle' | 'modeButton'>} [secondaryButton] - Optional secondary button (outlined style, right section).
|
|
4568
|
+
* @prop {Omit<IBordButton, 'bordButtonStyle' | 'modeButton' | 'label'>} [menuButton] - Optional menu button (icon only, right section).
|
|
4569
|
+
* @prop {"success" | "danger"} [variant="success"] - The color variant of the card.
|
|
4570
|
+
* @prop {string} [customClassName=""] - Add a custom class to the component.
|
|
4571
|
+
* @returns {React.ReactElement} An info card component.
|
|
4572
|
+
*/
|
|
4573
|
+
const BordInfoCard = (props) => {
|
|
4574
|
+
const { isTablet } = useViewport();
|
|
4575
|
+
const { header, items, primaryButtonProps = {
|
|
4576
|
+
standardPaddingSize: 'squared'
|
|
4577
|
+
}, secondaryButtonProps = {
|
|
4578
|
+
bordButtonStyle: 'outlined',
|
|
4579
|
+
standardPaddingSize: 'squared'
|
|
4580
|
+
}, tertiaryButtonProps = {
|
|
4581
|
+
buttonIconOne: 'moreVertical',
|
|
4582
|
+
standardPaddingSize: 'squared'
|
|
4583
|
+
}, variant = "success", customClassName = "", bordTrelloRowFooterBadgeListProps, ...restProps } = props;
|
|
4584
|
+
// No renderizar nada si no hay contenido
|
|
4585
|
+
const hasContent = header || items || primaryButtonProps || secondaryButtonProps || tertiaryButtonProps;
|
|
4586
|
+
if (!hasContent)
|
|
4587
|
+
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
4588
|
+
const componentClassNames = `bordInfoCard ${variant} ${customClassName}`;
|
|
4589
|
+
const renderDesktopContent = jsxRuntime.jsxs("div", { className: "content", children: [header && header.title && (jsxRuntime.jsx("div", { className: "header", children: jsxRuntime.jsx(BordCellHeader, { icon: header.icon, title: header.title, subtitle: header.subtitle, description: header.description }) })), items && items.length > 0 && (jsxRuntime.jsx("div", { className: "items", children: items.map((item, index) => (jsxRuntime.jsx(BordCellItem, { title: item.title, icon: item.icon, label: item.label }, index))) })), (primaryButtonProps || secondaryButtonProps || tertiaryButtonProps) && (jsxRuntime.jsxs("div", { className: "actions", children: [secondaryButtonProps && (jsxRuntime.jsx(BordButton, { ...secondaryButtonProps })), primaryButtonProps && (jsxRuntime.jsx(BordButton, { ...primaryButtonProps })), tertiaryButtonProps && (jsxRuntime.jsx(BordButton, { ...tertiaryButtonProps }))] }))] });
|
|
4590
|
+
const renderTabletContent = jsxRuntime.jsxs("div", { className: "tabletContent", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-[24px]", children: [header && header.title && (jsxRuntime.jsx("div", { className: "header", children: jsxRuntime.jsx(BordCellHeader, { icon: header.icon, title: header.title, subtitle: header.subtitle, description: header.description }) })), items && items.length > 0 && (jsxRuntime.jsx("div", { className: "items", children: items.map((item, index) => (jsxRuntime.jsx(BordCellItem, { title: item.title, icon: item.icon, label: item.label }, index))) }))] }), (primaryButtonProps || secondaryButtonProps || tertiaryButtonProps) && (jsxRuntime.jsxs("div", { className: "actions", children: [secondaryButtonProps && (jsxRuntime.jsx(BordButton, { ...secondaryButtonProps })), primaryButtonProps && (jsxRuntime.jsx(BordButton, { ...primaryButtonProps })), tertiaryButtonProps && (jsxRuntime.jsx(BordButton, { ...tertiaryButtonProps }))] }))] });
|
|
4591
|
+
return (jsxRuntime.jsxs("div", { className: componentClassNames, ...restProps, children: [!isTablet && renderDesktopContent, isTablet && renderTabletContent, jsxRuntime.jsx(BordTrelloRowFooterBadgeList, { ...bordTrelloRowFooterBadgeListProps })] }));
|
|
4592
|
+
};
|
|
4593
|
+
|
|
4594
|
+
const setOpacityToHex = (hexColor, opacity) => {
|
|
4595
|
+
if (!hexColor.startsWith('#'))
|
|
4596
|
+
return;
|
|
4597
|
+
const alpha = Math.round(opacity * 255);
|
|
4598
|
+
const alphaHex = alpha.toString(16).padStart(2, '0');
|
|
4599
|
+
const hexWithOpacity = `${hexColor}${alphaHex}`;
|
|
4600
|
+
return hexWithOpacity;
|
|
4601
|
+
};
|
|
4602
|
+
|
|
4603
|
+
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}";
|
|
4604
|
+
styleInject(css_248z$2);
|
|
4605
|
+
|
|
4606
|
+
const BordMetricCard = ({ title, value, textColor = '', size = 'sm' }) => {
|
|
4607
|
+
const bgcolor = setOpacityToHex(textColor, 0.1);
|
|
4608
|
+
const color = textColor;
|
|
4609
|
+
const sizeStyles = {
|
|
4610
|
+
sm: {
|
|
4611
|
+
container: 'px-[12px] py-[7px] ',
|
|
4612
|
+
title: 'text-[10px]',
|
|
4613
|
+
},
|
|
4614
|
+
lg: {
|
|
4615
|
+
container: 'p-[12px] gap-[4px]',
|
|
4616
|
+
title: 'text-[14px]',
|
|
4617
|
+
},
|
|
4618
|
+
};
|
|
4619
|
+
return (jsxRuntime.jsxs("div", { style: {
|
|
4620
|
+
backgroundColor: bgcolor,
|
|
4621
|
+
}, className: `bordMetricCard ${sizeStyles[size]?.container ?? ''}`, children: [jsxRuntime.jsx("header", { children: jsxRuntime.jsx("h3", { className: `bordMetricCardTitle ${sizeStyles[size]?.title ?? ''}`, children: title }) }), jsxRuntime.jsx("main", { children: jsxRuntime.jsx("span", { style: { color }, className: `bordMetricCardValue`, children: value === 0 ? '00' : (value ?? '') }) })] }));
|
|
4622
|
+
};
|
|
4623
|
+
|
|
4624
|
+
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))}";
|
|
4625
|
+
styleInject(css_248z$1);
|
|
4626
|
+
|
|
4627
|
+
const BordTabBar = ({ tabs, defaultValue, activeTab: externalActiveTab, onChange, containerClassName = '', buttonClassName = '', activeTabClassName = '', }) => {
|
|
4628
|
+
const [internalActiveTab, setInternalActiveTab] = React.useState(defaultValue || tabs[0]?.id || '');
|
|
4629
|
+
const currentActiveTab = externalActiveTab !== undefined ? externalActiveTab : internalActiveTab;
|
|
4630
|
+
const handleTabClick = (tabId) => {
|
|
4631
|
+
if (externalActiveTab === undefined) {
|
|
4632
|
+
setInternalActiveTab(tabId);
|
|
4633
|
+
}
|
|
4634
|
+
onChange?.(tabId);
|
|
4635
|
+
};
|
|
4636
|
+
return (jsxRuntime.jsx("nav", { className: `bordTabBarContainer w-min ${containerClassName}`, children: tabs.map(tab => {
|
|
4637
|
+
const isActive = currentActiveTab === tab.id;
|
|
4638
|
+
return (jsxRuntime.jsx("button", { type: "button", onClick: () => handleTabClick(tab.id), className: `
|
|
4639
|
+
bordTabButton
|
|
4640
|
+
${buttonClassName}
|
|
4641
|
+
${isActive ? `bordTabButtonActive ${activeTabClassName}` : ''}
|
|
4642
|
+
`, "aria-selected": isActive, role: "tab", children: tab.label }, tab.id));
|
|
4643
|
+
}) }));
|
|
4644
|
+
};
|
|
4645
|
+
|
|
4646
|
+
const colors = {
|
|
4647
|
+
'navy-blue': {
|
|
4648
|
+
400: '#C6C7CB',
|
|
4649
|
+
500: '#6F737D',
|
|
4650
|
+
600: '#626C82',
|
|
4651
|
+
700: '#262B39',
|
|
4652
|
+
800: '#1B202F',
|
|
4653
|
+
900: '#070F21',
|
|
4654
|
+
},
|
|
4655
|
+
cyan: {
|
|
4656
|
+
200: '#60DDC3',
|
|
4657
|
+
300: '#22CFAB',
|
|
4658
|
+
400: '#00B188',
|
|
4659
|
+
500: '#1B9F88',
|
|
4660
|
+
600: '#098381',
|
|
4661
|
+
700: '#077573',
|
|
4662
|
+
900: '#1C323B',
|
|
4663
|
+
},
|
|
4664
|
+
white: {
|
|
4665
|
+
50: '#FFF',
|
|
4666
|
+
100: '#F4F4F4',
|
|
4667
|
+
200: '#EBEBEB',
|
|
4668
|
+
300: '#E6E6E6',
|
|
4669
|
+
400: '#B4B4B4',
|
|
4670
|
+
default: '#FFF',
|
|
4671
|
+
},
|
|
4672
|
+
blue: {
|
|
4673
|
+
50: '#DFF2FF',
|
|
4674
|
+
400: '#23A5FF',
|
|
4675
|
+
500: '#4096F0',
|
|
4676
|
+
900: '#0057A7',
|
|
4677
|
+
},
|
|
4678
|
+
'dark-blue': {
|
|
4679
|
+
900: '#052143',
|
|
4680
|
+
},
|
|
4681
|
+
green: {
|
|
4682
|
+
600: '#09A432',
|
|
4683
|
+
700: '#00994F',
|
|
4684
|
+
900: '#00230A',
|
|
4685
|
+
},
|
|
4686
|
+
'light-green': {
|
|
4687
|
+
50: '#EAF9F4',
|
|
4688
|
+
200: '#74DAB5',
|
|
4689
|
+
300: '#4FD2A2',
|
|
4690
|
+
},
|
|
4691
|
+
red: {
|
|
4692
|
+
100: '#FFD7DC',
|
|
4693
|
+
300: '#FF6175',
|
|
4694
|
+
400: '#FC3D5F',
|
|
4695
|
+
700: '#DE072E',
|
|
4696
|
+
800: '#452436',
|
|
4697
|
+
},
|
|
4698
|
+
['red-bright']: {
|
|
4699
|
+
500: '#FC543D',
|
|
4700
|
+
900: '#210602',
|
|
4701
|
+
},
|
|
4702
|
+
yellow: {
|
|
4703
|
+
100: '#FEFBE8',
|
|
4704
|
+
400: '#E29E28',
|
|
4705
|
+
500: '#F5DD28',
|
|
4706
|
+
600: '#F5DD28',
|
|
4707
|
+
700: '#DCC410',
|
|
4708
|
+
800: '#373822',
|
|
4709
|
+
900: '#272300',
|
|
4710
|
+
},
|
|
4711
|
+
};
|
|
4712
|
+
|
|
4713
|
+
const bordTheme = {
|
|
4714
|
+
...colors,
|
|
4715
|
+
special: {
|
|
4716
|
+
degrade: {
|
|
4717
|
+
cyan: colors.cyan[300],
|
|
4718
|
+
blue: colors.blue[900],
|
|
4719
|
+
},
|
|
4720
|
+
skeleton: {
|
|
4721
|
+
primary: colors['navy-blue'][700],
|
|
4722
|
+
secondary: '#3B4256',
|
|
4723
|
+
},
|
|
4724
|
+
},
|
|
4725
|
+
layout: {
|
|
4726
|
+
bg: colors['navy-blue'][900],
|
|
4727
|
+
'level-1': colors.white[50],
|
|
4728
|
+
'level-2': '#FAFAF9',
|
|
4729
|
+
},
|
|
4730
|
+
primary: {
|
|
4731
|
+
bg: {
|
|
4732
|
+
DEFAULT: colors.cyan[400],
|
|
4733
|
+
hover: colors.cyan[500],
|
|
4734
|
+
secondary: `${colors.cyan[400]}1A`,
|
|
4735
|
+
},
|
|
4736
|
+
fg: {
|
|
4737
|
+
DEFAULT: colors.white[50],
|
|
4738
|
+
},
|
|
4739
|
+
},
|
|
4740
|
+
disabled: {
|
|
4741
|
+
bg: {
|
|
4742
|
+
primary: colors['navy-blue'][600],
|
|
4743
|
+
secondary: colors['navy-blue'][700],
|
|
4744
|
+
},
|
|
4745
|
+
fg: {
|
|
4746
|
+
primary: colors['navy-blue'][700],
|
|
4747
|
+
secondary: colors['navy-blue'][600],
|
|
4748
|
+
},
|
|
4749
|
+
},
|
|
4750
|
+
content: {
|
|
4751
|
+
DEFAULT: colors['navy-blue'][900],
|
|
4752
|
+
secondary: colors['navy-blue'][500],
|
|
4753
|
+
},
|
|
4754
|
+
stroke: {
|
|
4755
|
+
DEFAULT: colors.white[300],
|
|
4756
|
+
interactive: colors.white[400],
|
|
4757
|
+
},
|
|
4758
|
+
informative: {
|
|
4759
|
+
bg: {
|
|
4760
|
+
primary: colors.blue[400],
|
|
4761
|
+
},
|
|
4762
|
+
fg: {
|
|
4763
|
+
primary: colors['dark-blue'][900],
|
|
4764
|
+
},
|
|
4765
|
+
},
|
|
4766
|
+
success: {
|
|
4767
|
+
DEFAULT: colors.green[700],
|
|
4768
|
+
},
|
|
4769
|
+
warning: {
|
|
4770
|
+
DEFAULT: colors.yellow[700],
|
|
4771
|
+
},
|
|
4772
|
+
danger: {
|
|
4773
|
+
DEFAULT: colors['red-bright'][500],
|
|
4774
|
+
},
|
|
4775
|
+
complementary: {
|
|
4776
|
+
blue: {
|
|
4777
|
+
DEFAULT: colors.blue[900],
|
|
4778
|
+
},
|
|
4779
|
+
red: {
|
|
4780
|
+
DEFAULT: colors.red[300],
|
|
4781
|
+
},
|
|
4782
|
+
yellow: {
|
|
4783
|
+
DEFAULT: colors.yellow[500],
|
|
4784
|
+
},
|
|
4785
|
+
},
|
|
4786
|
+
tags: {
|
|
4787
|
+
blue: {
|
|
4788
|
+
fg: {
|
|
4789
|
+
DEFAULT: `${colors.blue[900]}4D`,
|
|
4790
|
+
},
|
|
4791
|
+
DEFAULT: colors.blue[900],
|
|
4792
|
+
},
|
|
4793
|
+
},
|
|
4794
|
+
booleans: {
|
|
4795
|
+
informative: {
|
|
4796
|
+
fg: {
|
|
4797
|
+
primary: colors.blue[500],
|
|
4798
|
+
},
|
|
4799
|
+
bg: {
|
|
4800
|
+
primary: colors.blue[50],
|
|
4801
|
+
opacity: setOpacityToHex(colors.blue[400], 0.1),
|
|
4802
|
+
},
|
|
4803
|
+
},
|
|
4804
|
+
success: {
|
|
4805
|
+
fg: {
|
|
4806
|
+
primary: colors.green[700],
|
|
4807
|
+
},
|
|
4808
|
+
bg: {
|
|
4809
|
+
primary: colors['light-green'][50],
|
|
4810
|
+
opacity: setOpacityToHex(colors.green[600], 0.1),
|
|
4811
|
+
},
|
|
4812
|
+
},
|
|
4813
|
+
warning: {
|
|
4814
|
+
fg: {
|
|
4815
|
+
primary: colors.yellow[600],
|
|
4816
|
+
},
|
|
4817
|
+
bg: {
|
|
4818
|
+
primary: colors.yellow[900],
|
|
4819
|
+
opacity: setOpacityToHex(colors.yellow[600], 0.1),
|
|
4820
|
+
},
|
|
4821
|
+
},
|
|
4822
|
+
danger: {
|
|
4823
|
+
fg: {
|
|
4824
|
+
primary: colors.red[700],
|
|
4825
|
+
},
|
|
4826
|
+
bg: {
|
|
4827
|
+
primary: colors.red[100],
|
|
4828
|
+
opacity: setOpacityToHex(colors['red-bright'][500], 0.1),
|
|
4829
|
+
},
|
|
4830
|
+
},
|
|
4831
|
+
},
|
|
4832
|
+
};
|
|
4833
|
+
|
|
4834
|
+
({
|
|
4835
|
+
special: {
|
|
4836
|
+
degrade: {
|
|
4837
|
+
cyan: colors.cyan[300],
|
|
4838
|
+
blue: colors.blue[900],
|
|
4839
|
+
},
|
|
4840
|
+
skeleton: {
|
|
4841
|
+
primary: colors['navy-blue'][700]},
|
|
4842
|
+
},
|
|
4843
|
+
layout: {
|
|
4844
|
+
bg: colors['navy-blue'][900],
|
|
4845
|
+
'level-1': colors.white[50]},
|
|
4846
|
+
primary: {
|
|
4847
|
+
bg: {
|
|
4848
|
+
DEFAULT: colors.cyan[400],
|
|
4849
|
+
hover: colors.cyan[500],
|
|
4850
|
+
secondary: `${colors.cyan[400]}1A`,
|
|
4851
|
+
},
|
|
4852
|
+
fg: {
|
|
4853
|
+
DEFAULT: colors.white[50],
|
|
4854
|
+
},
|
|
4855
|
+
},
|
|
4856
|
+
disabled: {
|
|
4857
|
+
bg: {
|
|
4858
|
+
primary: colors['navy-blue'][600],
|
|
4859
|
+
secondary: colors['navy-blue'][700],
|
|
4860
|
+
},
|
|
4861
|
+
fg: {
|
|
4862
|
+
primary: colors['navy-blue'][700],
|
|
4863
|
+
secondary: colors['navy-blue'][600],
|
|
4864
|
+
},
|
|
4865
|
+
},
|
|
4866
|
+
content: {
|
|
4867
|
+
DEFAULT: colors['navy-blue'][900],
|
|
4868
|
+
secondary: colors['navy-blue'][500],
|
|
4869
|
+
},
|
|
4870
|
+
stroke: {
|
|
4871
|
+
DEFAULT: colors.white[300],
|
|
4872
|
+
interactive: colors.white[400],
|
|
4873
|
+
},
|
|
4874
|
+
informative: {
|
|
4875
|
+
bg: {
|
|
4876
|
+
primary: colors.blue[400],
|
|
4877
|
+
},
|
|
4878
|
+
fg: {
|
|
4879
|
+
primary: colors['dark-blue'][900],
|
|
4880
|
+
},
|
|
4881
|
+
},
|
|
4882
|
+
success: {
|
|
4883
|
+
DEFAULT: colors.green[700],
|
|
4884
|
+
},
|
|
4885
|
+
warning: {
|
|
4886
|
+
DEFAULT: colors.yellow[700],
|
|
4887
|
+
},
|
|
4888
|
+
danger: {
|
|
4889
|
+
DEFAULT: colors['red-bright'][500],
|
|
4890
|
+
},
|
|
4891
|
+
complementary: {
|
|
4892
|
+
blue: {
|
|
4893
|
+
DEFAULT: colors.blue[900],
|
|
4894
|
+
},
|
|
4895
|
+
red: {
|
|
4896
|
+
DEFAULT: colors.red[300],
|
|
4897
|
+
},
|
|
4898
|
+
yellow: {
|
|
4899
|
+
DEFAULT: colors.yellow[500],
|
|
4900
|
+
},
|
|
4901
|
+
},
|
|
4902
|
+
tags: {
|
|
4903
|
+
blue: {
|
|
4904
|
+
fg: {
|
|
4905
|
+
DEFAULT: `${colors.blue[900]}4D`,
|
|
4906
|
+
},
|
|
4907
|
+
DEFAULT: colors.blue[900],
|
|
4908
|
+
},
|
|
4909
|
+
},
|
|
4910
|
+
booleans: {
|
|
4911
|
+
informative: {
|
|
4912
|
+
fg: {
|
|
4913
|
+
primary: colors.blue[500],
|
|
4914
|
+
},
|
|
4915
|
+
bg: {
|
|
4916
|
+
primary: colors.blue[50],
|
|
4917
|
+
opacity: colors.blue[400],
|
|
4918
|
+
},
|
|
4919
|
+
},
|
|
4920
|
+
success: {
|
|
4921
|
+
fg: {
|
|
4922
|
+
primary: colors.green[700],
|
|
4923
|
+
},
|
|
4924
|
+
bg: {
|
|
4925
|
+
primary: colors['light-green'][50],
|
|
4926
|
+
opacity: colors.green[600],
|
|
4927
|
+
},
|
|
4928
|
+
},
|
|
4929
|
+
warning: {
|
|
4930
|
+
fg: {
|
|
4931
|
+
primary: colors.yellow[600],
|
|
4932
|
+
},
|
|
4933
|
+
bg: {
|
|
4934
|
+
primary: colors.yellow[900],
|
|
4935
|
+
opacity: `${colors.yellow[600]}1A`,
|
|
4936
|
+
},
|
|
4937
|
+
},
|
|
4938
|
+
danger: {
|
|
4939
|
+
fg: {
|
|
4940
|
+
primary: colors['red-bright'][500],
|
|
4941
|
+
},
|
|
4942
|
+
bg: {
|
|
4943
|
+
primary: colors['red-bright'][900],
|
|
4944
|
+
opacity: setOpacityToHex(colors['red-bright'][500], 0.1),
|
|
4945
|
+
},
|
|
4946
|
+
},
|
|
4947
|
+
},
|
|
4948
|
+
});
|
|
4949
|
+
|
|
4950
|
+
const ThemeContext = React.createContext({
|
|
4951
|
+
isDark: false,
|
|
4952
|
+
theme: bordTheme,
|
|
4953
|
+
});
|
|
4954
|
+
|
|
4955
|
+
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}";
|
|
4956
|
+
styleInject(css_248z);
|
|
4957
|
+
|
|
4958
|
+
const positions = {
|
|
4959
|
+
top: 'flex-col-reverse',
|
|
4960
|
+
bottom: 'flex-col',
|
|
4961
|
+
start: 'flex-row-reverse',
|
|
4962
|
+
end: 'flex-row',
|
|
4963
|
+
};
|
|
4964
|
+
const BordTab = ({ label, className = '', style, icon, iconPosition = 'end', textColor, selected = false, value, disabled = false, onClick, }) => {
|
|
4965
|
+
const bord = React.useContext(ThemeContext);
|
|
4966
|
+
const context = React.useContext(TabsContext);
|
|
4967
|
+
const { setActiveTab, activeTab } = context ?? {};
|
|
4968
|
+
const getColors = (textColor) => {
|
|
4969
|
+
let colorVariableName;
|
|
4970
|
+
let bgColorVariableName;
|
|
4971
|
+
if (!textColor) {
|
|
4972
|
+
colorVariableName = bord.theme.content.secondary;
|
|
4973
|
+
bgColorVariableName = 'transparent';
|
|
4974
|
+
return {
|
|
4975
|
+
colorVariableName,
|
|
4976
|
+
bgColorVariableName,
|
|
4977
|
+
};
|
|
4978
|
+
}
|
|
4979
|
+
const color = textColor;
|
|
4980
|
+
const isHex = color.startsWith('#');
|
|
4981
|
+
colorVariableName = isHex ? textColor : bord.theme.booleans?.[textColor]?.fg?.primary;
|
|
4982
|
+
bgColorVariableName = isHex ? setOpacityToHex(textColor, 0.1) : bord.theme.booleans?.[textColor]?.bg?.opacity;
|
|
4983
|
+
return {
|
|
4984
|
+
colorVariableName,
|
|
4985
|
+
bgColorVariableName,
|
|
4986
|
+
};
|
|
4987
|
+
};
|
|
4988
|
+
const { bgColorVariableName, colorVariableName } = getColors(textColor ?? context?.textColor);
|
|
4989
|
+
const isSelected = !disabled && (selected || (value !== undefined && value === activeTab));
|
|
4990
|
+
const handleOnClick = (evt) => {
|
|
4991
|
+
if (disabled)
|
|
4992
|
+
return;
|
|
4993
|
+
if (onClick) {
|
|
4994
|
+
onClick(evt, value);
|
|
4995
|
+
}
|
|
4996
|
+
else {
|
|
4997
|
+
setActiveTab?.(value);
|
|
4998
|
+
}
|
|
4999
|
+
};
|
|
5000
|
+
return (jsxRuntime.jsxs("button", { type: "button", onClick: handleOnClick, style: {
|
|
5001
|
+
...style,
|
|
5002
|
+
'--bord-tab-color': colorVariableName,
|
|
5003
|
+
'--bord-tab-bgcolor': bgColorVariableName,
|
|
5004
|
+
}, className: `bordTabRoot ${disabled ? 'disabled' : ''} ${isSelected ? 'selected' : ''} ${positions[iconPosition]} ${className}`, children: [label, icon] }));
|
|
4372
5005
|
};
|
|
4373
5006
|
|
|
5007
|
+
function BordTabsGroupWithBadge({ value, defaultValue, tabs, textColor, onChange }) {
|
|
5008
|
+
const [active, setActive] = React.useState(defaultValue);
|
|
5009
|
+
React.useEffect(() => {
|
|
5010
|
+
if (value) {
|
|
5011
|
+
setActive(value);
|
|
5012
|
+
}
|
|
5013
|
+
}, [value]);
|
|
5014
|
+
return (jsxRuntime.jsx(BordTabs, { value: active, textColor: textColor, onChange: value => {
|
|
5015
|
+
setActive(value);
|
|
5016
|
+
onChange?.(value);
|
|
5017
|
+
}, children: tabs.map((tab, idx) => {
|
|
5018
|
+
const isSelected = active === tab.value || active === idx;
|
|
5019
|
+
return (jsxRuntime.jsx(BordTab, { value: tab.value ?? idx, disabled: tab.disabled, selected: isSelected, label: tab.label, icon: tab.badge && (jsxRuntime.jsx(BordBadge, { color: textColor, disabled: tab.disabled, label: tab.badge?.label, filled: tab.badge?.filled ?? isSelected })) }, tab.value));
|
|
5020
|
+
}) }));
|
|
5021
|
+
}
|
|
5022
|
+
|
|
4374
5023
|
exports.BordAttentionButton = BordAttentionButton;
|
|
4375
5024
|
exports.BordAvatar = BordAvatar;
|
|
4376
5025
|
exports.BordBackButton = BordBackButton;
|
|
4377
5026
|
exports.BordButton = BordButton;
|
|
4378
5027
|
exports.BordFlag = BordFlag;
|
|
4379
5028
|
exports.BordInfoBanner = BordInfoBanner;
|
|
5029
|
+
exports.BordInfoCard = BordInfoCard;
|
|
5030
|
+
exports.BordMetricCard = BordMetricCard;
|
|
4380
5031
|
exports.BordOneToneIcon = BordOneToneIcon;
|
|
5032
|
+
exports.BordTab = BordTab;
|
|
5033
|
+
exports.BordTabBar = BordTabBar;
|
|
5034
|
+
exports.BordTabs = BordTabs;
|
|
5035
|
+
exports.BordTabsGroupWithBadge = BordTabsGroupWithBadge;
|
|
4381
5036
|
exports.BordTextInput = BordTextInput;
|
|
4382
5037
|
exports.BordTwoToneIcon = BordTwoToneIcon;
|
|
4383
5038
|
//# sourceMappingURL=index.js.map
|