@aerogel/core 0.1.1-next.bad775a386a94fedbee1d575ee1f4fb99d1f5bab → 0.1.1-next.bf5c51083c0817e96fa4f38273c32d388441f514

package/src/components/ui/ComboboxTrigger.vue

@@ -0,0 +1,67 @@
+<template>
+    <ComboboxAnchor class="relative">
+        <ComboboxInput
+            :id="select.id"
+            v-model="combobox.input"
+            :placeholder="select.placeholder"
+            :class="renderedRootClasses"
+            :display-value="select.renderOption"
+            :name="select.name"
+            @focus="$emit('focus')"
+            @blur="onBlur()"
+            @keydown.esc="$emit('blur')"
+        />
+        <div v-if="select?.errors" class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+            <IconExclamationSolid class="size-5 text-red-500" />
+        </div>
+    </ComboboxAnchor>
+</template>
+
+<script setup lang="ts">
+import IconExclamationSolid from '~icons/zondicons/exclamation-solid';
+
+import { ComboboxAnchor, ComboboxInput } from 'reka-ui';
+import { computed, watch } from 'vue';
+
+import { classes, injectReactiveOrFail } from '@aerogel/core/utils';
+import type { SelectExpose } from '@aerogel/core/components/contracts/Select';
+import type { ComboboxContext } from '@aerogel/core/components/contracts/Combobox';
+
+const emit = defineEmits<{ focus: []; change: []; blur: [] }>();
+const select = injectReactiveOrFail<SelectExpose>('select', '<ComboboxTrigger> must be a child of a <Combobox>');
+const combobox = injectReactiveOrFail<ComboboxContext>('combobox');
+const renderedRootClasses = computed(() =>
+    classes(
+        // eslint-disable-next-line vue/max-len
+        'block w-full rounded-md border-0 py-1.5 ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6',
+        {
+            'mt-1': select.label,
+            'focus:ring-primary-600': !select.errors,
+            'text-gray-900 shadow-2xs ring-gray-900/10 placeholder:text-gray-400': !select.errors,
+            'pr-10 text-red-900 ring-red-900/10 placeholder:text-red-300 focus:ring-red-500': select.errors,
+        },
+    ));
+
+function onBlur() {
+    const elements = Array.from(document.querySelectorAll(':hover'));
+
+    if (elements.some((element) => combobox.$group?.contains(element))) {
+        return;
+    }
+
+    emit('blur');
+}
+
+watch(
+    () => combobox.input,
+    () => {
+        if (combobox.preventChange) {
+            combobox.preventChange = false;
+
+            return;
+        }
+
+        emit('change');
+    },
+);
+</script>

package/src/components/ui/Details.vue

@@ -1,10 +1,10 @@
 <template>
     <details class="group">
-        <summary
-            class="-ml-2 flex w-[max-content] items-center rounded-lg py-2 pr-3 pl-1 hover:bg-gray-100 focus-visible:outline focus-visible:outline-gray-700"
-        >
+        <summary :class="renderedSummaryClasses">
             <IconCheveronRight class="size-6 transition-transform group-open:rotate-90" />
-            <span>{{ label }}</span>
+            <slot name="label">
+                <span>{{ label ?? $td('ui.details', 'Details') }}</span>
+            </slot>
         </summary>
 
         <div :class="renderedContentClasses">
@@ -14,10 +14,20 @@
 </template>
 
 <script setup lang="ts">
+import IconCheveronRight from '~icons/zondicons/cheveron-right';
 import { classes } from '@aerogel/core/utils';
 import { type HTMLAttributes, computed } from 'vue';
-import IconCheveronRight from '~icons/zondicons/cheveron-right';
 
-const { label, contentClass } = defineProps<{ label: string; contentClass?: HTMLAttributes['class'] }>();
+const {
+    label = undefined,
+    contentClass,
+    summaryClass,
+} = defineProps<{ label?: string; contentClass?: HTMLAttributes['class']; summaryClass?: HTMLAttributes['class'] }>();
 const renderedContentClasses = computed(() => classes('pt-2 pl-4', contentClass));
+const renderedSummaryClasses = computed(() =>
+    classes(
+        '-ml-2 flex w-[max-content] items-center rounded-lg py-2 pr-3 pl-1 max-w-full',
+        'hover:bg-gray-100 focus-visible:outline focus-visible:outline-gray-700',
+        summaryClass,
+    ));
 </script>

