svelte-time-input 0.0.0-stage → 0.2.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,37 @@
-# Temporary Holding Version
+# svelte-time-input
 
-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.
+Segmented time input fields for your Svelte 5 app. Svelte port of the input part of [React-Time-Picker](https://github.com/wojtekmaj/react-time-picker), built on [svelte-date-input](../svelte-date-input).
+
+## Installation
+
+```sh
+npm install svelte-time-input
+```
+
+Requires Svelte 5 or later. It installs `svelte-date-input` as a dependency.
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import TimeInput from 'svelte-time-input';
+
+  let value = $state<string | null>('22:15');
+</script>
+
+<TimeInput name="time" onChange={(nextValue) => (value = nextValue)} {value} />
+```
+
+`value` is an `HH:mm[:ss]` string (a `Date` is accepted too) and `onChange` receives such a string, or `null`.
+
+## Props
+
+`maxDetail` (`"hour"`, `"minute"` by default, or `"second"`), `format`, `locale`, `disabled`, `required`, `autoFocus`, `className`, `customInputsForm`, `name`, `nativeInputAriaLabel`, `showLeadingZeros`, `onChange`, `onInvalidChange`, and the `hour`/`minute`/`second`/`amPm` `*AriaLabel` and `*Placeholder` props. See [svelte-date-input](../svelte-date-input) for details.
+
+## Part of a monorepo
+
+`svelte-time-input` 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/TimeInput.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { SegmentedInput } from 'svelte-date-input';
+
+  import type { ComponentProps } from 'svelte';
+  import type { LooseValuePiece, TimeDetail } from 'svelte-date-input';
+
+  type TimeInputProps = Omit<
+    ComponentProps<typeof SegmentedInput>,
+    | 'dayAriaLabel'
+    | 'dayPlaceholder'
+    | 'kind'
+    | 'maxDate'
+    | 'maxDetail'
+    | 'minDate'
+    | 'monthAriaLabel'
+    | 'monthPlaceholder'
+    | 'onChange'
+    | 'value'
+    | 'yearAriaLabel'
+    | 'yearPlaceholder'
+  > & {
+    /**
+     * The most detailed field the user shall see.
+     *
+     * @default 'minute'
+     */
+    maxDetail?: TimeDetail;
+    /**
+     * Function called when the user picks a valid time, as an `HH:mm` (or `HH:mm:ss`) string.
+     */
+    onChange?: (value: string | null, shouldCloseWidgets: boolean) => void;
+    /**
+     * Time as an `HH:mm[:ss]` string or a Date.
+     */
+    value?: LooseValuePiece;
+  };
+
+  let { onChange, ...props }: TimeInputProps = $props();
+</script>
+
+<SegmentedInput
+  {...props}
+  kind="time"
+  onChange={(value, shouldCloseWidgets) => onChange?.(value as string | null, shouldCloseWidgets)}
+/>

package/dist/TimeInput.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SegmentedInput } from 'svelte-date-input';
+import type { ComponentProps } from 'svelte';
+import type { LooseValuePiece, TimeDetail } from 'svelte-date-input';
+type TimeInputProps = Omit<ComponentProps<typeof SegmentedInput>, 'dayAriaLabel' | 'dayPlaceholder' | 'kind' | 'maxDate' | 'maxDetail' | 'minDate' | 'monthAriaLabel' | 'monthPlaceholder' | 'onChange' | 'value' | 'yearAriaLabel' | 'yearPlaceholder'> & {
+    /**
+     * The most detailed field the user shall see.
+     *
+     * @default 'minute'
+     */
+    maxDetail?: TimeDetail;
+    /**
+     * Function called when the user picks a valid time, as an `HH:mm` (or `HH:mm:ss`) string.
+     */
+    onChange?: (value: string | null, shouldCloseWidgets: boolean) => void;
+    /**
+     * Time as an `HH:mm[:ss]` string or a Date.
+     */
+    value?: LooseValuePiece;
+};
+declare const TimeInput: import("svelte").Component<TimeInputProps, {}, "">;
+type TimeInput = ReturnType<typeof TimeInput>;
+export default TimeInput;

package/dist/index.d.ts

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

package/dist/index.js

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

package/package.json

@@ -1,6 +1,70 @@
 {
   "name": "svelte-time-input",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "Segmented time input fields for your Svelte app.",
+  "keywords": [
+    "input",
+    "svelte",
+    "time",
+    "time-input"
+  ],
+  "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"
+  },
+  "dependencies": {
+    "svelte-date-input": "^0.2.0"
+  },
+  "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/TimeInput.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { SegmentedInput } from 'svelte-date-input';
+
+  import type { ComponentProps } from 'svelte';
+  import type { LooseValuePiece, TimeDetail } from 'svelte-date-input';
+
+  type TimeInputProps = Omit<
+    ComponentProps<typeof SegmentedInput>,
+    | 'dayAriaLabel'
+    | 'dayPlaceholder'
+    | 'kind'
+    | 'maxDate'
+    | 'maxDetail'
+    | 'minDate'
+    | 'monthAriaLabel'
+    | 'monthPlaceholder'
+    | 'onChange'
+    | 'value'
+    | 'yearAriaLabel'
+    | 'yearPlaceholder'
+  > & {
+    /**
+     * The most detailed field the user shall see.
+     *
+     * @default 'minute'
+     */
+    maxDetail?: TimeDetail;
+    /**
+     * Function called when the user picks a valid time, as an `HH:mm` (or `HH:mm:ss`) string.
+     */
+    onChange?: (value: string | null, shouldCloseWidgets: boolean) => void;
+    /**
+     * Time as an `HH:mm[:ss]` string or a Date.
+     */
+    value?: LooseValuePiece;
+  };
+
+  let { onChange, ...props }: TimeInputProps = $props();
+</script>
+
+<SegmentedInput
+  {...props}
+  kind="time"
+  onChange={(value, shouldCloseWidgets) => onChange?.(value as string | null, shouldCloseWidgets)}
+/>

package/src/index.ts

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