svelte-time-input 0.3.0 → 0.5.0

package/README.md

@@ -5,7 +5,7 @@ Segmented time input fields for your Svelte 5 app. Svelte port of the input part
 ## Installation
 
 ```sh
-npm install svelte-time-input
+npm install svelte-time-input svelte-date-utils
 ```
 
 Requires Svelte 5 or later. It installs `svelte-date-input` as a dependency.
@@ -15,13 +15,18 @@ Requires Svelte 5 or later. It installs `svelte-date-input` as a dependency.
 ```svelte
 <script lang="ts">
   import TimeInput from 'svelte-time-input';
+  import { AdapterDate } from 'svelte-date-utils';
+  import { provideDateAdapter } from 'svelte-date-utils';
 
+  provideDateAdapter(new AdapterDate());
   let value = $state<string | null>('22:15');
 </script>
 
 <TimeInput name="time" onChange={(nextValue) => (value = nextValue)} {value} />
 ```
 
+The adapter is required and comes from Svelte context. Call `provideDateAdapter(adapter)` in this component or an ancestor before rendering `TimeInput`; without it, the input throws an error. The public time value remains an `HH:mm[:ss]` string, while the adapter supplies date operations used internally. `AdapterDate` uses native `Date`; date-fns, Luxon and `@internationalized/date` adapters are exported from `svelte-date-utils/date-fns`, `svelte-date-utils/luxon` and `svelte-date-utils/internationalized`.
+
 `value` is an `HH:mm[:ss]` string (a `Date` is accepted too) and `onChange` receives such a string, or `null`.
 
 ## Props

package/dist/TimeInput.svelte

@@ -1,10 +1,12 @@
-<script lang="ts">
+<script lang="ts" generics="T">
   import { SegmentedInput } from 'svelte-date-input';
 
   import type { ComponentProps } from 'svelte';
-  import type { LooseValuePiece, TimeDetail } from 'svelte-date-input';
+  import type { TimeDetail } from 'svelte-date-input';
 
-  type TimeInputProps = Omit<
+  type LooseValuePiece<T> = string | T | null;
+
+  type TimeInputProps<T> = Omit<
     ComponentProps<typeof SegmentedInput>,
     | 'dayAriaLabel'
     | 'dayPlaceholder'
@@ -32,10 +34,10 @@
     /**
      * Time as an `HH:mm[:ss]` string or a Date.
      */
-    value?: LooseValuePiece;
+    value?: LooseValuePiece<T>;
   };
 
-  let { onChange, ...props }: TimeInputProps = $props();
+  let { onChange, ...props }: TimeInputProps<T> = $props();
 </script>
 
 <SegmentedInput

package/dist/TimeInput.svelte.d.ts

@@ -1,7 +1,8 @@
 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'> & {
+import type { TimeDetail } from 'svelte-date-input';
+type LooseValuePiece<T> = string | T | null;
+type TimeInputProps<T> = Omit<ComponentProps<typeof SegmentedInput>, 'dayAriaLabel' | 'dayPlaceholder' | 'kind' | 'maxDate' | 'maxDetail' | 'minDate' | 'monthAriaLabel' | 'monthPlaceholder' | 'onChange' | 'value' | 'yearAriaLabel' | 'yearPlaceholder'> & {
     /**
      * The most detailed field the user shall see.
      *
@@ -15,8 +16,29 @@ type TimeInputProps = Omit<ComponentProps<typeof SegmentedInput>, 'dayAriaLabel'
     /**
      * Time as an `HH:mm[:ss]` string or a Date.
      */
-    value?: LooseValuePiece;
+    value?: LooseValuePiece<T>;
 };
-declare const TimeInput: import("svelte").Component<TimeInputProps, {}, "">;
-type TimeInput = ReturnType<typeof TimeInput>;
+declare function $$render<T>(): {
+    props: TimeInputProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const TimeInput: $$IsomorphicComponent;
+type TimeInput<T> = InstanceType<typeof TimeInput<T>>;
 export default TimeInput;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-time-input",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Segmented time input fields for your Svelte app.",
   "keywords": [
     "input",
@@ -49,7 +49,7 @@
     "watch": "svelte-package --input src --output dist --watch"
   },
   "dependencies": {
-    "svelte-date-input": "^0.3.0"
+    "svelte-date-input": "^0.5.0"
   },
   "devDependencies": {
     "@sveltejs/package": "^3.0.1",

package/src/TimeInput.svelte

@@ -1,10 +1,12 @@
-<script lang="ts">
+<script lang="ts" generics="T">
   import { SegmentedInput } from 'svelte-date-input';
 
   import type { ComponentProps } from 'svelte';
-  import type { LooseValuePiece, TimeDetail } from 'svelte-date-input';
+  import type { TimeDetail } from 'svelte-date-input';
 
-  type TimeInputProps = Omit<
+  type LooseValuePiece<T> = string | T | null;
+
+  type TimeInputProps<T> = Omit<
     ComponentProps<typeof SegmentedInput>,
     | 'dayAriaLabel'
     | 'dayPlaceholder'
@@ -32,10 +34,10 @@
     /**
      * Time as an `HH:mm[:ss]` string or a Date.
      */
-    value?: LooseValuePiece;
+    value?: LooseValuePiece<T>;
   };
 
-  let { onChange, ...props }: TimeInputProps = $props();
+  let { onChange, ...props }: TimeInputProps<T> = $props();
 </script>
 
 <SegmentedInput