@capillarytech/blaze-ui 0.1.6-alpha.40 → 0.1.6-alpha.42

package/CapUnifiedSelect/styles.js

@@ -95,10 +95,33 @@ export const StyledInfoIcon = styled.span`
 
 export const selectStyles = css`
   &.cap-unified-select-container {
+    .ant-tree-select-dropdown{
+      padding: 0px !important;
+    }
     .cap-unified-tree-select{
-      height: 32px !important;
+      height: 40px !important;
       width: 340px !important;
     }
+    .cap-unified-select-upload-container{
+      cursor: pointer !important;
+      display: flex !important;
+      align-items: center !important;
+      border-bottom: 1px solid #f0f0f0 !important;
+      height: 40px !important;
+    }
+    .cap-unified-select-select-all-container{
+      padding: 8px 12px !important;
+      cursor: pointer !important;
+      display: flex !important;
+      align-items: center !important;
+      border-bottom: 1px solid #f0f0f0 !important;
+      height: 40px !important;
+    }
+    .ant-select-dropdown{
+      margin-top: -5px !important;
+      border-radius: 4px !important;
+      box-shadow: 0px 4px 8px -2px #091E4240, 0px 0px 1px 0px #091E424F !important;
+    }
     .ant-select-prefix{
       font-size: 14px !important;
       font-weight: 400 !important;
@@ -115,7 +138,7 @@ export const selectStyles = css`
     .cap-unified-select-header-tooltip{
       width: 16px !important;
       height: 16px !important;
-      color: #B3BAC5 !important;
+      color: ${styledVars.CAP_G06} !important;
     }
     .cap-unified-select-header-byline-text{
       font-family: ${styledVars.FONT_FAMILY} !important;
@@ -135,6 +158,10 @@ export const selectStyles = css`
     .ant-tree-select-dropdown .treeSelect-popup-container .ant-select-tree .ant-select-tree-treenode{
       margin: 0px !important;
     }
+    .ant-tree-select-dropdown .ant-select-tree .ant-select-tree-treenode{
+      line-height: 40px !important;
+      margin-bottom: 0px !important;
+    }
     .cap-unified-tree-select .multiSelect-popup-container .ant-tree-select-dropdown .ant-select-tree .ant-select-tree-treenode{
       margin-left: 10px !important;
     }
@@ -158,312 +185,43 @@ export const selectStyles = css`
     .cap-unified-select-no-result-text{
       font-weight: 500;
     }
-  }
-  &.cap-unified-select {
-    width: 100%;
-    font-family: ${styledVars.FONT_FAMILY};
-
-    .ant-select-selector {
-      border-radius: ${styledVars.RADIUS_04};
-      transition: ${styledVars.TRANSITION_ALL};
-      padding: 0 12px;
-      min-height: 32px;
-      display: flex;
-      align-items: center;
-      
-      &:hover {
-        border-color: ${styledVars.CAP_G11};
-      }
-    }
-
-    /* Right slot content styles */
-    .cap-unified-select-right-slot {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      margin-left: 8px;
-    }
-
-    &.ant-select-focused {
-      .ant-select-selector {
-        border-color: ${styledVars.CAP_G01} !important;
-        box-shadow: none !important;
-      }
-    }
-
-    /* Error state */
-    &.ant-select-status-error {
-      .ant-select-selector {
-        border-color: ${styledVars.CAP_RED};
-      }
-    }
-
-    /* Disabled state */
-    &.ant-select-disabled {
-      .ant-select-selector {
-        background-color: ${styledVars.CAP_G08};
-        cursor: not-allowed;
-      }
-    }
-
-    /* Dropdown styles */
-    .ant-select-dropdown, 
-    &.ant-select-dropdown,
-    &.ant-select-dropdown-placement-bottomLeft {
-      padding: 0;
-      border-radius: 12px !important;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-      overflow: hidden;
-
-      /* Option base style - no background */
-      .ant-select-item-option {
-        padding: 10px 16px;
-        font-size: 14px;
-        color: #1c2530;
-        font-weight: 500;
-        background-color: transparent !important;
-
-        /* Hover state only */
-        &:not(.ant-select-item-option-disabled):hover {
-          background-color: #fffbe6 !important;
-          border-radius: 4px;
-          color: #1c2530 !important;
-        }
-        
-        /* Ensure unselected hover has proper background even after removal */
-        &:hover:not(.ant-select-item-option-disabled):not(.ant-select-item-option-selected) {
-          background-color: #fffbe6 !important;
-          color: #1c2530 !important;
-          border-radius: 4px;
-        }
-
-        /* Selected state */
-        &-selected:not(.ant-select-item-option-disabled) {
-          background-color: #e9f0fe !important;
-          color: #1c2530 !important;
-          font-weight: 500;
-        }
-
-        /* Remove active state background unless hovered */
-        &-active:not(:hover):not(.ant-select-item-option-disabled) {
-          background-color: transparent !important;
-        }
-      }
-
-      /* Search input styles */
-      .ant-select-dropdown-search,
-      .ant-select-search {
-        padding: 8px 12px;
-        border-bottom: 1px solid #f0f0f0;
-        
-        input {
-          border-radius: ${styledVars.RADIUS_04};
-          transition: ${styledVars.TRANSITION_ALL};
-          
-          &:focus {
-            border-color: ${styledVars.CAP_G01};
-            box-shadow: none;
-          }
-        }
-      }
-      
-      /* Scrollbar */
-      .rc-virtual-list-scrollbar-thumb {
-        background-color: #dcdcdc;
-        border-radius: 4px;
-      }
-
-      /* Divider */
-      .ant-divider-horizontal {
-        margin: 0;
-      }
-      
-      /* No result UI */
-      .no-result {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        height: 200px;
-        color: #8c8c8c;
-        font-size: 14px;
-      }
-      
-      /* Dropdown search inside custom popup */
-      .dropdown-search {
-        padding: 8px;
-        border-bottom: 1px solid #f0f0f0;
-      }
-      
-      /* Select all checkbox */
-      .select-all-checkbox {
-        display: flex;
-        align-items: center;
-        padding: 8px 12px;
-        cursor: pointer;
-        font-weight: 500;
-        border-bottom: 1px solid #f0f0f0;
-        user-select: none;
-        
-        input[type="checkbox"] {
-          cursor: pointer;
-        }
-      }
-      
-      /* Footer buttons */
-      .dropdown-footer {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 8px;
-        border-top: 1px solid #f0f0f0;
-      }
-      
-      /* Selected counter */
-      .selected-count {
-        color: #8c8c8c;
-        font-size: 12px;
-      }
-
-      /* Unchecked border color */
-      .ant-checkbox-inner {
-        border-color: #42b040; /* Your desired border color */
-      }
-
-      /* When checked - change background and border */
-      .ant-checkbox-checked .ant-checkbox-inner {
-        background-color: #42b040; /* Fill color when checked */
-        border-color: #42b040;
-      }
-
-      /* Checkmark color */
-      .ant-checkbox-checked .ant-checkbox-inner::after {
-        border-color: #42b040; /* The checkmark tick color */
-      }
+    .ant-tree-select:hover .ant-select-selector {
+      border-color: #7A869A !important;
     }
-
-    /* Multiple selection styles */
-    &.ant-select-multiple {
-      .ant-select-selection-item {
-        background-color: #e9f0fe !important;
-        border: none;
-        border-radius: ${styledVars.RADIUS_04};
-        color: #1c2530;
-        font-weight: 500;
-        margin: 2px 4px 2px 0;
-        padding: 0 8px;
-        height: 24px;
-        line-height: 22px;
-
-        &-remove {
-          color: ${styledVars.CAP_PRIMARY.base};
-          
-          &:hover {
-            color: ${styledVars.CAP_PRIMARY.hover};
-          }
-        }
-      }
-
-      .ant-select-selection-overflow {
-        flex-wrap: wrap;
-        gap: 4px;
-      }
+    .ant-tree-select-focused .ant-select-selector,
+    .ant-tree-select-open .ant-select-selector {
+      border-color: #7A869A !important;
+      box-shadow: none !important;
+      outline: none !important; /* remove blue outline */
     }
-
-    /* Tree select styles */
-    .ant-select-tree {
-      padding: 4px 0;
-
-      .ant-select-tree-node-content-wrapper {
-        padding: 4px 8px;
-        border-radius: ${styledVars.RADIUS_04};
-        background-color: transparent !important;
-        transition: background 0.3s;
-
-        &:hover {
-          background-color: #fffbe6 !important;
-          color: #1c2530 !important;
-          border-radius: 4px;
-        }
-
-        &.ant-select-tree-node-selected {
-          color: #1c2530;
-          font-weight: 500;
-        }
-      }
-
-      .ant-select-tree-switcher {
-        width: 24px;
-        height: 24px;
-        line-height: 24px;
-      }
-
-      .ant-select-tree-checkbox {
-        margin: 4px 8px 4px 0;
-      }
-      
-      .ant-select-tree-treenode {
-        padding: 2px 0;
-        
-        &:hover {
-          background-color: transparent;
-        }
-      }
-      
-      .ant-select-tree-checkbox-checked .ant-select-tree-checkbox-inner {
-        background-color: #42b040;
-        border-color: #42b040;
-      }
-
-      .ant-select-tree-checkbox-checked .ant-select-tree-node-content-wrapper {
-        background-color: #e9f0fe !important;
-        color: #1c2530 !important;
-        font-weight: 500;
-      }
+    .cap-unified-select-search-container{
+      border-bottom: 1px solid #EBECF0 !important;
+      line-height: 40px !important;
     }
-
-    /* Size variations */
-    &.ant-select-lg {
-      .ant-select-selector {
-        height: 40px;
-        padding: 0 16px;
-      }
-
-      .ant-select-selection-item {
-        height: 28px;
-        line-height: 26px;
-      }
+    .cap-unified-select-upload-button{
+      color: ${styledVars.CAP_BLUE01} !important;
+      display: flex !important;
+      align-items: center !important;
+      font-size: 14px !important;
+      font-weight: 400 !important;
+      line-height: 20px !important;
     }
-
-    &.ant-select-sm {
-      .ant-select-selector {
-        height: 24px;
-        padding: 0 8px;
-      }
-
-      .ant-select-selection-item {
-        height: 20px;
-        line-height: 18px;
-      }
+    .cap-unified-select-confirm-container{
+      display: flex !important;
+      justify-content: space-between !important;
+      align-items: center !important;
+      padding: 8px 12px !important;
+      border-top: 1px solid #f0f0f0 !important;
     }
-
-    /* Loading state */
-    &.ant-select-loading {
-      .ant-select-arrow {
-        .anticon-loading {
-          color: ${styledVars.CAP_PRIMARY.base};
-        }
-      } 
+    .cap-unified-select-confirm-button{
+      margin-right: 8px !important;
     }
-
-    &.cap-unified-tree-select .ant-select-selection-overflow {
-      display: none; /* hides pill wrapper */
+    .cap-unified-select-selected-count{
+      color: ${styledVars.CAP_G05} !important;
+      font-size: 14px !important;
     }
-
-    &.cap-unified-tree-select .suffix-counter {
-      color: #1c2530;
-      font-weight: 500;
-      margin-right: 12px; /* optional, adjust spacing */
+    .cap-unified-select-status{
+      color: #E83135 !important;
     }
   }
 `; 

package/index.js

@@ -1,8 +1,12 @@
 // Import and export all components
+export { default as CapIcon } from './CapIcon';
 export { default as CapInput } from './CapInput';
+export { default as CapLabel } from './CapLabel';
+export { default as CapRow } from './CapRow';
 export { default as CapSkeleton } from './CapSkeleton';
 export { default as CapSpin } from './CapSpin';
 export { default as CapTable } from './CapTable';
+export { default as CapTooltip } from './CapTooltip';
 export { default as CapUnifiedSelect } from './CapUnifiedSelect';
 
 // Export utilities

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/blaze-ui",
   "author": "Capillary Technologies",
-  "version": "0.1.6-alpha.40",
+  "version": "0.1.6-alpha.42",
   "description": "Capillary UI component library with Ant Design v5",
   "main": "./index.js",
   "sideEffects": [