@brickclay-org/ui 0.1.2 → 0.1.4

package/index.d.ts

@@ -273,6 +273,7 @@ declare class BkCustomCalendar implements OnInit, OnDestroy, OnChanges, ControlV
      */
     private parseDateString;
     formatDateToString(date: Date): string;
+    get showClearIcon(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<BkCustomCalendar, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BkCustomCalendar, "bk-custom-calendar", never, { "enableTimepicker": { "alias": "enableTimepicker"; "required": false; }; "autoApply": { "alias": "autoApply"; "required": false; }; "closeOnAutoApply": { "alias": "closeOnAutoApply"; "required": false; }; "showCancel": { "alias": "showCancel"; "required": false; }; "linkedCalendars": { "alias": "linkedCalendars"; "required": false; }; "singleDatePicker": { "alias": "singleDatePicker"; "required": false; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; }; "showISOWeekNumbers": { "alias": "showISOWeekNumbers"; "required": false; }; "customRangeDirection": { "alias": "customRangeDirection"; "required": false; }; "lockStartDate": { "alias": "lockStartDate"; "required": false; }; "position": { "alias": "position"; "required": false; }; "drop": { "alias": "drop"; "required": false; }; "dualCalendar": { "alias": "dualCalendar"; "required": false; }; "showRanges": { "alias": "showRanges"; "required": false; }; "timeFormat": { "alias": "timeFormat"; "required": false; }; "clearableTime": { "alias": "clearableTime"; "required": false; }; "enableSeconds": { "alias": "enableSeconds"; "required": false; }; "customRanges": { "alias": "customRanges"; "required": false; }; "multiDateSelection": { "alias": "multiDateSelection"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "opens": { "alias": "opens"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; "appendToBody": { "alias": "appendToBody"; "required": false; }; "isDisplayCrossIcon": { "alias": "isDisplayCrossIcon"; "required": false; }; "hasError": { "alias": "hasError"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "showCancelApply": { "alias": "showCancelApply"; "required": false; }; "selectedValue": { "alias": "selectedValue"; "required": false; }; "displayFormat": { "alias": "displayFormat"; "required": false; }; "required": { "alias": "required"; "required": false; }; }, { "selected": "selected"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
 }
@@ -361,6 +362,7 @@ declare class BkTimePicker implements OnInit, OnChanges, AfterViewInit, ControlV
     placeholder: string;
     clearable: boolean;
     position: 'left' | 'right';
+    variation: 'default' | 'lg';
     pickerId: string;
     closePicker: number;
     timeFormat: 12 | 24;
@@ -428,7 +430,7 @@ declare class BkTimePicker implements OnInit, OnChanges, AfterViewInit, ControlV
     onMinuteWheelScroll(): void;
     onSecondWheelScroll(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<BkTimePicker, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BkTimePicker, "bk-time-picker", never, { "required": { "alias": "required"; "required": false; }; "value": { "alias": "value"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "position": { "alias": "position"; "required": false; }; "pickerId": { "alias": "pickerId"; "required": false; }; "closePicker": { "alias": "closePicker"; "required": false; }; "timeFormat": { "alias": "timeFormat"; "required": false; }; "showSeconds": { "alias": "showSeconds"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "change": "change"; "timeChange": "timeChange"; "pickerOpened": "pickerOpened"; "pickerClosed": "pickerClosed"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BkTimePicker, "bk-time-picker", never, { "required": { "alias": "required"; "required": false; }; "value": { "alias": "value"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "position": { "alias": "position"; "required": false; }; "variation": { "alias": "variation"; "required": false; }; "pickerId": { "alias": "pickerId"; "required": false; }; "closePicker": { "alias": "closePicker"; "required": false; }; "timeFormat": { "alias": "timeFormat"; "required": false; }; "showSeconds": { "alias": "showSeconds"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "change": "change"; "timeChange": "timeChange"; "pickerOpened": "pickerOpened"; "pickerClosed": "pickerClosed"; }, never, never, true, never>;
 }
 
 /**
@@ -754,6 +756,7 @@ declare class BkSelect implements ControlValueAccessor {
     iconAlt: string;
     label: string;
     required: Boolean;
+    variation: 'default' | 'sm';
     iconSrc?: string;
     multiple: i0.InputSignal<boolean>;
     maxLabels: i0.InputSignal<number>;
@@ -784,6 +787,7 @@ declare class BkSelect implements ControlValueAccessor {
     optionsRef: QueryList<ElementRef>;
     controlWrapper: ElementRef<HTMLDivElement>;
     private _value;
+    private static activeInstance;
     isOpen: i0.WritableSignal<boolean>;
     selectedOptions: i0.WritableSignal<any[]>;
     searchTerm: i0.WritableSignal<string>;
@@ -835,9 +839,9 @@ declare class BkSelect implements ControlValueAccessor {
         items: any[];
     }[]>;
     resolveColor(item: any): string | null;
-    getRemainingItems(): string | string[];
+    getRemainingItems(): string[];
     static ɵfac: i0.ɵɵFactoryDeclaration<BkSelect, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BkSelect, "bk-select", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "bindLabel": { "alias": "bindLabel"; "required": false; "isSignal": true; }; "bindValue": { "alias": "bindValue"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "notFoundText": { "alias": "notFoundText"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "clearAllText": { "alias": "clearAllText"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "colorKey": { "alias": "colorKey"; "required": false; "isSignal": true; }; "iconAlt": { "alias": "iconAlt"; "required": false; }; "label": { "alias": "label"; "required": false; }; "required": { "alias": "required"; "required": false; }; "iconSrc": { "alias": "iconSrc"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "maxLabels": { "alias": "maxLabels"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "allSelect": { "alias": "allSelect"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "dropdownPosition": { "alias": "dropdownPosition"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "appendToBody": { "alias": "appendToBody"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "open": "open"; "close": "close"; "focus": "focus"; "blur": "blur"; "search": "search"; "clear": "clear"; "change": "change"; "scrollToEnd": "scrollToEnd"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BkSelect, "bk-select", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "bindLabel": { "alias": "bindLabel"; "required": false; "isSignal": true; }; "bindValue": { "alias": "bindValue"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "notFoundText": { "alias": "notFoundText"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "clearAllText": { "alias": "clearAllText"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "colorKey": { "alias": "colorKey"; "required": false; "isSignal": true; }; "iconAlt": { "alias": "iconAlt"; "required": false; }; "label": { "alias": "label"; "required": false; }; "required": { "alias": "required"; "required": false; }; "variation": { "alias": "variation"; "required": false; }; "iconSrc": { "alias": "iconSrc"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "maxLabels": { "alias": "maxLabels"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "allSelect": { "alias": "allSelect"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "dropdownPosition": { "alias": "dropdownPosition"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "appendToBody": { "alias": "appendToBody"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "open": "open"; "close": "close"; "focus": "focus"; "blur": "blur"; "search": "search"; "clear": "clear"; "change": "change"; "scrollToEnd": "scrollToEnd"; }, never, never, true, never>;
 }
 
 type BkInputType = 'text' | 'email' | 'password' | 'number' | 'url' | 'tel';
@@ -986,6 +990,7 @@ interface TabItem {
     direction?: TabIconDirection;
     iconTooltip?: string | string[];
     iconTooltipDirection?: 'left' | 'right' | 'top' | 'bottom';
+    error?: boolean;
 }
 declare class BkTabs {
     list: TabItem[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brickclay-org/ui",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "schematics": "./schematics/collection.json",
   "ng-add": {
     "save": "dependencies"

package/src/lib/grid/components/grid/grid.css

@@ -1,18 +1,33 @@
-
 /*---------- Table Start -------- */
 .grid-header {
-  @apply bg-[#FBFBFC] text-xs text-[#60646C] leading-5 font-semibold capitalize px-4 py-2 whitespace-nowrap;
+  @apply bg-[#F9FAFA] text-xs text-[#60646C] font-semibold capitalize px-[17px] py-2.5 whitespace-nowrap;
+  box-shadow: 0 1px 0 0 #EBEDF3;
+  -webkit-transform: translateZ(0);
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+}
+
+thead tr th:first-child {
+  border-top-left-radius: 0.75rem;
+}
+
+thead tr th:last-child {
+  border-top-right-radius: 0.75rem;
 }
 
 .grid-cell {
-  @apply text-[#15191E] text-[13px] font-medium leading-4 px-4 py-2 border border-[#EBEDF3] border-b-0;
+  @apply text-[#15191E] text-[13px] font-medium leading-4 px-4 py-2 border-x border-b border-[#EBEDF3];
 }
-.grid-cell:last-child{
+
+.grid-cell:last-child {
   @apply border-e-0;
 }
-.grid-cell:first-child{
+
+.grid-cell:first-child {
   @apply border-s-0;
 }
+
 .grid-first-cell {
   @apply border-s-0;
 }
@@ -26,15 +41,16 @@
 }
 
 .grid-action-sticky::before {
-  @apply absolute top-0 bottom-0 left-[-8px] w-2 ;
+  @apply absolute top-0 bottom-0 left-[-8px] w-2;
   content: '';
   background-image: linear-gradient(to left, rgba(0, 0, 0, 0.05), transparent);
 }
 
 
-.grid-required{
-  @apply  font-medium text-sm leading-normal after:content-['*'] after:text-[#C10007] after:ms-0.5;
+.grid-required {
+  @apply font-medium text-sm leading-normal after:content-['*'] after:text-[#C10007] after:ms-0.5;
 }
+
 /*-----Sort Icons Start-----*/
 .grid-sort {
   display: inline-flex;
@@ -77,19 +93,19 @@
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%2378829D'/%3e%3c/svg%3e");
 }
 
-.grid-asc > .grid-sort-icon:before {
+.grid-asc>.grid-sort-icon:before {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%234B5675'/%3e%3c/svg%3e");
 }
 
-.grid-asc > .grid-sort-icon:after {
+.grid-asc>.grid-sort-icon:after {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%23C4CADA'/%3e%3c/svg%3e");
 }
 
-.grid-desc > .grid-sort-icon:before {
+.grid-desc>.grid-sort-icon:before {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%23C4CADA'/%3e%3c/svg%3e");
 }
 
-.grid-desc > .grid-sort-icon:after {
+.grid-desc>.grid-sort-icon:after {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%234B5675'/%3e%3c/svg%3e");
 }
 
@@ -105,9 +121,9 @@
   display: table;
   width: 100%;
   background: #fff;
-  box-shadow: 0 5px 5px -3px rgba(0,0,0,.2),
-              0 8px 10px 1px rgba(0,0,0,.14),
-              0 3px 14px 2px rgba(0,0,0,.12);
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2),
+    0 8px 10px 1px rgba(0, 0, 0, .14),
+    0 3px 14px 2px rgba(0, 0, 0, .12);
 }
 
 .cdk-drag-placeholder {
@@ -117,7 +133,5 @@
 
 .cdk-drag-animating,
 .cdk-drop-list-dragging .cdk-drag {
-  transition: transform 250ms cubic-bezier(0,0,.2,1);
+  transition: transform 250ms cubic-bezier(0, 0, .2, 1);
 }
-
-

package/src/lib/hierarchical-select/hierarchical-select.css

@@ -43,7 +43,7 @@
 }
 
 .hierarchical-dropdown-panel {
-  @apply absolute left-0 top-[calc(100%+4px)] w-full min-w-[250px] max-w-[320px] bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[99] overflow-hidden cursor-default p-2.5;
+  @apply absolute left-0 top-[calc(100%+4px)] w-full min-w-[250px] max-w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[99] overflow-hidden cursor-default p-2.5;
 }
 
 .hierarchical-dropdown-panel-fixed {
@@ -55,7 +55,7 @@
 }
 
 .hierarchical-search-wrapper {
-  @apply flex items-center border border-[#E3E3E7] rounded-md px-3 py-[7px] bg-white transition-colors focus-within:border-[#6B7080];
+  @apply flex items-center border border-[#E3E3E7] rounded-md px-3 py-[7px] bg-white transition-colors focus-within:border-[#E3E3E7];
 }
 
 .hierarchical-search-input {
@@ -63,7 +63,7 @@
 }
 
 .hierarchical-back {
-  @apply w-full text-left px-2.5 py-2 text-sm text-[#141414] hover:bg-[#F8F8F8] rounded-md transition-colors mt-1 flex items-center gap-1.5;
+  @apply w-full text-left px-2.5 py-2 text-sm text-[#141414] bg-[#F8F8F8] rounded-md transition-colors mt-1 flex items-center gap-1.5;
 }
 
 .hierarchical-options-list {

package/src/lib/radio/radio.css

@@ -1,39 +1,50 @@
 /*---- Checkbox Sizes Class ---- */
 .radio.xsm {
-  @apply size-[14px];
+  @apply size-[14px] min-h-[14px] min-w-[14px];
 }
+
 .radio.sm {
-  @apply size-[16px];
+  @apply size-[16px] min-h-[16px] min-w-[16px];
 }
+
 .radio.md {
-  @apply size-[18px];
+  @apply size-[18px] min-h-[18px] min-w-[18px];
 }
+
 .radio.lg {
-  @apply size-[19px];
+  @apply size-[19px] min-h-[19px] min-w-[19px];
 }
+
 /*---- Dot Sizes Class ---- */
 .radio.xsm .dot {
-  @apply size-[6px];
+  @apply size-[6px] min-h-[6px] min-w-[6px];
 }
+
 .radio.sm .dot {
-  @apply size-[8px];
+  @apply size-[8px] min-h-[8px] min-w-[8px];
 }
+
 .radio.md .dot {
-  @apply size-[10px];
+  @apply size-[10px] min-h-[10px] min-w-[10px];
 }
+
 .radio.lg .dot {
-  @apply size-[11px];
+  @apply size-[11px] min-h-[11px] min-w-[11px];
 }
+
 /*---- Tick Sizes Class ---- */
 .radio.xsm .tick {
-  @apply size-[9px];
+  @apply size-[9px] min-h-[9px] min-w-[9px];
 }
+
 .radio.sm .tick {
-  @apply size-[10px];
+  @apply size-[10px] min-h-[10px] min-w-[10px];
 }
+
 .radio.md .tick {
-  @apply size-[12px];
+  @apply size-[12px] min-h-[12px] min-w-[12px];
 }
+
 .radio.lg .tick {
-  @apply size-[14px];
+  @apply size-[14px] min-h-[14px] min-w-[14px];
 }

package/src/lib/select/select.css

@@ -1,14 +1,33 @@
 /* Container */
 .bk-select-container {
-  @apply relative w-full box-border flex flex-col gap-1.5;;
+  @apply relative w-full box-border flex flex-col gap-1.5;
+  ;
 }
 
 /* Control */
 .bk-select-control {
-  @apply flex items-center justify-between gap-2 w-full bg-white border border-[#E3E3E7] rounded transition-all duration-200 px-3 py-2.5 cursor-pointer ;
+  @apply flex items-center justify-between gap-2 w-full bg-white border border-[#E3E3E7] rounded transition-all duration-200 cursor-pointer;
 
-  &.bk-focused { @apply border-[#6B7080] shadow-none z-10; }
-  &.bk-disabled { @apply bg-[#F4F4F6] cursor-not-allowed opacity-60; }
+  &.bk-focused {
+    @apply border-[#6B7080] shadow-none z-10;
+  }
+
+  &.bk-disabled {
+    @apply cursor-not-allowed;
+    border-color: rgb(227 227 231);
+    background-color: rgb(244 244 246);
+    .bk-placeholder{
+      color: rgb(161 163 174);
+    }
+  }
+}
+
+.bk-select-container.default .bk-select-control{
+  @apply px-3 py-2.5;
+}
+
+.bk-select-container.sm .bk-select-control{
+  @apply px-3 py-[5px];
 }
 
 .bk-select-control.bk-has-error {
@@ -28,8 +47,17 @@
 
 /* --- NEW: Single Value --- */
 .bk-value-label-single {
-  @apply font-normal text-[14px]  !leading-[18px] text-[#141414] truncate w-full;
+  @apply font-normal  text-[#141414] truncate w-full;
+}
+
+.bk-select-container.default .bk-select-control .bk-value-label-single{
+  @apply text-[14px] !leading-[18px];
+}
+
+.bk-select-container.sm .bk-select-control .bk-value-label-single{
+  @apply text-xs;
 }
+
 /* --- NEW: Multi Select Chips --- */
 
 /* Badge Item */
@@ -43,40 +71,68 @@
 
 /* Badge Close Button */
 .bk-multi-badge-close {
-  @apply  cursor-pointer outline-none w-3 h-3;
+  @apply cursor-pointer outline-none w-3 h-3;
 }
 
 /* Actions */
 .bk-actions {
   @apply flex items-center gap-0.5 flex-shrink-0;
 }
-.bk-clear-wrapper { @apply text-gray-400 hover:text-red-500 cursor-pointer; }
-.bk-arrow-wrapper { @apply text-gray-400 transition-transform duration-200; &.bk-open { @apply rotate-180; }}
+
+.bk-clear-wrapper {
+  @apply text-gray-400 hover:text-red-500 cursor-pointer;
+}
+
+.bk-arrow-wrapper {
+  @apply text-gray-400 transition-transform duration-200;
+
+  &.bk-open {
+    @apply rotate-180;
+  }
+}
 
 /* Dropdown */
 .bk-dropdown-panel {
   @apply absolute left-0 w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[99] overflow-hidden cursor-default p-2.5;
 }
 
-.bk-dropdown-search { @apply px-2 pt-2;}
-.bk-search-wrapper { @apply flex items-center border border-[#E3E3E7] rounded-md px-3 py-[7px] bg-white transition-colors focus-within:border-[#E3E3E7]; }
-.bk-search-input { @apply w-full outline-none font-normal text-sm text-[#141414] placeholder-[#A1A3AE] bg-transparent;}
+.bk-dropdown-search {
+  @apply px-2 pt-2;
+}
+
+.bk-search-wrapper {
+  @apply flex items-center border border-[#E3E3E7] rounded-md px-3 py-[7px] bg-white transition-colors focus-within:border-[#E3E3E7];
+}
+
+.bk-search-input {
+  @apply w-full outline-none font-normal text-sm text-[#141414] placeholder-[#A1A3AE] bg-transparent;
+}
 
-.bk-options-list { @apply max-h-60 overflow-auto relative flex flex-col gap-0.5;  }
+.bk-options-list {
+  @apply max-h-60 overflow-auto relative flex flex-col gap-0.5;
+}
 
 /* Options */
 .bk-option {
   @apply flex items-center p-2.5 cursor-pointer transition-colors font-normal text-sm text-[#141414];
-  &:hover, &.bk-marked { @apply bg-[#F8F8F8] rounded-md;}
-  &.bk-selected { @apply bg-[#F8F8F8] rounded-md; }
+
+  &:hover,
+  &.bk-marked {
+    @apply bg-[#F8F8F8] rounded-md;
+  }
+
+  &.bk-selected {
+    @apply bg-[#F8F8F8] rounded-md;
+  }
 }
+
 .bk-grouped .bk-option {
   @apply ps-5;
 }
 
-.bk-option-disabled { @apply px-3 py-2 text-gray-400 cursor-default; }
-
-
+.bk-option-disabled {
+  @apply px-3 py-2 text-gray-400 cursor-default text-sm;
+}
 
 /* ... Previous styles ... */
 

package/src/lib/tabs/tabs.css

@@ -1,11 +1,11 @@
 /* Tabs Container */
 .tabs-container {
-  @apply w-full overflow-x-auto whitespace-nowrap;
+  @apply w-full;
 }
 
 /* Tabs List */
 .tabs-list {
-  @apply flex gap-2 list-none m-0 p-0;
+  @apply flex gap-0 list-none m-0 p-0;
 }
 
 /* Tab Item */
@@ -19,11 +19,6 @@
   @apply text-sm leading-[11px] font-medium text-[#141414] tracking-[-0.28];
 }
 
-/* Tab Button - No Icon Variant (adjust padding when no icon) */
-.tabs-button--no-icon {
-  @apply gap-0 px-3 py-[10.5px];
-}
-
 /* Tab Button - Hover State */
 /* .tabs-button:hover:not(:disabled):not(.tabs-button--active) {
   @apply text-[#141414] bg-[#F9FAFA];
@@ -34,6 +29,11 @@
   @apply bg-[#141414] text-white;
 }
 
+/* Tab Button - Error State */
+.tabs-button--error {
+  @apply bg-[#C10007] text-white border-0;
+}
+
 /* Tab Button - Disabled State */
 .tabs-button--disabled {
   @apply opacity-50 cursor-not-allowed;
@@ -46,7 +46,15 @@
 /* Tab Icon - Base Styles */
 .tabs-icon {
   @apply size-4 flex-shrink-0;
-  transition: opacity 0.2s ease;
+  max-width: 1rem;
+  opacity: 1;
+  overflow: hidden;
+  transition: max-width 0.2s ease, opacity 0.2s ease;
+}
+
+.tabs-icon--hidden {
+  max-width: 0;
+  opacity: 0;
 }
 
 /* Tab Label */

package/src/lib/textarea/textarea.css

@@ -0,0 +1,6 @@
+.bk-textarea-disabled {
+    cursor: not-allowed;
+    border-color: rgb(227 227 231);
+    background-color: rgb(244 244 246);
+    color: rgb(161 163 174);
+}

package/src/lib/toastr/toastr.css

@@ -122,6 +122,37 @@
   cursor: pointer;
 }
 
+/* ─── Mobile Layout (<768px) ─────────────────────────────────────────────── */
+@media (max-width: 425px) {
+  .toast-container {
+    width: calc(100vw - 2rem);
+    max-width: 100%;
+  }
+
+  .toast-container[data-position="top-center"],
+  .toast-container[data-position="bottom-center"] {
+    left: 50% !important;
+    right: auto !important;
+    transform: translateX(-50%) !important;
+    align-items: center;
+  }
+
+  .toast-item {
+    display: grid;
+    grid-template-areas:
+      "icon action close"
+      "content content content";
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    row-gap: 6px;
+  }
+
+  .toast-icon    { grid-area: icon; }
+  .toast-content { grid-area: content; }
+  .toast-action  { grid-area: action; justify-self: end; }
+  .toast-close   { grid-area: close; }
+}
+
 /* ─── Animations ──────────────────────────────────────────────────────────── */
 .toast-enter {
   animation: toastIn 0.3s ease-out forwards;

package/src/lib/tooltip/tooltip-directive.css

@@ -7,17 +7,24 @@
   font-weight: 500;
   font-size: 12px;
   line-height: 18px;
-  position: absolute;
+  position: fixed; /* match directive */
   font-family: 'Inter', sans-serif !important;
   max-width: 300px;
+  box-sizing: border-box;
+  width: max-content; /* ← key fix: shrink to content, respect max-width */
 }
+
 .bk-tooltip-content .text {
   margin-bottom: 0;
-  word-break: break-all;
+  word-break: normal;
+  overflow-wrap: normal;
+  white-space: pre-wrap;
 }
-.bk-tooltip-content .text:last-child{
+
+.bk-tooltip-content .text:last-child {
   margin-bottom: 0;
 }
+
 .bk-divider {
   display: block;
   height: 1px;
@@ -32,4 +39,4 @@
   border-style: solid;
   border-width: 8px;
   pointer-events: none;
-}
+}

package/src/lib/ui-button/ui-button.css

@@ -7,16 +7,16 @@
 
 .btn-primary {
   @apply
-  font-medium flex justify-center gap-2 items-center bg-black text-white
+  font-medium flex justify-center gap-2 items-center bg-black text-white !border-black
 
     /* FOCUS */
   focus-visible:outline-2 focus-visible:outline-offset-[2.5px] focus-visible:outline-black
 
     /* ACTIVE */
-  active:bg-[#242424]
+  active:bg-[#242424] active:!border-[#242424]
 
     /* DISABLED */
-  disabled:opacity-90 disabled:cursor-not-allowed disabled:bg-[#242424];
+  disabled:opacity-90 disabled:cursor-not-allowed disabled:bg-[#242424] disabled:!border-[#242424];
 }
 .btn-primary.xxl {
   @apply gap-3;
@@ -25,7 +25,7 @@
 .btn-secondary {
   @apply
   font-medium flex justify-center gap-2 items-center
-  bg-white text-[#6B7080]
+  bg-white text-[#6B7080] border-[#D6D7DC]
 
     /* FOCUS */
   focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#F5F5FA]