@hexure/ui 1.13.68 → 1.13.70

package/dist/esm/index.js

@@ -2801,7 +2801,19 @@ const StyledButton = styled.button `
     return '0px';
 }};
   outline: none;
-  background: ${props => props.$bg_color || props.theme.PRIMARY_COLOR.Hex};
+  background: ${props => {
+    if (props.$disabled) {
+        if (props.$format === 'secondary') {
+            return '#66666626';
+        }
+        else {
+            return '#e7e6e6';
+        }
+    }
+    else {
+        return props.$bg_color || props.theme.PRIMARY_COLOR.Hex;
+    }
+}};
   width: ${props => {
     if (props.$hasChildren) {
         return 'auto';
@@ -2820,7 +2832,19 @@ const StyledButton = styled.button `
   opacity: ${props => (props.$disabled ? 0.6 : 0.9)};
   border-width: 1px;
   border-style: solid;
-  border-color: ${props => props.$border_color || props.theme.PRIMARY_COLOR.Hex};
+  border-color: ${props => {
+    if (props.$disabled) {
+        if (props.$format === 'secondary') {
+            return '#66666680';
+        }
+        else {
+            return '#e7e6e6';
+        }
+    }
+    else {
+        return props.$border_color || props.theme.PRIMARY_COLOR.Hex;
+    }
+}};
   box-sizing: border-box;
 
   &:active,
@@ -2896,10 +2920,15 @@ const Button = (_a) => {
     };
     const format_styles = button_type_mapping[format];
     const baseId = dataItemid || 'button';
-    const button_view = (React.createElement(StyledButton, Object.assign({ "$bg_color": format_styles.background_color, "$border_color": format_styles.border_color, "$disabled": disabled || loading, "$hasChildren": !!has_children, "$iconPosition": iconPosition, "$margin": margin, "$small": small, disabled: disabled || loading, onClick: disabled || loading ? undefined : onClick, title: title, type: type || (isForm ? 'submit' : undefined) }, accessibleProps, { "data-itemid": `${baseId}-styled-button` }),
-        children ? (React.createElement(Label$5, { "$content_color": format_styles.content_color, "$small": small, "data-itemid": `${baseId}-label` }, children)) : null,
+    const button_view = (React.createElement(StyledButton, Object.assign({ "$bg_color": format_styles.background_color, "$border_color": format_styles.border_color, "$disabled": disabled || loading, "$format": format, "$hasChildren": !!has_children, "$iconPosition": iconPosition, "$margin": margin, "$small": small, disabled: disabled || loading, onClick: disabled || loading ? undefined : onClick, title: title, type: type || (isForm ? 'submit' : undefined) }, accessibleProps, { "data-itemid": `${baseId}-styled-button` }),
+        children ? (React.createElement(Label$5, { "$content_color": disabled || loading ? '#666666' : format_styles.content_color, "$small": small, "data-itemid": `${baseId}-label` }, children)) : null,
         icon && !badge ? (React.createElement(StyledIcon$5, { "$hasChildren": !!has_children, "data-itemid": `${baseId}-icon` },
-            React.createElement(Icon, { color: format ? format_styles === null || format_styles === void 0 ? void 0 : format_styles.content_color : '#fff', "data-itemid": `${baseId}-icon-svg`, path: loading ? mdiLoading : icon, size: small ? '20px' : '24px', spin: loading }))) : null,
+            React.createElement(Icon, { color: (() => {
+                    if (disabled || loading) {
+                        return '#666666';
+                    }
+                    return format ? format_styles.content_color : '#fff';
+                })(), "data-itemid": `${baseId}-icon-svg`, path: loading ? mdiLoading : icon, size: small ? '20px' : '24px', spin: loading }))) : null,
         badge && !icon ? (React.createElement(Badge$1, { "$bg_color": format_styles.badge_bg_color, "$content_color": format_styles.badge_content_color, "$small": small, "data-itemid": `${baseId}-badge` }, badge)) : null));
     if (toolTip && Object.keys(toolTip).length) {
         return (React.createElement(Tooltip, Object.assign({}, toolTip, { trigger: (toolTip === null || toolTip === void 0 ? void 0 : toolTip.trigger) || button_view }), toolTip === null || toolTip === void 0 ? void 0 : toolTip.children));
@@ -3537,7 +3566,7 @@ const Input$2 = styled.input `
   width: 0;
   &:checked + span {
     background-color: ${Colors.PRIMARY.Hex};
-    border-color: ${Colors.PRIMARY.Hex};
+    border-color: ${props => (props.$invalid ? Colors.RED.Hex : Colors.PRIMARY.Hex)};
   }
   &:checked:disabled + span {
     background-color: ${Colors.MEDIUM_GRAY.Hex};
@@ -3613,7 +3642,7 @@ const Checkbox = (_a) => {
     var { children, color, disabled, checked, onChange, invalid, tooltip, tabIndex, dataItemid, isInvalidRedBackground = false, isWarningError = false } = _a, accessibleProps = __rest(_a, ["children", "color", "disabled", "checked", "onChange", "invalid", "tooltip", "tabIndex", "dataItemid", "isInvalidRedBackground", "isWarningError"]);
     const baseId = dataItemid || 'checkbox';
     return (React.createElement(Wrapper$b, Object.assign({ "$disabled": disabled }, accessibleProps, { "data-itemid": `${baseId}-wrapper` }),
-        React.createElement(Input$2, { checked: checked, "data-itemid": `${baseId}-input`, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, tabIndex: disabled ? -1 : tabIndex, type: 'checkbox' }),
+        React.createElement(Input$2, { "$invalid": invalid, checked: checked, "data-itemid": `${baseId}-input`, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, tabIndex: disabled ? -1 : tabIndex, type: 'checkbox' }),
         React.createElement(Check$1, { "$invalid": invalid, "$isInvalidRedBackground": isInvalidRedBackground, "$isWarningError": isWarningError, "data-itemid": `${baseId}-check` }),
         children ? (React.createElement(Label$3, { color: color, "data-itemid": `${baseId}-label` },
             children,
@@ -5922,7 +5951,7 @@ const Input = styled.input `
   height: 0;
   width: 0;
   &:checked + span {
-    border-color: ${Colors.PRIMARY.Hex};
+    border-color: ${props => (props.$invalid ? Colors.RED.Hex : Colors.PRIMARY.Hex)};
   }
   &:checked + span:after {
     background-color: ${Colors.PRIMARY.Hex};
@@ -5996,7 +6025,7 @@ const Radio = (_a) => {
     var { children, disabled, checked, onChange, value, invalid, tooltip, tabIndex, dataItemid, isInvalidRedBackground = false, isWarningError = false } = _a, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange", "value", "invalid", "tooltip", "tabIndex", "dataItemid", "isInvalidRedBackground", "isWarningError"]);
     const baseId = dataItemid || 'radio';
     return (React.createElement(Wrapper$2, Object.assign({}, accessibleProps, { "data-itemid": `${baseId}-wrapper` }),
-        React.createElement(Input, { checked: checked, "data-itemid": `${baseId}-input`, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, tabIndex: disabled ? -1 : tabIndex, type: 'radio', value: value }),
+        React.createElement(Input, { "$invalid": invalid, checked: checked, "data-itemid": `${baseId}-input`, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, tabIndex: disabled ? -1 : tabIndex, type: 'radio', value: value }),
         React.createElement(Check, { "$invalid": invalid, "$isInvalidRedBackground": isInvalidRedBackground, "$isWarningError": isWarningError, "data-itemid": `${baseId}-check` }),
         React.createElement(Label, { "data-itemid": `${baseId}-label` },
             children,