@flux-ui/components 3.0.0-next.6 → 3.0.0-next.60

package/src/css/variables.scss

@@ -1,9 +1,5 @@
 @use 'sass:color';
 
-@function -rgb($hex) {
-    @return color.channel($hex, 'red', $space: rgb) color.channel($hex, 'green', $space: rgb) color.channel($hex, 'blue', $space: rgb);
-}
-
 @mixin animation {
     --acceleration-curve: cubic-bezier(0.4, 0, 1, 1);
     --deceleration-curve: cubic-bezier(0, 0, 0.2, 1);
@@ -12,203 +8,218 @@
 }
 
 @mixin color-light {
-    --primary-0: #{-rgb(#ffffff)};
-    --primary-1: #{-rgb(#f5f8ff)};
-    --primary-2: #{-rgb(#eff4ff)};
-    --primary-3: #{-rgb(#d1e0ff)};
-    --primary-4: #{-rgb(#b2ccff)};
-    --primary-5: #{-rgb(#84adff)};
-    --primary-6: #{-rgb(#528bff)};
-    --primary-7: #{-rgb(#2970ff)};
-    --primary-8: #{-rgb(#155eef)};
-    --primary-9: #{-rgb(#004eeb)};
-    --primary-10: #{-rgb(#0040c1)};
-    --primary-11: #{-rgb(#00359e)};
-
-    --danger-0: #{-rgb(#ffffff)};
-    --danger-1: #{-rgb(#fff1f2)};
-    --danger-2: #{-rgb(#ffe4e6)};
-    --danger-3: #{-rgb(#ffccd3)};
-    --danger-4: #{-rgb(#ffa1ad)};
-    --danger-5: #{-rgb(#ff637e)};
-    --danger-6: #{-rgb(#ff2056)};
-    --danger-7: #{-rgb(#ec003f)};
-    --danger-8: #{-rgb(#c70036)};
-    --danger-9: #{-rgb(#a50036)};
-    --danger-10: #{-rgb(#8b0836)};
-    --danger-11: #{-rgb(#4d0218)};
-
-    --info-0: #{-rgb(#ffffff)};
-    --info-1: #{-rgb(#eff6ff)};
-    --info-2: #{-rgb(#dbeafe)};
-    --info-3: #{-rgb(#bedbff)};
-    --info-4: #{-rgb(#8ec5ff)};
-    --info-5: #{-rgb(#51a2ff)};
-    --info-6: #{-rgb(#2b7fff)};
-    --info-7: #{-rgb(#155dfc)};
-    --info-8: #{-rgb(#1447e6)};
-    --info-9: #{-rgb(#193cb8)};
-    --info-10: #{-rgb(#1c398e)};
-    --info-11: #{-rgb(#162456)};
-
-    --success-0: #{-rgb(#ffffff)};
-    --success-1: #{-rgb(#f0fdf4)};
-    --success-2: #{-rgb(#dcfce7)};
-    --success-3: #{-rgb(#b9f8cf)};
-    --success-4: #{-rgb(#7bf1a8)};
-    --success-5: #{-rgb(#05df72)};
-    --success-6: #{-rgb(#00c950)};
-    --success-7: #{-rgb(#00a63e)};
-    --success-8: #{-rgb(#008236)};
-    --success-9: #{-rgb(#016630)};
-    --success-10: #{-rgb(#0d542b)};
-    --success-11: #{-rgb(#032e15)};
-
-    --warning-0: #{-rgb(#ffffff)};
-    --warning-1: #{-rgb(#fffbeb)};
-    --warning-2: #{-rgb(#fef3c6)};
-    --warning-3: #{-rgb(#fee685)};
-    --warning-4: #{-rgb(#ffd230)};
-    --warning-5: #{-rgb(#ffb900)};
-    --warning-6: #{-rgb(#fe9a00)};
-    --warning-7: #{-rgb(#e17100)};
-    --warning-8: #{-rgb(#bb4d00)};
-    --warning-9: #{-rgb(#973c00)};
-    --warning-10: #{-rgb(#7b3306)};
-    --warning-11: #{-rgb(#461901)};
-
-    --gray-0: #{-rgb(#ffffff)};
-    --gray-1: #{-rgb(#f8fafc)};
-    --gray-2: #{-rgb(#f1f5f9)};
-    --gray-3: #{-rgb(#e2e8f0)};
-    --gray-4: #{-rgb(#cad5e2)};
-    --gray-5: #{-rgb(#90a1b9)};
-    --gray-6: #{-rgb(#62748e)};
-    --gray-7: #{-rgb(#45556c)};
-    --gray-8: #{-rgb(#314158)};
-    --gray-9: #{-rgb(#1d293d)};
-    --gray-10: #{-rgb(#0f172b)};
-    --gray-11: #{-rgb(#020618)};
+    --gray-25: #ffffff;
+    --gray-50: #f7f8fc;
+    --gray-100: #eceef4;
+    --gray-200: #dee1ea;
+    --gray-300: #c6cad5;
+    --gray-400: #9da4b8;
+    --gray-500: #848ca2;
+    --gray-600: #606881;
+    --gray-700: #3f475e;
+    --gray-800: #2d3241;
+    --gray-900: #1a1f2d;
+    --gray-950: #090c19;
+
+    --primary-25: #fcfcfc;
+    --primary-50: #ebf2ff;
+    --primary-100: #d7e5ff;
+    --primary-200: #c4d8ff;
+    --primary-300: #9dbdff;
+    --primary-400: #77a2fc;
+    --primary-500: #5285f8;
+    --primary-600: #2258e5;
+    --primary-700: #0935b1;
+    --primary-800: #011e8c;
+    --primary-900: #000f60;
+    --primary-950: #000337;
+
+    --danger-25: #fefbfa;
+    --danger-50: #fff1f2;
+    --danger-100: #ffe4e6;
+    --danger-200: #ffccd3;
+    --danger-300: #ffa1ac;
+    --danger-400: #ff637e;
+    --danger-500: #ff2054;
+    --danger-600: #ec003e;
+    --danger-700: #c70036;
+    --danger-800: #a50035;
+    --danger-900: #8b0836;
+    --danger-950: #4d0218;
+
+    --info-25: #f9fcff;
+    --info-50: #eff6ff;
+    --info-100: #dbeafe;
+    --info-200: #bedbff;
+    --info-300: #8dc5ff;
+    --info-400: #52a2ff;
+    --info-500: #297fff;
+    --info-600: #165dfc;
+    --info-700: #1048e6;
+    --info-800: #163cb8;
+    --info-900: #1b398e;
+    --info-950: #162456;
+
+    --success-25: #fafdfa;
+    --success-50: #f0fdf4;
+    --success-100: #dcfce7;
+    --success-200: #b9f8cf;
+    --success-300: #7af1a9;
+    --success-400: #00df73;
+    --success-500: #00c951;
+    --success-600: #08a63d;
+    --success-700: #028236;
+    --success-800: #03662f;
+    --success-900: #0d542a;
+    --success-950: #032e15;
+
+    --warning-25: #fdfcf8;
+    --warning-50: #fffbeb;
+    --warning-100: #fef3c6;
+    --warning-200: #fee685;
+    --warning-300: #ffd22f;
+    --warning-400: #ffb902;
+    --warning-500: #ff9717;
+    --warning-600: #dd7500;
+    --warning-700: #b55500;
+    --warning-800: #934200;
+    --warning-900: #793600;
+    --warning-950: #451b00;
 }
 
 @mixin color-dark {
-    //--primary-0: #{-rgb(#182035)};
-    //--primary-1: #{-rgb(#1f2a45)};
-    //--primary-2: #{-rgb(#243254)};
-    //--primary-3: #{-rgb(#2b3c63)};
-    //--primary-4: #{-rgb(#314471)};
-    //--primary-5: #{-rgb(#385080)};
-    //--primary-6: #{-rgb(#3e5a8e)};
-    //--primary-7: #{-rgb(#44669e)};
-    //--primary-8: #{-rgb(#5077b0)};
-    //--primary-9: #{-rgb(#5a84bf)};
-    //--primary-10: #{-rgb(#6594d1)};
-    //--primary-11: #{-rgb(#709fe3)};
-
-    --danger-0: #{-rgb(#272325)};
-    --danger-1: #{-rgb(#331e23)};
-    --danger-2: #{-rgb(#3e1f28)};
-    --danger-3: #{-rgb(#4c222e)};
-    --danger-4: #{-rgb(#5b2635)};
-    --danger-5: #{-rgb(#6a2b3e)};
-    --danger-6: #{-rgb(#7a3047)};
-    --danger-7: #{-rgb(#8b3552)};
-    --danger-8: #{-rgb(#9e3a5f)};
-    --danger-9: #{-rgb(#a53d6e)};
-    --danger-10: #{-rgb(#b63e7c)};
-    --danger-11: #{-rgb(#c8408c)};
-
-    --info-0: #{-rgb(#23262c)};
-    --info-1: #{-rgb(#1f2832)};
-    --info-2: #{-rgb(#243141)};
-    --info-3: #{-rgb(#2a3d52)};
-    --info-4: #{-rgb(#2f4a66)};
-    --info-5: #{-rgb(#34567b)};
-    --info-6: #{-rgb(#3b638f)};
-    --info-7: #{-rgb(#436fa3)};
-    --info-8: #{-rgb(#4b7bb7)};
-    --info-9: #{-rgb(#5588cb)};
-    --info-10: #{-rgb(#6094df)};
-    --info-11: #{-rgb(#6aa3f3)};
-
-    --success-0: #{-rgb(#1d2620)};
-    --success-1: #{-rgb(#222d26)};
-    --success-2: #{-rgb(#26342c)};
-    --success-3: #{-rgb(#2c4435)};
-    --success-4: #{-rgb(#33543e)};
-    --success-5: #{-rgb(#3a6547)};
-    --success-6: #{-rgb(#417651)};
-    --success-7: #{-rgb(#4b875d)};
-    --success-8: #{-rgb(#589967)};
-    --success-9: #{-rgb(#6eac74)};
-    --success-10: #{-rgb(#86ba86)};
-    --success-11: #{-rgb(#9bc89b)};
-
-    --warning-0: #{-rgb(#2b261a)};
-    --warning-1: #{-rgb(#332b1b)};
-    --warning-2: #{-rgb(#3d321e)};
-    --warning-3: #{-rgb(#4a3c21)};
-    --warning-4: #{-rgb(#554825)};
-    --warning-5: #{-rgb(#63552a)};
-    --warning-6: #{-rgb(#74602f)};
-    --warning-7: #{-rgb(#8a6c34)};
-    --warning-8: #{-rgb(#a37b3a)};
-    --warning-9: #{-rgb(#c19041)};
-    --warning-10: #{-rgb(#d5a048)};
-    --warning-11: #{-rgb(#eab14f)};
-
-    --gray-0: #{-rgb(#14161a)};
-    --gray-1: #{-rgb(#1b1d21)};
-    --gray-2: #{-rgb(#22252b)};
-    --gray-3: #{-rgb(#2a2d33)};
-    --gray-4: #{-rgb(#333b3d)};
-    --gray-5: #{-rgb(#3d464a)};
-    --gray-6: #{-rgb(#475055)};
-    --gray-7: #{-rgb(#515d60)};
-    --gray-8: #{-rgb(#5c696b)};
-    --gray-9: #{-rgb(#677577)};
-    --gray-10: #{-rgb(#738180)};
-    --gray-11: #{-rgb(#7f8c8c)};
+    --gray-25: #0c0d12;
+    --gray-50: #121419;
+    --gray-100: #1a1d24;
+    --gray-200: #23262f;
+    --gray-300: #363a45;
+    --gray-400: #494f61;
+    --gray-500: #5e657b;
+    --gray-600: #7f88a2;
+    --gray-700: #a4adc8;
+    --gray-800: #c0c7da;
+    --gray-900: #dae1f5;
+    --gray-950: #f4fbff;
+
+    --primary-25: #23262c;
+    --primary-50: #262c39;
+    --primary-100: #2a3448;
+    --primary-200: #303e5a;
+    --primary-300: #36486e;
+    --primary-400: #3e5585;
+    --primary-500: #44619d;
+    --primary-600: #4d6fb6;
+    --primary-700: #5980d3;
+    --primary-800: #6a96f5;
+    --primary-900: #77a7ff;
+    --primary-950: #85b8ff;
+
+    --danger-25: #272325;
+    --danger-50: #37272b;
+    --danger-100: #452c30;
+    --danger-200: #563237;
+    --danger-300: #69393d;
+    --danger-400: #7f4145;
+    --danger-500: #94484c;
+    --danger-600: #ab5155;
+    --danger-700: #c65d64;
+    --danger-800: #e66f7a;
+    --danger-900: #fd7c8c;
+    --danger-950: #ff8ba0;
+
+    --info-25: #23262c;
+    --info-50: #252c39;
+    --info-100: #283447;
+    --info-200: #2c3f59;
+    --info-300: #2e4b6d;
+    --info-400: #315884;
+    --info-500: #33659b;
+    --info-600: #3874b4;
+    --info-700: #4285d1;
+    --info-800: #539cf3;
+    --info-900: #5dadff;
+    --info-950: #6bbfff;
+
+    --success-25: #1d2620;
+    --success-50: #223027;
+    --success-100: #243a2b;
+    --success-200: #264632;
+    --success-300: #285438;
+    --success-400: #2b643f;
+    --success-500: #2d7345;
+    --success-600: #32844c;
+    --success-700: #3b9956;
+    --success-800: #4cb265;
+    --success-900: #59c56f;
+    --success-950: #6ad87b;
+
+    --warning-25: #2b261a;
+    --warning-50: #322b1b;
+    --warning-100: #3c331e;
+    --warning-200: #493c21;
+    --warning-300: #574725;
+    --warning-400: #68532a;
+    --warning-500: #785e30;
+    --warning-600: #8c6b35;
+    --warning-700: #a47a3b;
+    --warning-800: #c28f42;
+    --warning-900: #d89e4a;
+    --warning-950: #efae52;
 }
 
