@flux-ui/components 3.0.0-next.3 → 3.0.0-next.31

package/dist/transition/FluxAutoHeightTransition.vue.d.ts

@@ -1,3 +1,4 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
@@ -7,7 +8,7 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
@@ -15,4 +16,3 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
-//# sourceMappingURL=FluxAutoHeightTransition.vue.d.ts.map

package/dist/transition/FluxAutoWidthTransition.vue.d.ts

@@ -1,3 +1,4 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
@@ -7,7 +8,7 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
@@ -15,4 +16,3 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
-//# sourceMappingURL=FluxAutoWidthTransition.vue.d.ts.map

package/dist/transition/FluxBreakthroughTransition.vue.d.ts

@@ -1,3 +1,4 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 type __VLS_Props = {
     readonly isBack?: boolean;
     readonly mode?: 'in-out' | 'out-in';
@@ -11,7 +12,7 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
@@ -19,4 +20,3 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
-//# sourceMappingURL=FluxBreakthroughTransition.vue.d.ts.map

package/dist/transition/FluxFadeTransition.vue.d.ts

@@ -1,3 +1,4 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 type __VLS_Props = {
     readonly mode?: 'in-out' | 'out-in';
 };
@@ -10,7 +11,7 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
@@ -18,4 +19,3 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
-//# sourceMappingURL=FluxFadeTransition.vue.d.ts.map

package/dist/transition/FluxOverlayTransition.vue.d.ts

@@ -1,3 +1,4 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 type __VLS_Props = {
     readonly mode?: 'in-out' | 'out-in';
 };
@@ -10,7 +11,7 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
@@ -18,4 +19,3 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
-//# sourceMappingURL=FluxOverlayTransition.vue.d.ts.map

package/dist/transition/FluxRouteTransition.vue.d.ts

@@ -1,3 +1,4 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 type __VLS_Props = {
     readonly isBack?: boolean;
     readonly mode?: 'in-out' | 'out-in';
@@ -11,7 +12,7 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
@@ -19,4 +20,3 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
-//# sourceMappingURL=FluxRouteTransition.vue.d.ts.map

package/dist/transition/FluxSlideOverTransition.vue.d.ts

@@ -1,3 +1,4 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 type __VLS_Props = {
     readonly mode?: 'in-out' | 'out-in';
 };
@@ -10,7 +11,7 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
@@ -18,4 +19,3 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
-//# sourceMappingURL=FluxSlideOverTransition.vue.d.ts.map

package/dist/transition/FluxTooltipTransition.vue.d.ts

@@ -1,3 +1,4 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 type __VLS_Props = {
     readonly mode?: 'in-out' | 'out-in';
 };
@@ -10,7 +11,7 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
@@ -18,4 +19,3 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
-//# sourceMappingURL=FluxTooltipTransition.vue.d.ts.map

package/dist/transition/FluxVerticalWindowTransition.vue.d.ts

@@ -1,3 +1,4 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 type __VLS_Props = {
     readonly isBack?: boolean;
     readonly mode?: 'in-out' | 'out-in';
@@ -11,7 +12,7 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
@@ -19,4 +20,3 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
-//# sourceMappingURL=FluxVerticalWindowTransition.vue.d.ts.map

package/dist/transition/FluxWindowTransition.vue.d.ts

@@ -1,3 +1,4 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 type __VLS_Props = {
     readonly isBack?: boolean;
     readonly mode?: 'in-out' | 'out-in';
@@ -11,7 +12,7 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
@@ -19,4 +20,3 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
-//# sourceMappingURL=FluxWindowTransition.vue.d.ts.map

package/dist/transition/index.d.ts

@@ -8,4 +8,3 @@ export { default as FluxSlideOverTransition } from './FluxSlideOverTransition.vu
 export { default as FluxTooltipTransition } from './FluxTooltipTransition.vue';
 export { default as FluxVerticalWindowTransition } from './FluxVerticalWindowTransition.vue';
 export { default as FluxWindowTransition } from './FluxWindowTransition.vue';
-//# sourceMappingURL=index.d.ts.map

package/dist/util/createDialogRenderer.d.ts

@@ -1,4 +1,4 @@
-import { Component, RenderFunction, Slots, SetupContext } from 'vue';
+import { Component, RenderFunction, SetupContext, Slots } from 'vue';
 type Emit = SetupContext<['close']>['emit'];
 type Props = {
     readonly isCloseable?: boolean;
@@ -6,4 +6,3 @@ type Props = {
 };
 export default function (attrs: object, props: Props, emit: Emit, slots: Slots, className: string, transition: Component): RenderFunction;
 export {};
-//# sourceMappingURL=createDialogRenderer.d.ts.map

package/dist/util/createLabelForDateRange.d.ts

@@ -1,3 +1,2 @@
 import { DateTime } from 'luxon';
 export default function (start: DateTime, end: DateTime, preventCustom?: boolean): string;
-//# sourceMappingURL=createLabelForDateRange.d.ts.map

package/dist/util/index.d.ts

@@ -1,3 +1,2 @@
 export { default as createDialogRenderer } from './createDialogRenderer';
 export { default as createLabelForDateRange } from './createLabelForDateRange';
-//# sourceMappingURL=index.d.ts.map

package/dist/vite.d.ts

@@ -0,0 +1,7 @@
+declare module '*.scss' {
+    export = string;
+}
+
+declare module '*.svg' {
+    export = string;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@flux-ui/components",
     "description": "A set of opiniated UI components.",
-    "version": "3.0.0-next.3",
+    "version": "3.0.0-next.31",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
@@ -23,8 +23,7 @@
     ],
     "scripts": {
         "build": "vue-tsc && vite build",
-        "dev": "vite build --mode dev --watch",
-        "prepublishOnly": "cp ../../README.md ."
+        "dev": "vite build --mode dev --watch"
     },
     "engines": {
         "node": ">=23"
@@ -32,9 +31,9 @@
     "exports": {
         ".": {
             "types": "./dist/index.d.ts",
-            "default": "./dist/flux.js"
+            "default": "./dist/index.js"
         },
-        "./style.css": "./dist/flux.css",
+        "./style.css": "./dist/index.css",
         "./*": "./*"
     },
     "publishConfig": {
@@ -46,32 +45,34 @@
         "src",
         "tsconfig.json"
     ],
-    "main": "./dist/flux.js",
-    "module": "./dist/flux.js",
+    "main": "./dist/index.js",
+    "module": "./dist/index.js",
     "types": "./dist/index.d.ts",
     "typings": "./dist/index.d.ts",
     "sideEffects": false,
     "dependencies": {
-        "@basmilius/utils": "^1.13.0",
-        "@flux-ui/internals": "0.0.0",
-        "@flux-ui/types": "0.0.0",
-        "@fortawesome/fontawesome-common-types": "^6.7.2",
+        "@basmilius/common": "^3.11.0",
+        "@basmilius/utils": "^3.11.0",
+        "@flux-ui/internals": "3.0.0-next.31",
+        "@flux-ui/types": "3.0.0-next.31",
+        "@fortawesome/fontawesome-common-types": "^7.2.0",
         "clsx": "^2.1.1",
         "imask": "^7.6.1",
-        "lodash-es": "^4.17.21",
-        "luxon": "^3.6.1",
-        "vue": "^3.5.13"
+        "lodash-es": "^4.17.23",
+        "luxon": "^3.7.2",
+        "vue": "^3.6.0-beta.7"
     },
     "devDependencies": {
-        "@basmilius/vite-vue-preset": "^3.0.0",
+        "@basmilius/vite-preset": "^3.11.0",
         "@types/lodash-es": "^4.17.12",
-        "@types/luxon": "^3.6.2",
-        "@types/node": "^22.14.1",
-        "@vitejs/plugin-vue": "^5.2.3",
-        "pinia": "^3.0.2",
-        "sass-embedded": "^1.87.0",
-        "typescript": "^5.8.3",
-        "vite": "^6.3.2",
-        "vue-tsc": "^2.2.10"
+        "@types/luxon": "^3.7.1",
+        "@types/node": "^25.3.3",
+        "@vitejs/plugin-vue": "^6.0.4",
+        "@vue/tsconfig": "^0.9.0",
+        "pinia": "^3.0.4",
+        "sass-embedded": "^1.97.3",
+        "typescript": "^5.9.3",
+        "vite": "^8.0.0-beta.16",
+        "vue-tsc": "^3.2.5"
     }
 }

package/src/component/FluxActionBar.vue

@@ -6,7 +6,7 @@
         <slot name="primary"/>
         <slot name="actionsStart"/>
 
-        <FluxSpacer/>
+        <FluxSpacer v-if="(slots.primary || slots.actionsStart) && (slots.actionsBeforeSearch || slots.search || slots.actionsAfterSearch || slots.filter || slots.actionsEnd)"/>
 
         <slot name="actionsBeforeSearch"/>
         <slot name="search"/>

package/src/component/FluxAnimatedColors.vue

@@ -7,8 +7,8 @@
 <script
     lang="ts"
     setup>
+    import { useComponentId } from '@basmilius/common';
     import { mulberry32 } from '@basmilius/utils';
-    import { useComponentId } from '@flux-ui/internals';
     import { computed, onBeforeUnmount, onMounted, ref, unref, useTemplateRef, watch } from 'vue';
     import $style from '$flux/css/component/Visual.module.scss';
 
@@ -19,12 +19,14 @@
         colors,
         incrementor = 1,
         opacity = .5,
-        seed
+        seed,
+        static: isStatic
     } = defineProps<{
         readonly colors?: string[];
         readonly incrementor?: number;
         readonly opacity?: number;
         readonly seed?: number;
+        readonly static?: boolean;
     }>();
 
     const canvasRef = useTemplateRef('canvas');
@@ -119,7 +121,7 @@
             context.restore();
         }
 
-        schedule();
+        !isStatic && schedule();
     }
 
     watch(canvasRef, canvas => {
@@ -136,6 +138,6 @@
 
     watch(polygons, () => {
         cancel();
-        schedule();
+        !isStatic && schedule();
     });
 </script>

package/src/component/FluxAutoGrid.vue

@@ -15,7 +15,7 @@
     import $style from '$flux/css/component/Layout.module.scss';
 
     const {
-        gap = 30
+        gap = 21
     } = defineProps<{
         readonly gap?: number;
         readonly minColumnWidth: number;

package/src/component/FluxBorderShine.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { flattenVNodeTree, orange600, pink600, purple600 } from '@flux-ui/internals';
     import { clsx } from 'clsx';
-    import { cloneVNode, defineComponent, Fragment, h, PropType } from 'vue';
+    import { cloneVNode, defineComponent, Fragment, h, type PropType } from 'vue';
     import $style from '$flux/css/component/Visual.module.scss';
 
     export default defineComponent({

package/src/component/FluxCalendar.vue

@@ -19,7 +19,7 @@
                             <div :class="$styleDatePicker.datePickerMonths">
                                 <template
                                     v-for="month of months"
-                                    :key="month">
+                                    :key="month.label">
                                     <FluxSecondaryButton
                                         :label="month.label"
                                         tabindex="-1"
@@ -137,7 +137,7 @@
     import { flattenVNodeTree, getComponentName, getComponentProps, useCalendar, useCalendarMonthSwitcher, useCalendarYearSwitcher } from '@flux-ui/internals';
     import { clsx } from 'clsx';
     import { DateTime } from 'luxon';
-    import { computed, unref, VNode, watch } from 'vue';
+    import { computed, type ComputedRef, unref, type VNode, watch } from 'vue';
     import { useTranslate } from '$flux/composable/private';
     import { FluxWindowTransition } from '$flux/transition';
     import { VNodeRenderer } from './primitive';
@@ -198,7 +198,7 @@
 
     const eventNodes = computed(() => flattenVNodeTree(slots.default?.() ?? []));
     const events = computed(() => unref(eventNodes)
-        .filter(en => getComponentName(en) === 'FluxCalendarEvent'));
+        .filter(en => getComponentName(en) === 'FluxCalendarEvent')) as ComputedRef<VNode[]>;
 
     function getEventsForDate(forDate: DateTime): Event[] {
         const forDateStr = forDate.toSQLDate();

package/src/component/FluxColorPicker.vue

@@ -128,7 +128,7 @@
     setup>
     import { hexToRGB, hslToHSV, hslToRGB, hsvToHSL, hsvToRGB, rgbToHEX, rgbToHSL, rgbToHSV } from '@basmilius/utils';
     import { blue500 } from '@flux-ui/internals';
-    import { computed, ComputedRef, ref, unref, watch } from 'vue';
+    import { computed, type ComputedRef, ref, unref, watch } from 'vue';
     import CoordinatePicker from './primitive/CoordinatePicker.vue';
     import FluxFormField from './FluxFormField.vue';
     import FluxFormInput from './FluxFormInput.vue';

package/src/component/FluxContainer.vue

@@ -12,7 +12,7 @@
     import $style from '$flux/css/component/Layout.module.scss';
 
     const {
-        gutter = 30
+        gutter = 21
     } = defineProps<{
         readonly gutter?: number;
     }>();

package/src/component/FluxDataTable.vue

@@ -1,17 +1,26 @@
 <template>
     <FluxTable
+        :fill-columns="fillColumns"
         :is-bordered="isBordered"
         :is-hoverable="isHoverable"
         :is-loading="isLoading"
         :is-separated="isSeparated"
         :is-striped="isStriped">
+        <template
+            v-if="'colgroups' in slots"
+            #colgroups>
+            <slot name="colgroups"/>
+        </template>
+
         <template
             v-if="'header' in slots"
             #header>
+            <slot name="filter" v-bind="{page, perPage, items: limitedItems, total}"/>
+
             <FluxTableRow>
                 <slot
                     name="header"
-                    v-bind="{page, perPage, rows, total}"/>
+                    v-bind="{page, perPage, items: limitedItems, total}"/>
             </FluxTableRow>
         </template>
 
@@ -21,17 +30,33 @@
             <FluxTableRow>
                 <slot
                     name="footer"
-                    v-bind="{page, perPage, rows, total}"/>
+                    v-bind="{page, perPage, items: limitedItems, total}"/>
             </FluxTableRow>
         </template>
 
+        <template
+            v-if="total > limits[0]"
+            #pagination>
+            <slot
+                name="pagination"
+                v-bind="{page, perPage, items: limitedItems, total}">
+                <FluxPaginationBar
+                    :limits="limits"
+                    :page="page"
+                    :per-page="perPage"
+                    :total="total"
+                    @limit="emit('limit', $event)"
+                    @navigate="emit('navigate', $event)"/>
+            </slot>
+        </template>
+
         <FluxTableRow
-            v-for="(row, index) of rows"
-            :key="uniqueKey ? row[uniqueKey] : index">
+            v-for="(item, index) of limitedItems"
+            :key="uniqueKey ? item[uniqueKey] : index">
             <template v-for="(_, name) of slots">
                 <slot
-                    v-if="name !== 'footer' && name !== 'header'"
-                    v-bind="{index, page, perPage, row, rows, total}"
+                    v-if="!IGNORED_SLOTS.includes(name as string)"
+                    v-bind="{index, item, items: limitedItems, page, perPage, total}"
                     :name="name"/>
             </template>
         </FluxTableRow>
@@ -42,25 +67,36 @@
     lang="ts"
     setup
     generic="T extends Record<string, any>">
+    import type { VNode } from 'vue';
     import { computed } from 'vue';
+    import FluxPaginationBar from './FluxPaginationBar.vue';
     import FluxTable from './FluxTable.vue';
     import FluxTableRow from './FluxTableRow.vue';
 
+    const IGNORED_SLOTS: string[] = ['filter', 'header', 'footer', 'colgroups', 'pagination'];
+
+    const emit = defineEmits<{
+        limit: [number];
+        navigate: [number];
+    }>();
+
     const {
         isBordered = true,
         isHoverable = false,
         isLoading = false,
         isSeparated = true,
         isStriped = false,
-        dataSet,
+        items,
         perPage
     } = defineProps<{
-        readonly dataSet: T[];
+        readonly fillColumns?: number;
         readonly isBordered?: boolean;
         readonly isHoverable?: boolean;
         readonly isLoading?: boolean;
         readonly isSeparated?: boolean;
         readonly isStriped?: boolean;
+        readonly items: T[];
+        readonly limits: number[];
         readonly page: number;
         readonly perPage: number;
         readonly total: number;
@@ -72,25 +108,41 @@
             readonly index: number;
             readonly page: number;
             readonly perPage: number;
-            readonly row: T;
-            readonly rows: T[];
+            readonly item: T;
+            readonly items: T[];
             readonly total: number;
-        }) => any;
+        }) => VNode;
+
+        filter(props: {
+            readonly page: number;
+            readonly perPage: number;
+            readonly items: T[];
+            readonly total: number;
+        }): VNode;
 
         footer(props: {
             readonly page: number;
             readonly perPage: number;
-            readonly rows: T[];
+            readonly items: T[];
             readonly total: number;
-        }): any;
+        }): VNode;
 
         header(props: {
             readonly page: number;
             readonly perPage: number;
-            readonly rows: T[];
+            readonly items: T[];
             readonly total: number;
-        }): any;
+        }): VNode;
+
+        pagination(props: {
+            readonly page: number;
+            readonly perPage: number;
+            readonly items: T[];
+            readonly total: number;
+        }): VNode;
+
+        colgroups(): VNode;
     }>();
 
