@brickclay-org/ui 0.0.37 → 0.0.39

package/index.d.ts

@@ -833,5 +833,25 @@ declare class BkChips implements ControlValueAccessor, AfterViewInit {
     static ɵcmp: i0.ɵɵComponentDeclaration<BkChips, "bk-chips", never, { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "hasError": { "alias": "hasError"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; }, { "input": "input"; "change": "change"; "focus": "focus"; "blur": "blur"; }, never, never, true, never>;
 }
 
-export { BkBadge, BkButton, BkButtonGroup, BkCheckbox, BkChips, BkCustomCalendar, BkGrid, BkIconButton, BkInput, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTextarea, BkTimePicker, BkToggle, BrickclayIcons, BrickclayLib, CalendarManagerService, CalendarModule };
-export type { BadgeColor, BadgeSize, BadgeVariant, BkInputAutoCapitalize, BkInputAutoComplete, BkInputMode, BkInputType, BkTextAreaAutoCapitalize, BkTextAreaAutoComplete, BkTextAreaInputMode, ButtonSize, ButtonVariant, CalendarRange, CalendarSelection, CountryOption, GroupItem, GroupMode, IconButtonSize, IconButtonVariant, IconOrientation, PillColor, PillSize, PillVariant, ScheduledDateSelection, SortDirection, SpinnerSize, TableAction, TableColumn, TimeConfiguration };
+interface TabItem {
+    id: string;
+    label: string;
+    icon?: string;
+    iconActive?: string;
+    iconAlt?: string;
+    disabled?: boolean;
+}
+declare class BkTabs {
+    list: TabItem[];
+    activeTabId: string;
+    disabled: boolean;
+    change: EventEmitter<TabItem>;
+    setActiveTab(tab: TabItem): void;
+    isActive(tabId: string): boolean;
+    getTabIcon(tab: TabItem): string | undefined;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BkTabs, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BkTabs, "bk-tabs", never, { "list": { "alias": "list"; "required": false; }; "activeTabId": { "alias": "activeTabId"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "change": "change"; }, never, never, true, never>;
+}
+
+export { BkBadge, BkButton, BkButtonGroup, BkCheckbox, BkChips, BkCustomCalendar, BkGrid, BkIconButton, BkInput, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToggle, BrickclayIcons, BrickclayLib, CalendarManagerService, CalendarModule };
+export type { BadgeColor, BadgeSize, BadgeVariant, BkInputAutoCapitalize, BkInputAutoComplete, BkInputMode, BkInputType, BkTextAreaAutoCapitalize, BkTextAreaAutoComplete, BkTextAreaInputMode, ButtonSize, ButtonVariant, CalendarRange, CalendarSelection, CountryOption, GroupItem, GroupMode, IconButtonSize, IconButtonVariant, IconOrientation, PillColor, PillSize, PillVariant, ScheduledDateSelection, SortDirection, SpinnerSize, TabItem, TableAction, TableColumn, TimeConfiguration };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brickclay-org/ui",
-  "version": "0.0.37",
+  "version": "0.0.39",
   "peerDependencies": {
     "@angular/common": ">=17.0.0 <=21.0.0",
     "@angular/core": ">=17.0.0 <=21.0.0",

package/src/lib/tabs/tabs.css

@@ -0,0 +1,56 @@
+/* Tabs Container */
+.tabs-container {
+  @apply w-full;
+}
+
+/* Tabs List */
+.tabs-list {
+  @apply flex gap-2 list-none m-0 p-0;
+}
+
+/* Tab Item */
+.tabs-item {
+  @apply flex-shrink-0;
+}
+
+/* Tab Button - Base Styles */
+.tabs-button {
+  @apply flex items-center gap-[6px] px-3 py-2 rounded-md border-0 bg-transparent cursor-pointer transition-all duration-200 outline-none;
+  @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];
+} */
+
+/* Tab Button - Active State */
+.tabs-button--active {
+  @apply bg-[#141414] text-white;
+}
+
+/* Tab Button - Disabled State */
+.tabs-button--disabled {
+  @apply opacity-50 cursor-not-allowed;
+}
+
+/* .tabs-button--disabled:hover {
+  @apply text-[#6B7080] bg-transparent;
+} */
+
+/* Tab Icon - Base Styles */
+.tabs-icon {
+  @apply size-4 flex-shrink-0;
+  transition: opacity 0.2s ease;
+}
+
+/* Tab Label */
+.tabs-label {
+  @apply whitespace-nowrap;
+}
+

package/src/styles.css

@@ -13,3 +13,4 @@
 @import './lib/select/select.css';
 @import './lib/input/input.css';
 @import './lib/chips/chips.css';
+@import './lib/tabs/tabs.css';