package/src/components/ui/ProgressBar.vue

@@ -36,7 +36,7 @@ const filledClasses = computed(() =>
     classes('size-full transition-transform duration-500 rounded-r-full ease-linear bg-primary-600', filledClass));
 const overflowClasses = computed(() =>
     classes(
-        'absolute inset-y-0 right-0 size-full rounded-r-full border-l-3 border-gray-200',
+        'absolute inset-y-0 right-0 size-full rounded-r-full',
         'bg-primary-900 transition-[width] duration-500 ease-linear',
         overflowClass,
     ));

package/src/components/ui/Select.vue

@@ -3,6 +3,7 @@
         <SelectLabel />
         <slot>
             <SelectTrigger />
+            <HeadlessSelectError class="mt-2 text-sm text-red-600" />
             <SelectOptions />
         </slot>
     </HeadlessSelect>
@@ -19,6 +20,7 @@ import type { FormFieldValue } from '@aerogel/core/forms';
 import SelectLabel from './SelectLabel.vue';
 import SelectOptions from './SelectOptions.vue';
 import SelectTrigger from './SelectTrigger.vue';
+import HeadlessSelectError from '../headless/HeadlessSelectError.vue';
 
 defineProps<SelectProps<T>>();
 defineEmits<SelectEmits<T>>();

package/src/components/ui/SelectTrigger.vue

@@ -2,11 +2,15 @@
     <HeadlessSelectTrigger :class="renderedClasses">
         <HeadlessSelectValue class="col-start-1 row-start-1 truncate pr-6" />
         <IconCheveronDown class="col-start-1 row-start-1 size-5 self-center justify-self-end text-gray-500 sm:size-4" />
+        <div v-if="select?.errors" class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+            <IconExclamationSolid class="size-5 text-red-500" />
+        </div>
     </HeadlessSelectTrigger>
 </template>
 
 <script setup lang="ts">
 import IconCheveronDown from '~icons/zondicons/cheveron-down';
+import IconExclamationSolid from '~icons/zondicons/exclamation-solid';
 
 import { computed } from 'vue';
 import type { HTMLAttributes } from 'vue';