-@mixin default-light {
+@mixin defaults {
     --font-monospace: jetbrains-mono, monospace;
     --font-sans: inter-variable, sans-serif;
     --font-serif: serif;
     --font-size: 15px;
-    --radius: 9px;
-
-    --background: rgb(var(--gray-2));
-
-    --foreground: rgb(var(--gray-8));
-    --foreground-prominent: rgb(var(--gray-10));
-    --foreground-secondary: rgb(var(--gray-5));
+    --radius: 12px;
+    --radius-double: 24px;
+    --radius-full: 9999px;
+    --radius-half: 6px;
+
+    --transition-default: 180ms var(--swift-out);
+
+    --background: var(--gray-25);
+    --foreground: var(--gray-700);
+    --foreground-prominent: var(--gray-900);
+    --foreground-secondary: var(--gray-500);
+    --surface: var(--gray-25);
+    --surface-loader: rgb(from var(--gray-25) r g b / .75);
+    --surface-stroke: var(--gray-200);
+    --surface-stroke-hover: var(--gray-300);
+    --surface-stroke-out: rgb(from var(--gray-400) r g b / .2);
+    --surface-stroke-out-hover: rgb(from var(--gray-500) r g b / .2);
+    --surface-hover: var(--gray-50);
+    --surface-active: var(--gray-100);
+    --surface-disabled: var(--gray-100);
+
+    --overlay: rgb(from var(--gray-950) r g b / .5);
+    --overlay-secondary: rgb(from var(--gray-950) r g b / .15);
+    --overlay-strong: rgb(from var(--gray-950) r g b / .9);
 }
 
-@mixin default-dark {
-    --background: rgb(var(--gray-2));
-
-    --foreground: #cbd5e1;
-    --foreground-prominent: #ffffff;
-    --foreground-secondary: #64748b;
+@mixin defaults-dark {
+    --overlay: rgb(0 0 0 / .6);
+    --overlay-secondary: rgb(0 0 0 / .4);
+    --overlay-strong: rgb(0 0 0 / .9);
 }
 
 @mixin shadow-light {
-    --shadow-px: 0 1px 1px rgb(29 41 61 / .025);
-    --shadow-xs: 0 1px 2px 0 rgb(29 41 61 / .025);
-    --shadow-sm: 0 1px 3px rgb(29 41 61 / .05), 0 1px 2px -1px rgb(29 41 61 / .05);
-    --shadow-md: 0 4px 6px -1px rgb(29 41 61 / .05), 0 2px 4px -2px rgb(29 41 61 / .05);
-    --shadow-lg: 0 10px 15px -3px rgb(29 41 61 / .05), 0 4px 6px -4px rgb(29 41 61 / .05);
-    --shadow-xl: 0 20px 25px -5px rgb(29 41 61 / .05), 0 8px 10px -6px rgb(29 41 61 / .05);
-    --shadow-2xl: 0 25px 50px -12px rgb(29 41 61 / .125);
+    --shadow-px: 0 1px 1px rgb(from var(--gray-800) r g b / 0.02);
+    --shadow-xs: 0 1px 2px 0 rgb(from var(--gray-800) r g b / 0.02);
+    --shadow-sm: 0 1px 3px rgb(from var(--gray-800) r g b / 0.05), 0 1px 2px -1px rgb(from var(--gray-800) r g b / 0.05);
+    --shadow-md: 0 4px 6px -1px rgb(from var(--gray-800) r g b / 0.05), 0 2px 4px -2px rgb(from var(--gray-800) r g b / 0.05);
+    --shadow-lg: 0 10px 15px -3px rgb(from var(--gray-800) r g b / 0.05), 0 4px 6px -4px rgb(from var(--gray-800) r g b / 0.05);
+    --shadow-xl: 0 20px 25px -5px rgb(from var(--gray-800) r g b / 0.05), 0 8px 10px -6px rgb(from var(--gray-800) r g b / 0.05);
+    --shadow-2xl: 0 25px 50px -12px rgb(from var(--gray-800) r g b / 0.12);
 }
 
 @mixin shadow-dark {
-    --shadow-px: 0 1px 1px rgb(0 0 0 / .05);
-    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05);
-    --shadow-sm: 0 1px 3px rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
-    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
-    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
-    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
-    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25);
+    --shadow-px: 0 1px 1px rgb(0 0 0 / 0.1);
+    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.1);
+    --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.15), 0 1px 2px -1px rgb(0 0 0 / 0.15);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.15), 0 2px 4px -2px rgb(0 0 0 / 0.15);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.15), 0 4px 6px -4px rgb(0 0 0 / 0.15);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.15), 0 8px 10px -6px rgb(0 0 0 / 0.15);
+    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
 }

