svelte-analog-clock 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2018–2026 Wojciech Maj
+Copyright (c) 2026 Adhi Ravishankar
+
+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 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

@@ -1,3 +1,50 @@
-# Temporary Holding Version
+# svelte-analog-clock
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+An analog clock for your Svelte 5 app. Svelte port of [React-Clock](https://github.com/wojtekmaj/react-clock).
+
+## Installation
+
+```sh
+npm install svelte-analog-clock
+```
+
+Requires Svelte 5 or later.
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import Clock from 'svelte-analog-clock';
+</script>
+
+<Clock value={new Date()} />
+```
+
+Styles are imported automatically. Elements use BEM class names starting with `svelte-clock`.
+
+## Props
+
+| Prop name                                                                  | Description                                                                                                                    | Default value           |
+| -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ----------------------- |
+| class                                                                      | Class name(s) added along with `"svelte-clock"`.                                                                               | n/a                     |
+| formatHour                                                                 | `(locale, hour) => string`, used for numbers rendered with `renderNumbers`.                                                    | `Intl.NumberFormat`     |
+| hourHandLength, minuteHandLength, secondHandLength                         | Hand lengths, in percents of the clock radius.                                                                                 | `50`, `70`, `90`        |
+| hourHandOppositeLength, minuteHandOppositeLength, secondHandOppositeLength | Lengths of the tails of the hands, in percents of the clock radius.                                                            | `10`                    |
+| hourHandWidth, minuteHandWidth, secondHandWidth                            | Hand widths, in pixels.                                                                                                        | `4`, `2`, `1`           |
+| hourMarksLength, minuteMarksLength                                         | Mark lengths, in percents of the clock radius.                                                                                 | `10`, `6`               |
+| hourMarksWidth, minuteMarksWidth                                           | Mark widths, in pixels.                                                                                                        | `3`, `1`                |
+| locale                                                                     | Locale used to format hour numbers.                                                                                            | User's browser settings |
+| renderHourMarks, renderMinuteMarks                                         | Whether to render marks.                                                                                                       | `true`                  |
+| renderMinuteHand, renderSecondHand                                         | Whether to render hands.                                                                                                       | `true`                  |
+| renderNumbers                                                              | Whether to render hour numbers.                                                                                                | `false`                 |
+| size                                                                       | Clock size, in pixels.                                                                                                         | `150`                   |
+| useMillisecondPrecision                                                    | Whether the second hand moves smoothly. Only applies when `value` is `undefined`.                                              | `false`                 |
+| value                                                                      | A `Date` or a time string such as `"22:15:30"`. `undefined` shows the current time and keeps ticking; `null` renders no hands. | current time            |
+
+## Part of a monorepo
+
+`svelte-analog-clock` is part of the [svelte-datetime-pickers monorepo](https://github.com/adhiravishankar/svelte-datetime-pickers). See the [live demo and Storybook](https://adhiravishankar.github.io/svelte-datetime-pickers/).
+
+## License
+
+The MIT License.

package/dist/Clock.css

@@ -0,0 +1,62 @@
+.svelte-clock {
+  display: block;
+  position: relative;
+}
+
+.svelte-clock,
+.svelte-clock *,
+.svelte-clock *:before,
+.svelte-clock *:after {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.svelte-clock__face {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border: 1px solid black;
+  border-radius: 50%;
+}
+
+.svelte-clock__hand {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  right: 50%;
+}
+
+.svelte-clock__hand__body {
+  position: absolute;
+  background-color: black;
+  transform: translateX(-50%);
+}
+
+.svelte-clock__second-hand__body {
+  background-color: red;
+}
+
+.svelte-clock__mark {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  right: 50%;
+}
+
+.svelte-clock__mark__body {
+  position: absolute;
+  background-color: black;
+  transform: translateX(-50%);
+}
+
+.svelte-clock__mark__number {
+  position: absolute;
+  left: -40px;
+  width: 80px;
+  text-align: center;
+}

package/dist/Clock.svelte

@@ -0,0 +1,329 @@
+<script lang="ts">
+  import './Clock.css';
+
+  import type { ClassValue } from 'svelte/elements';
+
+  type ClockProps = {
+    /**
+     * Class name(s) that will be added along with `"svelte-clock"` to the main `<time>` element.
+     */
+    class?: ClassValue;
+    /**
+     * Function that formats hour numbers rendered when `renderNumbers` is set. Receives the locale and an hour from 1 to 12.
+     */
+    formatHour?: (locale: string | undefined, hour: number) => string;
+    /**
+     * Hour hand length, in percents of the clock radius.
+     *
+     * @default 50
+     */
+    hourHandLength?: number;
+    /**
+     * Hour hand opposite length, in percents of the clock radius.
+     *
+     * @default 10
+     */
+    hourHandOppositeLength?: number;
+    /**
+     * Hour hand width, in pixels.
+     *
+     * @default 4
+     */
+    hourHandWidth?: number;
+    /**
+     * Hour marks length, in percents of the clock radius.
+     *
+     * @default 10
+     */
+    hourMarksLength?: number;
+    /**
+     * Hour marks width, in pixels.
+     *
+     * @default 3
+     */
+    hourMarksWidth?: number;
+    /**
+     * Locale used to format hour numbers.
+     *
+     * @example 'hu-HU'
+     */
+    locale?: string;
+    /**
+     * Minute hand length, in percents of the clock radius.
+     *
+     * @default 70
+     */
+    minuteHandLength?: number;
+    /**
+     * Minute hand opposite length, in percents of the clock radius.
+     *
+     * @default 10
+     */
+    minuteHandOppositeLength?: number;
+    /**
+     * Minute hand width, in pixels.
+     *
+     * @default 2
+     */
+    minuteHandWidth?: number;
+    /**
+     * Minute marks length, in percents of the clock radius.
+     *
+     * @default 6
+     */
+    minuteMarksLength?: number;
+    /**
+     * Minute marks width, in pixels.
+     *
+     * @default 1
+     */
+    minuteMarksWidth?: number;
+    /**
+     * Whether hour marks should be rendered.
+     *
+     * @default true
+     */
+    renderHourMarks?: boolean;
+    /**
+     * Whether the minute hand should be rendered.
+     *
+     * @default true
+     */
+    renderMinuteHand?: boolean;
+    /**
+     * Whether minute marks should be rendered.
+     *
+     * @default true
+     */
+    renderMinuteMarks?: boolean;
+    /**
+     * Whether hour numbers should be rendered.
+     *
+     * @default false
+     */
+    renderNumbers?: boolean;
+    /**
+     * Whether the second hand should be rendered.
+     *
+     * @default true
+     */
+    renderSecondHand?: boolean;
+    /**
+     * Second hand length, in percents of the clock radius.
+     *
+     * @default 90
+     */
+    secondHandLength?: number;
+    /**
+     * Second hand opposite length, in percents of the clock radius.
+     *
+     * @default 10
+     */
+    secondHandOppositeLength?: number;
+    /**
+     * Second hand width, in pixels.
+     *
+     * @default 1
+     */
+    secondHandWidth?: number;
+    /**
+     * Clock size, in pixels.
+     *
+     * @default 150
+     */
+    size?: number;
+    /**
+     * Whether the second hand should move smoothly. Only applies when `value` is `undefined`.
+     *
+     * @default false
+     */
+    useMillisecondPrecision?: boolean;
+    /**
+     * Time to display. When `undefined`, the clock shows the current time and keeps ticking. When `null`, no hands are rendered.
+     *
+     * @example new Date()
+     * @example '22:15:00'
+     */
+    value?: Date | string | null;
+  };
+
+  let {
+    class: className,
+    formatHour = (locale, hour) => new Intl.NumberFormat(locale).format(hour),
+    hourHandLength = 50,
+    hourHandOppositeLength = 10,
+    hourHandWidth = 4,
+    hourMarksLength = 10,
+    hourMarksWidth = 3,
+    locale,
+    minuteHandLength = 70,
+    minuteHandOppositeLength = 10,
+    minuteHandWidth = 2,
+    minuteMarksLength = 6,
+    minuteMarksWidth = 1,
+    renderHourMarks = true,
+    renderMinuteHand = true,
+    renderMinuteMarks = true,
+    renderNumbers = false,
+    renderSecondHand = true,
+    secondHandLength = 90,
+    secondHandOppositeLength = 10,
+    secondHandWidth = 1,
+    size = 150,
+    useMillisecondPrecision = false,
+    value,
+  }: ClockProps = $props();
+
+  const hourMarks = Array.from({ length: 12 }, (_, index) => index);
+  const minuteMarks = Array.from({ length: 60 }, (_, index) => index).filter(
+    (index) => index % 5 !== 0,
+  );
+
+  let now = $state(new Date());
+
+  $effect(() => {
+    if (value !== undefined) {
+      return;
+    }
+
+    now = new Date();
+
+    if (useMillisecondPrecision) {
+      let frame = requestAnimationFrame(function tick() {
+        now = new Date();
+        frame = requestAnimationFrame(tick);
+      });
+
+      return () => cancelAnimationFrame(frame);
+    }
+
+    const interval = setInterval(() => {
+      now = new Date();
+    }, 1000);
+
+    return () => clearInterval(interval);
+  });
+
+  function parseTime(input: Date | string): Date | null {
+    if (input instanceof Date) {
+      return Number.isNaN(input.getTime()) ? null : input;
+    }
+
+    // Time-only strings, e.g. "22:15" or "22:15:30"
+    const match = /^(\d{1,2}):(\d{2})(?::(\d{2})(?:\.(\d+))?)?$/.exec(input);
+
+    if (match) {
+      const date = new Date();
+      date.setHours(
+        Number(match[1]),
+        Number(match[2]),
+        Number(match[3] ?? 0),
+        Number((match[4] ?? '0').padEnd(3, '0').slice(0, 3)),
+      );
+      return date;
+    }
+
+    const date = new Date(input);
+    return Number.isNaN(date.getTime()) ? null : date;
+  }
+
+  const date = $derived(value === undefined ? now : value === null ? null : parseTime(value));
+
+  const angles = $derived.by(() => {
+    if (!date) {
+      return null;
+    }
+
+    const hours = date.getHours() % 12;
+    const minutes = date.getMinutes();
+    const seconds = date.getSeconds();
+    const milliseconds = useMillisecondPrecision ? date.getMilliseconds() : 0;
+
+    return {
+      hour: hours * 30 + minutes * 0.5 + seconds / 120,
+      minute: minutes * 6 + seconds * 0.1,
+      second: seconds * 6 + milliseconds * 0.006,
+    };
+  });
+
+  const datetime = $derived(date ? date.toISOString() : undefined);
+</script>
+
+{#snippet hand(
+  name: string,
+  angle: number,
+  length: number,
+  oppositeLength: number,
+  width: number,
+)}
+  <div class="svelte-clock__hand svelte-clock__{name}-hand" style:transform="rotate({angle}deg)">
+    <div
+      class="svelte-clock__hand__body svelte-clock__{name}-hand__body"
+      style:width="{width}px"
+      style:top="{50 - length / 2}%"
+      style:bottom="{50 - oppositeLength / 2}%"
+    ></div>
+  </div>
+{/snippet}
+
+<time class={['svelte-clock', className]} {datetime} style:width="{size}px" style:height="{size}px">
+  <div class="svelte-clock__face">
+    {#if renderMinuteMarks}
+      {#each minuteMarks as index (index)}
+        <div class="svelte-clock__mark svelte-clock__minute-mark" style:transform="rotate({index * 6}deg)">
+          <div
+            class="svelte-clock__mark__body svelte-clock__minute-mark__body"
+            style:width="{minuteMarksWidth}px"
+            style:bottom="{100 - minuteMarksLength / 2}%"
+          ></div>
+        </div>
+      {/each}
+    {/if}
+    {#if renderHourMarks}
+      {#each hourMarks as index (index)}
+        <div class="svelte-clock__mark svelte-clock__hour-mark" style:transform="rotate({index * 30}deg)">
+          <div
+            class="svelte-clock__mark__body svelte-clock__hour-mark__body"
+            style:width="{hourMarksWidth}px"
+            style:bottom="{100 - hourMarksLength / 2}%"
+          ></div>
+        </div>
+      {/each}
+    {/if}
+    {#if renderNumbers}
+      {#each hourMarks as index (index)}
+        {@const hourNumber = index === 0 ? 12 : index}
+        <div class="svelte-clock__mark" style:transform="rotate({index * 30}deg)">
+          <div
+            class="svelte-clock__mark__number"
+            style:top="{hourMarksLength}%"
+            style:transform="rotate({-index * 30}deg)"
+          >
+            {formatHour(locale, hourNumber)}
+          </div>
+        </div>
+      {/each}
+    {/if}
+  </div>
+  {#if angles}
+    {@render hand('hour', angles.hour, hourHandLength, hourHandOppositeLength, hourHandWidth)}
+    {#if renderMinuteHand}
+      {@render hand(
+        'minute',
+        angles.minute,
+        minuteHandLength,
+        minuteHandOppositeLength,
+        minuteHandWidth,
+      )}
+    {/if}
+    {#if renderSecondHand}
+      {@render hand(
+        'second',
+        angles.second,
+        secondHandLength,
+        secondHandOppositeLength,
+        secondHandWidth,
+      )}
+    {/if}
+  {/if}
+</time>

package/dist/Clock.svelte.d.ts

@@ -0,0 +1,148 @@
+import './Clock.css';
+import type { ClassValue } from 'svelte/elements';
+type ClockProps = {
+    /**
+     * Class name(s) that will be added along with `"svelte-clock"` to the main `<time>` element.
+     */
+    class?: ClassValue;
+    /**
+     * Function that formats hour numbers rendered when `renderNumbers` is set. Receives the locale and an hour from 1 to 12.
+     */
+    formatHour?: (locale: string | undefined, hour: number) => string;
+    /**
+     * Hour hand length, in percents of the clock radius.
+     *
+     * @default 50
+     */
+    hourHandLength?: number;
+    /**
+     * Hour hand opposite length, in percents of the clock radius.
+     *
+     * @default 10
+     */
+    hourHandOppositeLength?: number;
+    /**
+     * Hour hand width, in pixels.
+     *
+     * @default 4
+     */
+    hourHandWidth?: number;
+    /**
+     * Hour marks length, in percents of the clock radius.
+     *
+     * @default 10
+     */
+    hourMarksLength?: number;
+    /**
+     * Hour marks width, in pixels.
+     *
+     * @default 3
+     */
+    hourMarksWidth?: number;
+    /**
+     * Locale used to format hour numbers.
+     *
+     * @example 'hu-HU'
+     */
+    locale?: string;
+    /**
+     * Minute hand length, in percents of the clock radius.
+     *
+     * @default 70
+     */
+    minuteHandLength?: number;
+    /**
+     * Minute hand opposite length, in percents of the clock radius.
+     *
+     * @default 10
+     */
+    minuteHandOppositeLength?: number;
+    /**
+     * Minute hand width, in pixels.
+     *
+     * @default 2
+     */
+    minuteHandWidth?: number;
+    /**
+     * Minute marks length, in percents of the clock radius.
+     *
+     * @default 6
+     */
+    minuteMarksLength?: number;
+    /**
+     * Minute marks width, in pixels.
+     *
+     * @default 1
+     */
+    minuteMarksWidth?: number;
+    /**
+     * Whether hour marks should be rendered.
+     *
+     * @default true
+     */
+    renderHourMarks?: boolean;
+    /**
+     * Whether the minute hand should be rendered.
+     *
+     * @default true
+     */
+    renderMinuteHand?: boolean;
+    /**
+     * Whether minute marks should be rendered.
+     *
+     * @default true
+     */
+    renderMinuteMarks?: boolean;
+    /**
+     * Whether hour numbers should be rendered.
+     *
+     * @default false
+     */
+    renderNumbers?: boolean;
+    /**
+     * Whether the second hand should be rendered.
+     *
+     * @default true
+     */
+    renderSecondHand?: boolean;
+    /**
+     * Second hand length, in percents of the clock radius.
+     *
+     * @default 90
+     */
+    secondHandLength?: number;
+    /**
+     * Second hand opposite length, in percents of the clock radius.
+     *
+     * @default 10
+     */
+    secondHandOppositeLength?: number;
+    /**
+     * Second hand width, in pixels.
+     *
+     * @default 1
+     */
+    secondHandWidth?: number;
+    /**
+     * Clock size, in pixels.
+     *
+     * @default 150
+     */
+    size?: number;
+    /**
+     * Whether the second hand should move smoothly. Only applies when `value` is `undefined`.
+     *
+     * @default false
+     */
+    useMillisecondPrecision?: boolean;
+    /**
+     * Time to display. When `undefined`, the clock shows the current time and keeps ticking. When `null`, no hands are rendered.
+     *
+     * @example new Date()
+     * @example '22:15:00'
+     */
+    value?: Date | string | null;
+};
+declare const Clock: import("svelte").Component<ClockProps, {}, "">;
+type Clock = ReturnType<typeof Clock>;
+export default Clock;

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import Clock from './Clock.svelte';
+import type { ComponentProps } from 'svelte';
+export type ClockProps = ComponentProps<typeof Clock>;
+export { Clock };
+export default Clock;

package/dist/index.js

@@ -0,0 +1,3 @@
+import Clock from './Clock.svelte';
+export { Clock };
+export default Clock;

package/package.json

@@ -1,6 +1,67 @@
 {
   "name": "svelte-analog-clock",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "An analog clock for your Svelte app.",
+  "keywords": [
+    "analog-clock",
+    "clock",
+    "svelte",
+    "time"
+  ],
+  "license": "MIT",
+  "author": {
+    "name": "Adhi Ravishankar",
+    "email": "adhiravishankar@gmail.com"
+  },
+  "files": [
+    "dist/**/*",
+    "src/**/*",
+    "!**/*.spec.*"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "*.svelte"
+  ],
+  "types": "./dist/index.d.ts",
+  "svelte": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./dist/*.css": "./dist/*.css"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "scripts": {
+    "build": "svelte-package --input src --output dist",
+    "clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true })\"",
+    "format": "vp fmt --check",
+    "lint": "vp lint",
+    "prepack": "npm run clean && npm run build",
+    "test": "npm run lint && npm run tsc && npm run format && npm run unit",
+    "tsc": "svelte-check --tsconfig ./tsconfig.json",
+    "unit": "vp test",
+    "watch": "svelte-package --input src --output dist --watch"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^3.0.1",
+    "@sveltejs/vite-plugin-svelte": "^7.3.1",
+    "@vitest/browser-playwright": "5.0.5",
+    "playwright": "^1.64.1",
+    "svelte": "^5.57.2",
+    "svelte-check": "^4.7.7",
+    "typescript": "^6.0.3",
+    "vite": "npm:@voidzero-dev/vite-plus-core@1.4.0",
+    "vite-plus": "1.4.0",
+    "vitest": "5.0.5",
+    "vitest-browser-svelte": "^3.1.0"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  }
+}

package/src/Clock.css

@@ -0,0 +1,62 @@
+.svelte-clock {
+  display: block;
+  position: relative;
+}
+
+.svelte-clock,
+.svelte-clock *,
+.svelte-clock *:before,
+.svelte-clock *:after {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.svelte-clock__face {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border: 1px solid black;
+  border-radius: 50%;
+}
+
+.svelte-clock__hand {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  right: 50%;
+}
+
+.svelte-clock__hand__body {
+  position: absolute;
+  background-color: black;
+  transform: translateX(-50%);
+}
+
+.svelte-clock__second-hand__body {
+  background-color: red;
+}
+
+.svelte-clock__mark {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  right: 50%;
+}
+
+.svelte-clock__mark__body {
+  position: absolute;
+  background-color: black;
+  transform: translateX(-50%);
+}
+
+.svelte-clock__mark__number {
+  position: absolute;
+  left: -40px;
+  width: 80px;
+  text-align: center;
+}

package/src/Clock.svelte

@@ -0,0 +1,329 @@
+<script lang="ts">
+  import './Clock.css';
+
+  import type { ClassValue } from 'svelte/elements';
+
+  type ClockProps = {
+    /**
+     * Class name(s) that will be added along with `"svelte-clock"` to the main `<time>` element.
+     */
+    class?: ClassValue;
+    /**
+     * Function that formats hour numbers rendered when `renderNumbers` is set. Receives the locale and an hour from 1 to 12.
+     */
+    formatHour?: (locale: string | undefined, hour: number) => string;
+    /**
+     * Hour hand length, in percents of the clock radius.
+     *
+     * @default 50
+     */
+    hourHandLength?: number;
+    /**
+     * Hour hand opposite length, in percents of the clock radius.
+     *
+     * @default 10
+     */
+    hourHandOppositeLength?: number;
+    /**
+     * Hour hand width, in pixels.
+     *
+     * @default 4
+     */
+    hourHandWidth?: number;
+    /**
+     * Hour marks length, in percents of the clock radius.
+     *
+     * @default 10
+     */
+    hourMarksLength?: number;
+    /**
+     * Hour marks width, in pixels.
+     *
+     * @default 3
+     */
+    hourMarksWidth?: number;
+    /**
+     * Locale used to format hour numbers.
+     *
+     * @example 'hu-HU'
+     */
+    locale?: string;
+    /**
+     * Minute hand length, in percents of the clock radius.
+     *
+     * @default 70
+     */
+    minuteHandLength?: number;
+    /**
+     * Minute hand opposite length, in percents of the clock radius.
+     *
+     * @default 10
+     */
+    minuteHandOppositeLength?: number;
+    /**
+     * Minute hand width, in pixels.
+     *
+     * @default 2
+     */
+    minuteHandWidth?: number;
+    /**
+     * Minute marks length, in percents of the clock radius.
+     *
+     * @default 6
+     */
+    minuteMarksLength?: number;
+    /**
+     * Minute marks width, in pixels.
+     *
+     * @default 1
+     */
+    minuteMarksWidth?: number;
+    /**
+     * Whether hour marks should be rendered.
+     *
+     * @default true
+     */
+    renderHourMarks?: boolean;
+    /**
+     * Whether the minute hand should be rendered.
+     *
+     * @default true
+     */
+    renderMinuteHand?: boolean;
+    /**
+     * Whether minute marks should be rendered.
+     *
+     * @default true
+     */
+    renderMinuteMarks?: boolean;
+    /**
+     * Whether hour numbers should be rendered.
+     *
+     * @default false
+     */
+    renderNumbers?: boolean;
+    /**
+     * Whether the second hand should be rendered.
+     *
+     * @default true
+     */
+    renderSecondHand?: boolean;
+    /**
+     * Second hand length, in percents of the clock radius.
+     *
+     * @default 90
+     */
+    secondHandLength?: number;
+    /**
+     * Second hand opposite length, in percents of the clock radius.
+     *
+     * @default 10
+     */
+    secondHandOppositeLength?: number;
+    /**
+     * Second hand width, in pixels.
+     *
+     * @default 1
+     */
+    secondHandWidth?: number;
+    /**
+     * Clock size, in pixels.
+     *
+     * @default 150
+     */
+    size?: number;
+    /**
+     * Whether the second hand should move smoothly. Only applies when `value` is `undefined`.
+     *
+     * @default false
+     */
+    useMillisecondPrecision?: boolean;
+    /**
+     * Time to display. When `undefined`, the clock shows the current time and keeps ticking. When `null`, no hands are rendered.
+     *
+     * @example new Date()
+     * @example '22:15:00'
+     */
+    value?: Date | string | null;
+  };
+
+  let {
+    class: className,
+    formatHour = (locale, hour) => new Intl.NumberFormat(locale).format(hour),
+    hourHandLength = 50,
+    hourHandOppositeLength = 10,
+    hourHandWidth = 4,
+    hourMarksLength = 10,
+    hourMarksWidth = 3,
+    locale,
+    minuteHandLength = 70,
+    minuteHandOppositeLength = 10,
+    minuteHandWidth = 2,
+    minuteMarksLength = 6,
+    minuteMarksWidth = 1,
+    renderHourMarks = true,
+    renderMinuteHand = true,
+    renderMinuteMarks = true,
+    renderNumbers = false,
+    renderSecondHand = true,
+    secondHandLength = 90,
+    secondHandOppositeLength = 10,
+    secondHandWidth = 1,
+    size = 150,
+    useMillisecondPrecision = false,
+    value,
+  }: ClockProps = $props();
+
+  const hourMarks = Array.from({ length: 12 }, (_, index) => index);
+  const minuteMarks = Array.from({ length: 60 }, (_, index) => index).filter(
+    (index) => index % 5 !== 0,
+  );
+
+  let now = $state(new Date());
+
+  $effect(() => {
+    if (value !== undefined) {
+      return;
+    }
+
+    now = new Date();
+
+    if (useMillisecondPrecision) {
+      let frame = requestAnimationFrame(function tick() {
+        now = new Date();
+        frame = requestAnimationFrame(tick);
+      });
+
+      return () => cancelAnimationFrame(frame);
+    }
+
+    const interval = setInterval(() => {
+      now = new Date();
+    }, 1000);
+
+    return () => clearInterval(interval);
+  });
+
+  function parseTime(input: Date | string): Date | null {
+    if (input instanceof Date) {
+      return Number.isNaN(input.getTime()) ? null : input;
+    }
+
+    // Time-only strings, e.g. "22:15" or "22:15:30"
+    const match = /^(\d{1,2}):(\d{2})(?::(\d{2})(?:\.(\d+))?)?$/.exec(input);
+
+    if (match) {
+      const date = new Date();
+      date.setHours(
+        Number(match[1]),
+        Number(match[2]),
+        Number(match[3] ?? 0),
+        Number((match[4] ?? '0').padEnd(3, '0').slice(0, 3)),
+      );
+      return date;
+    }
+
+    const date = new Date(input);
+    return Number.isNaN(date.getTime()) ? null : date;
+  }
+
+  const date = $derived(value === undefined ? now : value === null ? null : parseTime(value));
+
+  const angles = $derived.by(() => {
+    if (!date) {
+      return null;
+    }
+
+    const hours = date.getHours() % 12;
+    const minutes = date.getMinutes();
+    const seconds = date.getSeconds();
+    const milliseconds = useMillisecondPrecision ? date.getMilliseconds() : 0;
+
+    return {
+      hour: hours * 30 + minutes * 0.5 + seconds / 120,
+      minute: minutes * 6 + seconds * 0.1,
+      second: seconds * 6 + milliseconds * 0.006,
+    };
+  });
+
+  const datetime = $derived(date ? date.toISOString() : undefined);
+</script>
+
+{#snippet hand(
+  name: string,
+  angle: number,
+  length: number,
+  oppositeLength: number,
+  width: number,
+)}
+  <div class="svelte-clock__hand svelte-clock__{name}-hand" style:transform="rotate({angle}deg)">
+    <div
+      class="svelte-clock__hand__body svelte-clock__{name}-hand__body"
+      style:width="{width}px"
+      style:top="{50 - length / 2}%"
+      style:bottom="{50 - oppositeLength / 2}%"
+    ></div>
+  </div>
+{/snippet}
+
+<time class={['svelte-clock', className]} {datetime} style:width="{size}px" style:height="{size}px">
+  <div class="svelte-clock__face">
+    {#if renderMinuteMarks}
+      {#each minuteMarks as index (index)}
+        <div class="svelte-clock__mark svelte-clock__minute-mark" style:transform="rotate({index * 6}deg)">
+          <div
+            class="svelte-clock__mark__body svelte-clock__minute-mark__body"
+            style:width="{minuteMarksWidth}px"
+            style:bottom="{100 - minuteMarksLength / 2}%"
+          ></div>
+        </div>
+      {/each}
+    {/if}
+    {#if renderHourMarks}
+      {#each hourMarks as index (index)}
+        <div class="svelte-clock__mark svelte-clock__hour-mark" style:transform="rotate({index * 30}deg)">
+          <div
+            class="svelte-clock__mark__body svelte-clock__hour-mark__body"
+            style:width="{hourMarksWidth}px"
+            style:bottom="{100 - hourMarksLength / 2}%"
+          ></div>
+        </div>
+      {/each}
+    {/if}
+    {#if renderNumbers}
+      {#each hourMarks as index (index)}
+        {@const hourNumber = index === 0 ? 12 : index}
+        <div class="svelte-clock__mark" style:transform="rotate({index * 30}deg)">
+          <div
+            class="svelte-clock__mark__number"
+            style:top="{hourMarksLength}%"
+            style:transform="rotate({-index * 30}deg)"
+          >
+            {formatHour(locale, hourNumber)}
+          </div>
+        </div>
+      {/each}
+    {/if}
+  </div>
+  {#if angles}
+    {@render hand('hour', angles.hour, hourHandLength, hourHandOppositeLength, hourHandWidth)}
+    {#if renderMinuteHand}
+      {@render hand(
+        'minute',
+        angles.minute,
+        minuteHandLength,
+        minuteHandOppositeLength,
+        minuteHandWidth,
+      )}
+    {/if}
+    {#if renderSecondHand}
+      {@render hand(
+        'second',
+        angles.second,
+        secondHandLength,
+        secondHandOppositeLength,
+        secondHandWidth,
+      )}
+    {/if}
+  {/if}
+</time>

package/src/index.ts

@@ -0,0 +1,8 @@
+import Clock from './Clock.svelte';
+
+import type { ComponentProps } from 'svelte';
+
+export type ClockProps = ComponentProps<typeof Clock>;
+export { Clock };
+
+export default Clock;