-    const rows = computed(() => dataSet.slice(0, perPage));
+    const limitedItems = computed(() => items.slice(0, perPage));
 </script>

package/src/component/FluxDatePicker.vue

@@ -56,9 +56,7 @@
                             <span :class="$style.datePickerDay">{{ day }}</span>
                         </template>
 
-                        <template
-                            v-for="date of dates"
-                            :key="date">
+                        <template v-for="date of dates">
                             <button
                                 :class="clsx(
                                     $style.datePickerDate,
@@ -89,7 +87,7 @@
                 :class="$style.datePickerMonths">
                 <template
                     v-for="month of months"
-                    :key="month">
+                    :key="month.label">
                     <FluxSecondaryButton
                         :disabled="!isWithinBoundary(month.date, 'month')"
                         :label="month.label"
@@ -131,7 +129,7 @@
     import { useCalendar, useCalendarMonthSwitcher, useCalendarYearSwitcher } from '@flux-ui/internals';
     import { clsx } from 'clsx';
     import { DateTime } from 'luxon';
-    import { computed, ref, unref, useId } from 'vue';
+    import { computed, ref, unref, useId, watch } from 'vue';
     import { useTranslate } from '$flux/composable/private';
     import { FluxFadeTransition, FluxVerticalWindowTransition, FluxWindowTransition } from '$flux/transition';
     import FluxSecondaryButton from './FluxSecondaryButton.vue';
@@ -198,6 +196,10 @@
         }
     });
 
+    watch(modelValue, () => {
+        setViewDate(getInitialDate());
+    });
+
     function getInitialDate(): DateTime {
         const value = unref(modelValue);
         let date: DateTime;

package/src/component/FluxDynamicView.vue

@@ -7,7 +7,7 @@
 <script
     setup
     lang="ts">
-    import { VNode } from 'vue';
+    import type { VNode } from 'vue';
     import { VNodeRenderer } from './primitive';
 
     defineProps<{