package/src/data/di.ts

@@ -1,12 +1,126 @@
 import type { FluxFilterState, FluxFilterValue } from '@flux-ui/types';
-import type { ComponentInternalInstance, InjectionKey, Ref } from 'vue';
+import type { DateTime } from 'luxon';
+import type { ComponentInternalInstance, ComputedRef, InjectionKey, Ref, VNode } from 'vue';
 
+export const FluxAdaptiveGroupInjectionKey: InjectionKey<FluxAdaptiveGroupInjection> = Symbol();
+export const FluxCalendarInjectionKey: InjectionKey<FluxCalendarInjection> = Symbol();
 export const FluxDisabledInjectionKey: InjectionKey<Ref<boolean>> = Symbol();
+export const FluxKanbanInjectionKey: InjectionKey<FluxKanbanInjection> = Symbol();
 export const FluxExpandableGroupInjectionKey: InjectionKey<FluxExpandableGroupInjection> = Symbol();
 export const FluxFlyoutInjectionKey: InjectionKey<FluxFlyoutInjection> = Symbol();
 export const FluxFilterInjectionKey: InjectionKey<FluxFilterInjection> = Symbol();
 export const FluxFormFieldInjectionKey: InjectionKey<FluxFormFieldInjection> = Symbol();
+export const FluxTabBarInjectionKey: InjectionKey<FluxTabBarInjection> = Symbol();
 export const FluxTableInjectionKey: InjectionKey<FluxTableInjection> = Symbol();