@@ -22,8 +26,15 @@ const select = injectReactiveOrFail<SelectExpose>('select', '<SelectTrigger> mus
 const renderedClasses = computed(() =>
     classes(
         // eslint-disable-next-line vue/max-len
-        'focus:outline-primary-600 data-[state=open]:outline-primary-600 grid w-full cursor-default grid-cols-1 rounded-md bg-white py-1.5 pr-2 pl-3 text-left text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:-outline-offset-2 sm:text-sm/6',
-        { 'mt-1': select.label },
+        'relative grid w-full cursor-default grid-cols-1 rounded-md bg-white py-1.5 pr-2 pl-3 text-left text-gray-900 outline-1 -outline-offset-1',
+        'focus:outline-2 focus:-outline-offset-2 sm:text-sm/6',
+        {
+            'mt-1': select.label,
+            'outline-gray-300 focus:outline-primary-600 data-[state=open]:outline-primary-600': !select.errors,
+            'text-gray-900 shadow-2xs ring-gray-900/10 placeholder:text-gray-400': !select.errors,
+            'outline-red-900/10 pr-10 text-red-900 placeholder:text-red-300': select.errors,
+            'focus:outline-red-500 data-[state=open]:outline-red-500': select.errors,
+        },
         rootClasses,
     ));
 </script>

package/src/components/ui/index.ts

@@ -2,6 +2,11 @@ export { default as AdvancedOptions } from './AdvancedOptions.vue';
 export { default as AlertModal } from './AlertModal.vue';
 export { default as Button } from './Button.vue';
 export { default as Checkbox } from './Checkbox.vue';
+export { default as Combobox } from './Combobox.vue';
+export { default as ComboboxLabel } from './ComboboxLabel.vue';
+export { default as ComboboxOption } from './ComboboxOption.vue';
+export { default as ComboboxOptions } from './ComboboxOptions.vue';
+export { default as ComboboxTrigger } from './ComboboxTrigger.vue';
 export { default as ConfirmModal } from './ConfirmModal.vue';
 export { default as Details } from './Details.vue';
 export { default as DropdownMenu } from './DropdownMenu.vue';

package/src/components/vue/Provide.vue

@@ -0,0 +1,11 @@
+<template>
+    <slot />
+</template>
+
+<script setup lang="ts">
+import { provide } from 'vue';
+
+const { name, value } = defineProps<{ name: string; value: unknown }>();
+
+provide(name, value);
+</script>

package/src/components/vue/index.ts

@@ -0,0 +1 @@
+export { default as Provide } from './Provide.vue';

package/src/errors/index.ts

@@ -3,6 +3,7 @@ import type { App as AppInstance } from 'vue';
 import App from '@aerogel/core/services/App';
 import { bootServices } from '@aerogel/core/services';
 import { definePlugin } from '@aerogel/core/plugins';
+import { getErrorMessage } from '@aerogel/core/errors/utils';
 
 import Errors from './Errors';
 import settings from './settings';
@@ -16,6 +17,10 @@ export type { ErrorSource, ErrorReport, ErrorReportLog };
 
 const services = { $errors: Errors };
 const frameworkHandler: ErrorHandler = (error) => {
+    if (getErrorMessage(error).includes('ResizeObserver loop completed with undelivered notifications.')) {
+        return true;
+    }
+
     Errors.report(error);
 
     return true;

package/src/forms/FormController.test.ts

@@ -30,7 +30,7 @@ describe('FormController', () => {
         const form = useForm({
             name: {
                 type: 'string',
-                rules: 'required',
+                rules: ['required'],
             },
         });
 
@@ -48,7 +48,7 @@ describe('FormController', () => {
         const form = useForm({
             name: {
                 type: 'string',
-                rules: 'required',
+                rules: ['required'],
             },
         });
 
@@ -69,11 +69,11 @@ describe('FormController', () => {
         const form = useForm({
             trimmed: {
                 type: 'string',
-                rules: 'required',
+                rules: ['required'],
             },
             untrimmed: {
                 type: 'string',
-                rules: 'required',
+                rules: ['required'],
                 trim: false,
             },
         });

package/src/forms/FormController.ts

@@ -1,5 +1,5 @@
 import { computed, nextTick, reactive, readonly, ref } from 'vue';
-import { MagicObject, arrayRemove, fail, toString } from '@noeldemartin/utils';
+import { MagicObject, arrayRemove, fail } from '@noeldemartin/utils';
 import type { ComputedRef, DeepReadonly, Ref, UnwrapNestedRefs } from 'vue';
 
 import { validate, validateType } from './validation';
@@ -14,7 +14,7 @@ export interface FormFieldDefinition<
     type: TType;
     trim?: boolean;
     default?: GetFormFieldValue<TType>;
-    rules?: TRules;
+    rules?: TRules[];
     values?: readonly TValueType[];
     [__valueType]?: TValueType;
 }
@@ -91,17 +91,13 @@ export default class FormController<Fields extends FormFieldDefinitions = FormFi
     }
 
     public setFieldValue<T extends keyof Fields>(field: T, value: FormData<Fields>[T]): void {
-        const definition =
-            this._fields[field] ?? fail<FormFieldDefinition>(`Trying to set undefined '${toString(field)}' field`);
+        this._data[field] = value;
 
-        this._data[field] =
-            definition.type === 'string' && (definition.trim ?? true)
-                ? (toString(value).trim() as FormData<Fields>[T])
-                : value;
-
-        if (this._submitted.value) {
-            this.validate();
+        if (!this._submitted.value) {
+            return;
         }
+
+        this.validate();
     }
 
     public getFieldValue<T extends keyof Fields>(field: T): GetFormFieldValue<Fields[T]['type']> {
@@ -109,7 +105,7 @@ export default class FormController<Fields extends FormFieldDefinitions = FormFi
     }
 
     public getFieldRules<T extends keyof Fields>(field: T): string[] {
-        return this._fields[field]?.rules?.split('|') ?? [];
+        return this._fields[field]?.rules ?? [];
     }
 
     public setFieldErrors<T extends keyof Fields>(field: T, errors: string[] | null): void {
@@ -149,6 +145,16 @@ export default class FormController<Fields extends FormFieldDefinitions = FormFi
     public submit(): boolean {
         this._submitted.value = true;
 
+        for (const [field, value] of Object.entries(this._data)) {
+            const definition = this._fields[field] ?? fail<FormFieldDefinition>();
+
+            if (typeof value !== 'string' || !(definition.trim ?? true)) {
+                continue;
+            }
+
+            this._data[field as keyof Fields] = value.trim() as FormData<Fields>[string];
+        }
+
         const valid = this.validate();
 
         valid && this._listeners['submit']?.forEach((listener) => listener());
@@ -201,7 +207,7 @@ export default class FormController<Fields extends FormFieldDefinitions = FormFi
     private getFieldErrors(name: keyof Fields, definition: FormFieldDefinition): string[] | null {
         const errors = [];
         const value = this._data[name];
-        const rules = definition.rules?.split('|') ?? [];
+        const rules = definition.rules ?? [];
 
         errors.push(...validateType(value, definition));
 

package/src/forms/index.ts

@@ -1,4 +1,15 @@
+import { registerFormValidationRule } from '@aerogel/core/forms/validation';
+import { definePlugin } from '@aerogel/core/plugins';
+
 export * from './FormController';
 export * from './utils';
 export * from './validation';
 export { default as FormController } from './FormController';
+
+export default definePlugin({
+    async install(_, { formValidationRules }) {
+        for (const [rule, validator] of Object.entries(formValidationRules ?? {})) {
+            registerFormValidationRule(rule, validator);
+        }
+    },
+});

package/src/forms/utils.ts

@@ -1,6 +1,9 @@
 import type { FormFieldDefinition } from './FormController';
 
-export function booleanInput(defaultValue?: boolean, options: { rules?: string } = {}): FormFieldDefinition<'boolean'> {
+export function booleanInput(
+    defaultValue?: boolean,
+    options: { rules?: string[] } = {},
+): FormFieldDefinition<'boolean'> {
     return {
         default: defaultValue,
         type: 'boolean',
@@ -8,7 +11,7 @@ export function booleanInput(defaultValue?: boolean, options: { rules?: string }
     };
 }
 
-export function dateInput(defaultValue?: Date, options: { rules?: string } = {}): FormFieldDefinition<'date'> {
+export function dateInput(defaultValue?: Date, options: { rules?: string[] } = {}): FormFieldDefinition<'date'> {
     return {
         default: defaultValue,
         type: 'date',
@@ -19,7 +22,7 @@ export function dateInput(defaultValue?: Date, options: { rules?: string } = {})
 export function enumInput<const T extends string>(
     values: readonly T[],
     defaultValue?: T,
-    options: { rules?: string } = {},
+    options: { rules?: string[] } = {},
 ): FormFieldDefinition<'enum', string, T> {
     return {
         default: defaultValue,
@@ -29,59 +32,75 @@ export function enumInput<const T extends string>(
     };
 }
 
-export function requiredBooleanInput(defaultValue?: boolean): FormFieldDefinition<'boolean', 'required'> {
+export function requiredBooleanInput(
+    defaultValue?: boolean,
+    options: { rules?: string[] } = {},
+): FormFieldDefinition<'boolean', 'required'> {
     return {
         default: defaultValue,
         type: 'boolean',
-        rules: 'required',
+        rules: ['required', ...((options.rules as 'required'[]) ?? [])],
     };
 }
 
-export function requiredDateInput(defaultValue?: Date): FormFieldDefinition<'date', 'required'> {
+export function requiredDateInput(
+    defaultValue?: Date,
+    options: { rules?: string[] } = {},
+): FormFieldDefinition<'date', 'required'> {
     return {
         default: defaultValue,
         type: 'date',
-        rules: 'required',
+        rules: ['required', ...((options.rules as 'required'[]) ?? [])],
     };
 }
 
 export function requiredEnumInput<const T extends string>(
     values: readonly T[],
     defaultValue?: T,
+    options: { rules?: string[] } = {},
 ): FormFieldDefinition<'enum', 'required', T> {
     return {
         default: defaultValue,
         type: 'enum',
-        rules: 'required',
+        rules: ['required', ...((options.rules as 'required'[]) ?? [])],
         values,
     };
 }
 
-export function requiredNumberInput(defaultValue?: number): FormFieldDefinition<'number', 'required'> {
+export function requiredNumberInput(
+    defaultValue?: number,
+    options: { rules?: string[] } = {},
+): FormFieldDefinition<'number', 'required'> {
     return {
         default: defaultValue,
         type: 'number',
-        rules: 'required',
+        rules: ['required', ...((options.rules as 'required'[]) ?? [])],
     };
 }
 
-export function requiredObjectInput<T extends object>(defaultValue?: T): FormFieldDefinition<'object', 'required', T> {
+export function requiredObjectInput<T extends object>(
+    defaultValue?: T,
+    options: { rules?: string[] } = {},
+): FormFieldDefinition<'object', 'required', T> {
     return {
         default: defaultValue,
         type: 'object',
-        rules: 'required',
+        rules: ['required', ...((options.rules as 'required'[]) ?? [])],
     };
 }
 
-export function requiredStringInput(defaultValue?: string): FormFieldDefinition<'string', 'required'> {
+export function requiredStringInput(
+    defaultValue?: string,
+    options: { rules?: string[] } = {},
+): FormFieldDefinition<'string', 'required'> {
     return {
         default: defaultValue,
         type: 'string',
-        rules: 'required',
+        rules: ['required', ...((options.rules as 'required'[]) ?? [])],
     };
 }
 
-export function numberInput(defaultValue?: number, options: { rules?: string } = {}): FormFieldDefinition<'number'> {
+export function numberInput(defaultValue?: number, options: { rules?: string[] } = {}): FormFieldDefinition<'number'> {
     return {
         default: defaultValue,
         type: 'number',
@@ -91,7 +110,7 @@ export function numberInput(defaultValue?: number, options: { rules?: string } =
 
 export function objectInput<T extends object>(
     defaultValue?: T,
-    options: { rules?: string } = {},
+    options: { rules?: string[] } = {},
 ): FormFieldDefinition<'object', string, T> {
     return {
         default: defaultValue,
@@ -100,7 +119,7 @@ export function objectInput<T extends object>(
     };
 }
 
-export function stringInput(defaultValue?: string, options: { rules?: string } = {}): FormFieldDefinition<'string'> {
+export function stringInput(defaultValue?: string, options: { rules?: string[] } = {}): FormFieldDefinition<'string'> {
     return {
         default: defaultValue,
         type: 'string',

package/src/forms/validation.ts

@@ -31,10 +31,14 @@ export type FormFieldValidator<T = unknown> = (value: T) => string | string[] |
 
 export const validators: Record<string, FormFieldValidator> = { ...builtInRules };
 
-export function defineFormValidationRule<T>(rule: string, validator: FormFieldValidator<T>): void {
+export function registerFormValidationRule<T>(rule: string, validator: FormFieldValidator<T>): void {
     validators[rule] = validator as FormFieldValidator;
 }
 
+export function defineFormValidationRules<T extends Record<string, FormFieldValidator>>(rules: T): T {
+    return rules;
+}
+
 export function validateType(value: unknown, definition: FormFieldDefinition): string[] {
     if (isValidType(value, definition)) {
         return [];

package/src/index.css

@@ -20,6 +20,7 @@
     --color-primary-950: color-mix(in oklab, var(--color-primary-600) 50%, black);
 
     --color-background: oklch(1 0 0);
+    --color-primary-text: var(--color-gray-900);
     --color-links: var(--color-primary);
 
     --breakpoint-content: var(--breakpoint-md);

package/src/jobs/Job.ts

@@ -115,7 +115,7 @@ export default abstract class Job<
             return 1;
         }
 
-        if (!status.children) {
+        if (!status.children || status.children.length === 0) {
             return 0;
         }
 

package/src/plugins/index.ts

@@ -1,5 +1,3 @@
-import type { GetClosureArgs } from '@noeldemartin/utils';
-
 import App from '@aerogel/core/services/App';
 
 import type { Plugin } from './Plugin';
@@ -10,7 +8,7 @@ export function definePlugin<T extends Plugin>(plugin: T): T {
     return plugin;
 }
 
-export async function installPlugins(plugins: Plugin[], ...args: GetClosureArgs<Plugin['install']>): Promise<void> {
+export async function installPlugins(plugins: Plugin[], ...args: Parameters<Plugin['install']>): Promise<void> {
     App.setState(
         'plugins',
         plugins.reduce(

package/src/services/index.ts

@@ -10,6 +10,7 @@ import Service from './Service';
 import Storage from './Storage';
 import { getPiniaStore } from './store';
 import type { AppSetting } from './App.state';
+import type { FormFieldValidator } from '@aerogel/core/forms';
 
 export * from './App';
 export * from './Cache';
@@ -68,6 +69,7 @@ declare module '@aerogel/core/bootstrap/options' {
     export interface AerogelOptions {
         services?: Record<string, Service>;
         settings?: AppSetting[];
+        formValidationRules?: Record<string, FormFieldValidator>;
         settingsFullscreenOnMobile?: boolean;
     }
 }

package/src/testing/index.ts

@@ -1,5 +1,4 @@
 import { isTesting } from '@noeldemartin/utils';
-import type { GetClosureArgs } from '@noeldemartin/utils';
 
 import Events from '@aerogel/core/services/Events';
 import { App } from '@aerogel/core/services';
@@ -18,7 +17,7 @@ export default definePlugin({
         }
 
         globalThis.testingRuntime = {
-            on: ((...args: GetClosureArgs<(typeof Events)['on']>) => Events.on(...args)) as (typeof Events)['on'],
+            on: ((...args: Parameters<(typeof Events)['on']>) => Events.on(...args)) as (typeof Events)['on'],
             service: (name) => App.service(name),
         };
     },

package/src/ui/UI.ts

@@ -283,7 +283,8 @@ export class UIService extends Service {
     ): Promise<GetModalResponse<T>>;
 
     public modal<T extends Component>(component: T, componentProps?: GetModalProps<T>): Promise<GetModalResponse<T>> {
-        return showModal(component, componentProps ?? {});
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return showModal(component as any, componentProps ?? {}) as Promise<GetModalResponse<T>>;
     }
 
     public async closeAllModals(): Promise<void> {

package/src/utils/classes.ts

@@ -4,10 +4,9 @@ import { cva } from 'class-variance-authority';
 import { twMerge } from 'tailwind-merge';
 import type { ClassValue } from 'clsx';
 import type { PropType } from 'vue';
-import type { GetClosureArgs, GetClosureResult } from '@noeldemartin/utils';
 
-export type CVAConfig<T> = NonNullable<GetClosureArgs<typeof cva<T>>[1]>;
-export type CVAProps<T> = NonNullable<GetClosureArgs<GetClosureResult<typeof cva<T>>>[0]>;
+export type CVAConfig<T> = NonNullable<Parameters<typeof cva<T>>[1]>;
+export type CVAProps<T> = NonNullable<Parameters<ReturnType<typeof cva<T>>>[0]>;
 export type Variants<T extends Record<string, string | boolean>> = Required<{
     [K in keyof T]: Exclude<T[K], undefined> extends string
         ? { [key in Exclude<T[K], undefined>]: string | null }

package/src/utils/composition/reactiveSet.ts

@@ -2,10 +2,14 @@ import { fail } from '@noeldemartin/utils';
 import { customRef } from 'vue';
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export function reactiveSet<T>(initial?: T[] | Set<T>) {
+export function reactiveSet<T>(initial?: T[] | Set<T>, options: { equals?: (a: T, b: T) => boolean } = {}) {
     let set: Set<T> = new Set(initial);
     let trigger: () => void;
     let track: () => void;
+    const equals = options?.equals;
+    const hasEqual = equals
+        ? (item: T) => ref.value.values().some((existingItem) => equals(item, existingItem))
+        : () => false;
     const ref = customRef((_track, _trigger) => {
         track = _track;
         trigger = _trigger;
@@ -25,11 +29,15 @@ export function reactiveSet<T>(initial?: T[] | Set<T>) {
         has(item: T) {
             track();
 
-            return ref.value.has(item);
+            return ref.value.has(item) || hasEqual(item);
         },
         add(item: T) {
             trigger();
 
+            if (hasEqual(item)) {
+                return;
+            }
+
             ref.value.add(item);
         },
         delete(item: T) {

package/src/utils/time.ts

@@ -1,2 +1,7 @@
+import type { Nullable } from '@noeldemartin/utils';
+
 export const MINUTE_MILLISECONDS = 60000;
-export const LOCAL_TIMEZONE_OFFSET = -new Date().getTimezoneOffset() * -MINUTE_MILLISECONDS;
+
+export function getLocalTimezoneOffset(date?: Nullable<Date>): number {
+    return -(date ?? new Date()).getTimezoneOffset() * -MINUTE_MILLISECONDS;
+}