@foxui/time 0.4.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License Copyright (c) 2025 flo-bit
+
+Permission is hereby granted, free of
+charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use, copy, modify, merge,
+publish, distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to the
+following conditions:
+
+The above copyright notice and this permission notice
+(including the next paragraph) shall be included in all copies or substantial
+portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF
+ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
+EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,16 @@
+# 🦊 fox ui
+
+svelte 5 + tailwind 4 ui kit, time components
+
+- [Stopwatch](https://flo-bit.dev/ui-kit/components/time/stopwatch)
+- [Timer](https://flo-bit.dev/ui-kit/components/time/timer)
+
+> **This is a public alpha release. Expect bugs and breaking changes.**
+
+[See all components here](https://flo-bit.dev/ui-kit)
+
+For a guide on how to use this ui kit, see the [Quickstart Guide](https://flo-bit.dev/ui-kit/docs/quick-start).
+
+Read more about [the philosophy/aim of this project here](https://flo-bit.dev/ui-kit/docs/philosophy).
+
+For more information about development, contributing and the like, see the main [README](https://github.com/flo-bit/ui-kit/blob/main/README.md).

package/dist/components/countdown/Countdown.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import NumberFlow, { NumberFlowGroup } from '@number-flow/svelte';
+	import { TimerState } from '../timer';
+	import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '@foxui/core';
+
+	let {
+		timer = $bindable(),
+		class: className,
+		ref = $bindable(null),
+		showHours = false,
+		showMinutes = true,
+		showSeconds = true,
+		...restProps
+	}: WithElementRef<WithoutChildrenOrChild<HTMLAttributes<HTMLDivElement>>> & {
+		timer?: TimerState;
+		showHours?: boolean;
+		showMinutes?: boolean;
+		showSeconds?: boolean;
+	} = $props();
+
+	if (!timer) {
+		timer = new TimerState(1000 * 5);
+	}
+
+	const ss = $derived(Math.floor(timer.remaining / 1000));
+</script>
+
+<NumberFlowGroup>
+	<div
+		bind:this={ref}
+		class={cn(
+			'text-base-900 dark:text-base-100 flex w-full justify-center text-5xl font-bold',
+			className
+		)}
+		style="font-variant-numeric: tabular-nums;"
+		{...restProps}
+	>
+		{#if showSeconds}
+			<NumberFlow value={ss} trend={-1} digits={{ 1: { max: 5 } }} />
+		{/if}
+	</div>
+</NumberFlowGroup>

package/dist/components/countdown/Countdown.svelte.d.ts

@@ -0,0 +1,12 @@
+import { TimerState } from '../timer';
+import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = WithElementRef<WithoutChildrenOrChild<HTMLAttributes<HTMLDivElement>>> & {
+    timer?: TimerState;
+    showHours?: boolean;
+    showMinutes?: boolean;
+    showSeconds?: boolean;
+};
+declare const Countdown: import("svelte").Component<$$ComponentProps, {}, "timer" | "ref">;
+type Countdown = ReturnType<typeof Countdown>;
+export default Countdown;

package/dist/components/countdown/index.d.ts

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

package/dist/components/countdown/index.js

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

package/dist/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from './countdown';
+export * from './stopwatch';
+export * from './timer';
+export * from './relative-time';

package/dist/components/index.js

@@ -0,0 +1,4 @@
+export * from './countdown';
+export * from './stopwatch';
+export * from './timer';
+export * from './relative-time';

package/dist/components/relative-time/RelativeTime.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { onDestroy } from 'svelte';
+	import { register, unregister } from './state';
+
+	export let date: Date | number;
+	export let locale: string;
+	export let live = true;
+
+	let instance = new Object();
+	let text = '';
+
+	register(instance, date, locale, live, (value) => ({ text } = value));
+
+	onDestroy(() => unregister(instance));
+</script>
+
+<span class={$$props.class} title={date.toLocaleString()}>{text}</span>

package/dist/components/relative-time/RelativeTime.svelte.d.ts

@@ -0,0 +1,23 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const RelativeTime: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    date: Date | number;
+    locale: string;
+    live?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type RelativeTime = InstanceType<typeof RelativeTime>;
+export default RelativeTime;

package/dist/components/relative-time/action.d.ts

@@ -0,0 +1,9 @@
+export interface Options {
+    date: Date | number;
+    locale?: string;
+    live?: boolean;
+}
+export declare function relativeTime(node: HTMLElement, options: Options): {
+    update(options: Options): void;
+    destroy(): void;
+};

package/dist/components/relative-time/action.js

@@ -0,0 +1,19 @@
+import { register, unregister } from './state';
+export function relativeTime(node, options) {
+    const callback = ({ text }) => (node.textContent = text);
+    function init(options) {
+        const date = options.date;
+        const locale = options.locale ?? navigator.language;
+        const live = (options.live = true);
+        register(node, date, locale, live, callback);
+    }
+    init(options);
+    return {
+        update(options) {
+            init(options);
+        },
+        destroy() {
+            unregister(node);
+        }
+    };
+}

package/dist/components/relative-time/formatter.d.ts

@@ -0,0 +1 @@
+export declare function getFormatter(locale: string): Intl.RelativeTimeFormat;

package/dist/components/relative-time/formatter.js

@@ -0,0 +1,11 @@
+// keep a cache of formatter per locale, to avoid re-creating them (GC)
+const formatters = new Map();
+// get the Intl.RelativeTimeFormat formatter for the given locale
+export function getFormatter(locale) {
+    if (formatters.has(locale)) {
+        return formatters.get(locale);
+    }
+    const formatter = new Intl.RelativeTimeFormat(locale, { numeric: 'always', style: 'narrow' });
+    formatters.set(locale, formatter);
+    return formatter;
+}

package/dist/components/relative-time/index.d.ts

@@ -0,0 +1,5 @@
+export * from './action';
+export type { Callback } from './render';
+export { register, unregister } from './state';
+export { default } from './RelativeTime.svelte';
+export { default as RelativeTime } from './RelativeTime.svelte';

package/dist/components/relative-time/index.js

@@ -0,0 +1,5 @@
+// adapted from https://github.com/CaptainCodeman/svelte-relative-time
+export * from './action';
+export { register, unregister } from './state';
+export { default } from './RelativeTime.svelte';
+export { default as RelativeTime } from './RelativeTime.svelte';

package/dist/components/relative-time/render.d.ts

@@ -0,0 +1,12 @@
+export type Callback = (result: {
+    seconds: number;
+    count: number;
+    units: Intl.RelativeTimeFormatUnit;
+    text: string;
+}) => void;
+export interface RenderState {
+    date: Date | number;
+    callback: Callback;
+    formatter: Intl.RelativeTimeFormat;
+}
+export declare function render(state: RenderState, now: number): number;

package/dist/components/relative-time/render.js

@@ -0,0 +1,53 @@
+// Array reprsenting one minute, hour, day, week, month, etc in seconds
+const cutoffs = [60, 3600, 86400, 86400 * 7, 86400 * 30, 86400 * 365, Infinity];
+// Array equivalent to the above but in the string representation of the units
+const formatUnits = [
+    'seconds',
+    'minutes',
+    'hours',
+    'days',
+    'weeks',
+    'months',
+    'years'
+];
+// function to render relative time into
+export function render(state, now) {
+    const { date, callback, formatter } = state;
+    // Allow dates or times to be passed
+    const timeMs = typeof date === 'number' ? date : date.getTime();
+    // Get the amount of seconds between the given date and now
+    const delta = timeMs - now;
+    const seconds = Math.round(delta / 1000);
+    // Grab the ideal cutoff unit
+    const unitIndex = cutoffs.findIndex((cutoff) => cutoff > Math.abs(seconds));
+    // units
+    const units = formatUnits[unitIndex];
+    // Get the divisor to divide from the seconds. E.g. if our unit is 'day' our divisor
+    // is one day in seconds, so we can divide our seconds by this to get the # of days
+    const divisor = unitIndex ? cutoffs[unitIndex - 1] : 1;
+    // count of units
+    const count = Math.round(seconds / divisor);
+    // Intl.RelativeTimeFormat do its magic
+    callback({
+        seconds: seconds,
+        count,
+        units,
+        text: formatter.format(count, units).replace('ago', '')
+    });
+    // calculate time to next update, taking account rounding (e.g. it goes from 2 minutes to 1 minute at 90 seconds)
+    // and also the changeover from units (59 seconds shouldn't show as 1 minute, so at 61 seconds we schedule the next
+    // update for 1 second time)
+    const divisorMs = divisor * 1000;
+    let updateIn;
+    if (unitIndex) {
+        updateIn = divisorMs / 2 - (Math.abs(delta) % divisorMs);
+        if (updateIn < 0) {
+            updateIn += divisorMs;
+        }
+    }
+    else {
+        updateIn = divisorMs - (Math.abs(delta) % divisorMs);
+    }
+    const updateAt = now + updateIn;
+    return updateAt;
+}

package/dist/components/relative-time/state.d.ts

@@ -0,0 +1,3 @@
+import type { Callback } from './render';
+export declare function register(instance: object, date: Date | number, locale: string, live: boolean, callback: Callback): void;
+export declare function unregister(instance: object): void;

package/dist/components/relative-time/state.js

@@ -0,0 +1,42 @@
+import { getFormatter } from './formatter';
+import { render } from './render';
+// keep track of each instance
+const instances = new Map();
+// we use a single timer for efficiency and to keep updates in sync
+let updateInterval;
+// register or update instance
+export function register(instance, date, locale, live, callback) {
+    // get the formatter for the given locale, we do this here so we don't keep having to look it up on each tick
+    const formatter = getFormatter(locale);
+    // create state to render
+    const state = { date, callback, formatter };
+    // initial render is immediate, so works for SSR
+    const update = render(state, Date.now());
+    // if it's to update live, we keep a track and schedule the next update
+    if (live) {
+        instances.set(instance, { ...state, update });
+    }
+    else {
+        instances.delete(instance);
+    }
+    // start the clock ticking if there are any live instances
+    if (instances.size) {
+        updateInterval =
+            updateInterval ||
+                setInterval(() => {
+                    const now = Date.now();
+                    for (const state of instances.values()) {
+                        if (state.update <= now) {
+                            state.update = render(state, now);
+                        }
+                    }
+                }, 1000);
+    }
+}
+export function unregister(instance) {
+    instances.delete(instance);
+    if (instances.size === 0) {
+        clearInterval(updateInterval);
+        updateInterval = 0;
+    }
+}

package/dist/components/stopwatch/Stopwatch.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import NumberFlow, { NumberFlowGroup } from '@number-flow/svelte';
+	import { StopwatchState } from './StopwatchState.svelte';
+	import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '@foxui/core';
+
+	let {
+		stopwatch = $bindable(),
+		class: className,
+		ref = $bindable(null),
+		showHours = false,
+		showMinutes = true,
+		showSeconds = true,
+		...restProps
+	}: WithElementRef<WithoutChildrenOrChild<HTMLAttributes<HTMLDivElement>>> & {
+		stopwatch?: StopwatchState;
+		showHours?: boolean;
+		showMinutes?: boolean;
+		showSeconds?: boolean;
+	} = $props();
+
+	if (!stopwatch) {
+		stopwatch = new StopwatchState();
+	}
+
+	const hh = $derived(Math.floor(stopwatch.elapsed / 3600000));
+	const mm = $derived(Math.floor((stopwatch.elapsed % 3600000) / 60000));
+	const ss = $derived(Math.floor((stopwatch.elapsed % 60000) / 1000));
+</script>
+
+<NumberFlowGroup>
+	<div
+		bind:this={ref}
+		class={cn(
+			'text-base-900 dark:text-base-100 flex w-full justify-center text-5xl font-bold',
+			className
+		)}
+		style="font-variant-numeric: tabular-nums;"
+		{...restProps}
+	>
+		{#if showHours}
+			<NumberFlow value={hh} trend={1} format={{ minimumIntegerDigits: 2 }} />
+		{/if}
+
+		{#if showMinutes}
+			<NumberFlow
+				value={mm}
+				trend={1}
+				format={{ minimumIntegerDigits: 2 }}
+				prefix={showHours ? ':' : ''}
+				digits={{ 1: { max: 5 } }}
+			/>
+		{/if}
+
+		{#if showSeconds}
+			<NumberFlow
+				value={ss}
+				format={{ minimumIntegerDigits: 2 }}
+				trend={1}
+				prefix={showHours || showMinutes ? ':' : ''}
+				digits={{ 1: { max: 5 } }}
+			/>
+		{/if}
+	</div>
+</NumberFlowGroup>

package/dist/components/stopwatch/Stopwatch.svelte.d.ts

@@ -0,0 +1,12 @@
+import { StopwatchState } from './StopwatchState.svelte';
+import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = WithElementRef<WithoutChildrenOrChild<HTMLAttributes<HTMLDivElement>>> & {
+    stopwatch?: StopwatchState;
+    showHours?: boolean;
+    showMinutes?: boolean;
+    showSeconds?: boolean;
+};
+declare const Stopwatch: import("svelte").Component<$$ComponentProps, {}, "ref" | "stopwatch">;
+type Stopwatch = ReturnType<typeof Stopwatch>;
+export default Stopwatch;

package/dist/components/stopwatch/StopwatchState.svelte.d.ts

@@ -0,0 +1,23 @@
+type Status = 'running' | 'paused' | 'stopped';
+type Options = {
+    precision?: number;
+};
+export declare class StopwatchState {
+    #private;
+    status: Status;
+    duration: number;
+    elapsed: number;
+    startAt: Date | null;
+    time: Date | null;
+    precision: number;
+    constructor(options?: Options);
+    get isRunning(): boolean;
+    get isStopped(): boolean;
+    get isPaused(): boolean;
+    start(): void;
+    stop(): void;
+    pause(): void;
+    resume(): void;
+    reset(duration?: number): void;
+}
+export {};

package/dist/components/stopwatch/StopwatchState.svelte.js

@@ -0,0 +1,69 @@
+// adopted from https://github.com/joshnuss/svelte-reactive-timer
+export class StopwatchState {
+    status = $state('stopped');
+    duration = $state(0);
+    elapsed = $state(0);
+    startAt = $state(null);
+    time = $state(null);
+    precision;
+    #interval = null;
+    constructor(options = {}) {
+        this.precision = options.precision ?? 1000 / 60;
+    }
+    get isRunning() {
+        return this.status == 'running';
+    }
+    get isStopped() {
+        return this.status == 'stopped';
+    }
+    get isPaused() {
+        return this.status == 'paused';
+    }
+    start() {
+        if (this.isRunning) {
+            this.stop();
+        }
+        this.time = new Date();
+        this.startAt = this.time;
+        this.status = 'running';
+        this.elapsed = 0;
+        this.#schedule();
+    }
+    stop() {
+        this.#dispose();
+        this.status = 'stopped';
+    }
+    pause() {
+        this.#dispose();
+        this.status = 'paused';
+    }
+    resume() {
+        this.time = new Date();
+        this.status = 'running';
+        this.#schedule();
+    }
+    reset(duration) {
+        if (duration) {
+            this.duration = duration;
+        }
+        this.#dispose();
+        this.status = 'stopped';
+        this.time = new Date();
+        this.startAt = this.time;
+        this.elapsed = 0;
+    }
+    #schedule() {
+        this.time = new Date();
+        this.#interval = setInterval(() => this.#onInterval(), this.precision);
+    }
+    #dispose() {
+        if (this.#interval) {
+            clearInterval(this.#interval);
+        }
+    }
+    #onInterval() {
+        const now = new Date();
+        this.elapsed += now.getTime() - this.time.getTime();
+        this.time = now;
+    }
+}

package/dist/components/stopwatch/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Stopwatch } from './Stopwatch.svelte';
+export { StopwatchState } from './StopwatchState.svelte';

package/dist/components/stopwatch/index.js

@@ -0,0 +1,2 @@
+export { default as Stopwatch } from './Stopwatch.svelte';
+export { StopwatchState } from './StopwatchState.svelte';

package/dist/components/timer/Timer.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import NumberFlow, { NumberFlowGroup } from '@number-flow/svelte';
+	import { TimerState } from './TimerState.svelte';
+	import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '@foxui/core';
+
+	let {
+		timer = $bindable(),
+		class: className,
+		ref = $bindable(null),
+		showHours = false,
+		showMinutes = true,
+		showSeconds = true,
+		...restProps
+	}: WithElementRef<WithoutChildrenOrChild<HTMLAttributes<HTMLDivElement>>> & {
+		timer?: TimerState;
+		showHours?: boolean;
+		showMinutes?: boolean;
+		showSeconds?: boolean;
+	} = $props();
+
+	if (!timer) {
+		timer = new TimerState(1000 * 60 * 10);
+	}
+
+	const hh = $derived(Math.floor(timer.remaining / 3600000));
+	const mm = $derived(Math.floor((timer.remaining % 3600000) / 60000));
+	const ss = $derived(Math.floor((timer.remaining % 60000) / 1000));
+</script>
+
+<NumberFlowGroup>
+	<div
+		bind:this={ref}
+		class={cn(
+			'text-base-900 dark:text-base-100 flex w-full justify-center text-5xl font-bold',
+			className
+		)}
+		style="font-variant-numeric: tabular-nums;"
+		{...restProps}
+	>
+		{#if showHours}
+			<NumberFlow value={hh} trend={-1} format={{ minimumIntegerDigits: 2 }} />
+		{/if}
+
+		{#if showMinutes}
+			<NumberFlow
+				value={mm}
+				trend={-1}
+				format={{ minimumIntegerDigits: 2 }}
+				prefix={showHours ? ':' : ''}
+				digits={{ 1: { max: 5 } }}
+			/>
+		{/if}
+
+		{#if showSeconds}
+			<NumberFlow
+				value={ss}
+				format={{ minimumIntegerDigits: 2 }}
+				trend={-1}
+				prefix={showHours || showMinutes ? ':' : ''}
+				digits={{ 1: { max: 5 } }}
+			/>
+		{/if}
+	</div>
+</NumberFlowGroup>

package/dist/components/timer/Timer.svelte.d.ts

@@ -0,0 +1,12 @@
+import { TimerState } from './TimerState.svelte';
+import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = WithElementRef<WithoutChildrenOrChild<HTMLAttributes<HTMLDivElement>>> & {
+    timer?: TimerState;
+    showHours?: boolean;
+    showMinutes?: boolean;
+    showSeconds?: boolean;
+};
+declare const Timer: import("svelte").Component<$$ComponentProps, {}, "timer" | "ref">;
+type Timer = ReturnType<typeof Timer>;
+export default Timer;

package/dist/components/timer/TimerState.svelte.d.ts

@@ -0,0 +1,25 @@
+type Status = 'running' | 'paused' | 'stopped';
+type Options = {
+    precision?: number;
+};
+export declare class TimerState {
+    #private;
+    status: Status;
+    duration: number;
+    elapsed: number;
+    remaining: number;
+    startAt: Date | null;
+    endAt: Date | null;
+    time: Date | null;
+    precision: number;
+    constructor(duration: number, options?: Options);
+    get isRunning(): boolean;
+    get isStopped(): boolean;
+    get isPaused(): boolean;
+    start(): void;
+    stop(): void;
+    pause(): void;
+    resume(): void;
+    reset(duration?: number): void;
+}
+export {};

package/dist/components/timer/TimerState.svelte.js

@@ -0,0 +1,79 @@
+// adopted from https://github.com/joshnuss/svelte-reactive-timer
+export class TimerState {
+    status = $state('stopped');
+    duration = $state(0);
+    elapsed = $state(0);
+    remaining = $derived(this.duration - this.elapsed);
+    startAt = $state(null);
+    endAt = $state(null);
+    time = $state(null);
+    precision;
+    #interval = null;
+    constructor(duration, options = {}) {
+        this.duration = duration;
+        this.precision = options.precision ?? 300;
+    }
+    get isRunning() {
+        return this.status == 'running';
+    }
+    get isStopped() {
+        return this.status == 'stopped';
+    }
+    get isPaused() {
+        return this.status == 'paused';
+    }
+    start() {
+        if (this.isRunning) {
+            this.stop();
+        }
+        this.time = new Date();
+        this.startAt = this.time;
+        this.endAt = new Date(this.time.getTime() + this.duration);
+        this.status = 'running';
+        this.elapsed = 0;
+        this.#schedule();
+    }
+    stop() {
+        this.#dispose();
+        this.status = 'stopped';
+    }
+    pause() {
+        this.#dispose();
+        this.status = 'paused';
+    }
+    resume() {
+        this.time = new Date();
+        this.endAt = new Date(this.time.getTime() + this.remaining);
+        this.status = 'running';
+        this.#schedule();
+    }
+    reset(duration) {
+        if (duration) {
+            this.duration = duration;
+        }
+        this.#dispose();
+        this.status = 'stopped';
+        this.time = new Date();
+        this.startAt = this.time;
+        this.endAt = new Date(this.time.getTime() + this.duration);
+        this.elapsed = 0;
+    }
+    #schedule() {
+        this.time = new Date();
+        this.#interval = setInterval(() => this.#onInterval(), this.precision);
+    }
+    #dispose() {
+        if (this.#interval) {
+            clearInterval(this.#interval);
+        }
+    }
+    #onInterval() {
+        const now = new Date();
+        this.elapsed += now.getTime() - this.time.getTime();
+        this.time = now;
+        if (this.time >= this.endAt) {
+            this.elapsed = this.duration;
+            this.stop();
+        }
+    }
+}

package/dist/components/timer/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Timer } from './Timer.svelte';
+export { TimerState } from './TimerState.svelte';

package/dist/components/timer/index.js

@@ -0,0 +1,2 @@
+export { default as Timer } from './Timer.svelte';
+export { TimerState } from './TimerState.svelte';

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/dist/index.js

@@ -0,0 +1 @@
+export * from './components';

package/dist/types.d.ts

@@ -0,0 +1 @@
+export * from './index';

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@foxui/time",
+  "private": false,
+  "version": "0.4.0",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "types": "./dist/types.d.ts",
+  "svelte": "./dist/index.js",
+  "devDependencies": {
+    "@eslint/compat": "^1.2.5",
+    "@eslint/js": "^9.18.0",
+    "@sveltejs/adapter-auto": "^6.0.0",
+    "@sveltejs/kit": "^2.16.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "@tailwindcss/forms": "^0.5.9",
+    "@tailwindcss/typography": "^0.5.15",
+    "@tailwindcss/vite": "^4.1.5",
+    "eslint": "^9.18.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-svelte": "^3.0.0",
+    "globals": "^16.0.0",
+    "prettier": "^3.4.2",
+    "prettier-plugin-svelte": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "tailwindcss": "^4.1.5",
+    "typescript": "^5.0.0",
+    "typescript-eslint": "^8.20.0",
+    "vite": "^6.2.6",
+    "@sveltejs/adapter-static": "^3.0.8",
+    "@sveltejs/package": "^2.3.11"
+  },
+  "dependencies": {
+    "@number-flow/svelte": "^0.3.7",
+    "bits-ui": "^1.4.3",
+    "@foxui/core": "0.4.0"
+  },
+  "peerDependencies": {
+    "svelte": ">=5",
+    "tailwindcss": ">=3"
+  },
+  "description": "ui kit - svelte 5 + tailwind 4 - time components",
+  "homepage": "https://flo-bit.dev/ui-kit",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/flo-bit/ui-kit.git"
+  },
+  "author": "flo-bit (http://flo-bit.dev/)",
+  "bugs": "https://github.com/flo-bit/ui-kit/issues",
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run prepack",
+    "build:package": "vite build && npm run prepack",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint ."
+  }
+}