+export const FluxTooltipInjectionKey: InjectionKey<FluxTooltipInjection> = Symbol();
+
+export type FluxKanbanDragMode = 'pointer' | 'keyboard';
+
+export type FluxKanbanDragState = {
+    readonly mode: FluxKanbanDragMode;
+    readonly itemId: string | number;
+    readonly fromColumnId: string | number;
+    readonly dropColumnId: string | number | null;
+    readonly beforeItemId: string | number | null;
+    readonly originBeforeItemId?: string | number | null;
+};
+
+export type FluxKanbanColumnDragState = {
+    readonly columnId: string | number;
+    readonly dropBeforeColumnId: string | number | null;
+};
+
+export type FluxKanbanKeyboardDirection = 'up' | 'down' | 'left' | 'right';
+
+export type FluxKanbanInjection = {
+    readonly disabled: Ref<boolean>;
+    readonly reorderableColumns: Ref<boolean>;
+    readonly dragState: Ref<FluxKanbanDragState | null>;
+    readonly columnDragState: Ref<FluxKanbanColumnDragState | null>;
+    readonly grabbedId: Ref<string | number | null>;
+    readonly isOverColumnId: Ref<string | number | null>;
+    readonly isDropAllowed: Ref<boolean>;
+
+    registerItem(element: Element, itemId: string | number): void;
+    unregisterItem(element: Element): void;
+    getItemInfo(element: Element): { readonly itemId: string | number } | undefined;
+    registerColumn(element: Element, columnId: string | number): void;
+    unregisterColumn(element: Element): void;
+    getColumnInfo(element: Element): { readonly columnId: string | number } | undefined;
+    setBoardElement(element: Element | null): void;
+    setColumnBodyElement(columnId: string | number, element: Element | null): void;
+    enterColumn(columnId: string | number): void;
+    leaveColumn(columnId: string | number): void;
+
+    startDrag(itemId: string | number, fromColumnId: string | number): void;
+    endDrag(): void;
+    updateDropTarget(columnId: string | number, beforeItemId: string | number | null): void;
+    clearDropTarget(): void;
+    commitDrop(): void;
+
+    grabItem(itemId: string | number, fromColumnId: string | number): void;
+    moveKeyboard(direction: FluxKanbanKeyboardDirection): void;
+    commitKeyboardDrop(): void;
+    cancelKeyboardDrop(): void;
+    isItemGrabbed(itemId: string | number): boolean;
+
+    startColumnDrag(columnId: string | number): void;
+    endColumnDrag(): void;
+    updateColumnDropTarget(beforeColumnId: string | number | null): void;
+    commitColumnDrop(): void;
+
+    cancelAll(): void;
+    onPointerMove(clientX: number, clientY: number): void;
+};
+
+export type FluxAdaptiveGroupChild = {
+    readonly priority: Ref<number>;
+    readonly desiredDefaultWidth: Ref<number>;
+    readonly desiredFallbackWidth: Ref<number>;
+    readonly isDefaultVisible: Ref<boolean>;
+};
+
+export type FluxAdaptiveGroupInjection = {
+    register(uid: number, child: FluxAdaptiveGroupChild): void;
+    unregister(uid: number): void;
+};
+
+export type FluxCalendarView = 'month' | 'week' | 'two-days' | 'day';
+
+export type FluxCalendarKeyboardDirection = 'up' | 'down' | 'left' | 'right';
+
+export type FluxCalendarItemData = {
+    readonly id: string | number;
+    readonly date: DateTime;
+    readonly duration?: number;
+    readonly allDay: boolean;
+    readonly isClickable: boolean;
+    renderContent(): VNode[];
+    handleClick(evt: MouseEvent): void;
+};
+
+export type FluxCalendarInjection = {
+    readonly isDraggable: ComputedRef<boolean>;
+    readonly resolvedView: ComputedRef<FluxCalendarView>;
+    readonly hourRange: ComputedRef<readonly [number, number]>;
+    readonly pixelsPerMinute: ComputedRef<number>;
+    readonly snapMinutes: ComputedRef<number>;
+    readonly grabbedId: Ref<string | number | null>;
+
+    registerItem(id: string | number, data: FluxCalendarItemData): void;
+    unregisterItem(id: string | number): void;
+
+    registerItemElement(element: Element, id: string | number): void;
+    unregisterItemElement(element: Element): void;
+
+    onItemDragStart(id: string | number, fromDate: DateTime, evt: DragEvent): void;
+    onItemDragEnd(id: string | number): void;
+
+    onItemKeyboardGrab(id: string | number, fromDate: DateTime): void;
+    onItemKeyboardMove(direction: FluxCalendarKeyboardDirection): void;
+    onItemKeyboardCommit(): void;
+    onItemKeyboardCancel(): void;
+};
 
 export type FluxExpandableGroupInjection = {
     closeAll(): void;
@@ -34,9 +148,20 @@ export type FluxFormFieldInjection = {
     readonly id?: string;
 };
 
+export type FluxTabBarInjection = {
+    readonly isPills: Ref<boolean>;
+
+    registerItem(element: Element, isActive: Ref<boolean>): void;
+    unregisterItem(element: Element): void;
+};
+
 export type FluxTableInjection = {
     readonly isBordered: boolean;
     readonly isHoverable: boolean;
     readonly isSeparated: boolean;
     readonly isStriped: boolean;
 };
+
+export type FluxTooltipInjection = {
+    calculate(): void;
+};