@streamscloud/kit 0.21.1 → 0.22.0

package/dist/ui/date-picker/cmp.date-picker.svelte

@@ -186,6 +186,7 @@ DatePicker — single-day calendar picker built on Floating UI for positioning.
 | `--sc-kit--date-picker--background` | Trigger background | `var(--sc-kit--color--bg--field)` |
 | `--sc-kit--date-picker--background--disabled` | Trigger background when disabled | `var(--sc-kit--color--bg--field-alt)` |
 | `--sc-kit--date-picker--border-color` | Trigger border color | `var(--sc-kit--color--border--field)` |
+| `--sc-kit--date-picker--border-color--hover` | Trigger border color on hover | `var(--sc-kit--color--border--strong)` |
 | `--sc-kit--date-picker--border-color--error` | Trigger border color in error state | `var(--sc-kit--color--danger)` |
 | `--sc-kit--date-picker--border-radius` | Trigger border radius | per size — `sm` 4px, `md`/`lg` 6px |
 | `--sc-kit--date-picker--underline-color` | Inset bottom-underline indicator (transparent default, accent when open, danger on error) | `transparent` |
@@ -206,6 +207,7 @@ DatePicker — single-day calendar picker built on Floating UI for positioning.
   --_dp--background: var(--sc-kit--date-picker--background, var(--sc-kit--color--bg--field));
   --_dp--background-disabled: var(--sc-kit--date-picker--background--disabled, var(--sc-kit--color--bg--field-alt));
   --_dp--border-color: var(--sc-kit--date-picker--border-color, var(--sc-kit--color--border--field));
+  --_dp--border-color-hover: var(--sc-kit--date-picker--border-color--hover, var(--sc-kit--color--border--strong));
   --_dp--border-color-error: var(--sc-kit--date-picker--border-color--error, var(--sc-kit--color--danger));
   --_dp--border-radius: var(--sc-kit--date-picker--border-radius, var(--_dp--size-border-radius, var(--sc-kit--field--border-radius--md)));
   --_dp--underline-color: var(--sc-kit--date-picker--underline-color, transparent);
@@ -252,7 +254,11 @@ DatePicker — single-day calendar picker built on Floating UI for positioning.
   --_dp--size-icon-size: var(--sc-kit--field--icon--size--lg);
   --_dp--size-border-radius: var(--sc-kit--field--border-radius--md);
 }
+.date-picker:where(:hover:not(:focus-within)) {
+  --sc-kit--date-picker--border-color: var(--_dp--border-color-hover);
+}
 .date-picker--open {
+  --sc-kit--date-picker--border-color: unset;
   --sc-kit--date-picker--underline-color: var(--sc-kit--color--accent);
 }
 .date-picker--error {
@@ -260,6 +266,7 @@ DatePicker — single-day calendar picker built on Floating UI for positioning.
   --sc-kit--date-picker--underline-color: var(--sc-kit--color--danger);
 }
 .date-picker--disabled, .date-picker--readonly, .date-picker--inert {
+  --sc-kit--date-picker--border-color: unset;
   --sc-kit--date-picker--underline-color: unset;
   --_--input-affordance--opacity: 0;
   --_--input-affordance--scale: 0;

package/dist/ui/date-picker/cmp.date-picker.svelte.d.ts

@@ -68,6 +68,7 @@ type Props = ClearableProps | RequiredProps;
  * | `--sc-kit--date-picker--background` | Trigger background | `var(--sc-kit--color--bg--field)` |
  * | `--sc-kit--date-picker--background--disabled` | Trigger background when disabled | `var(--sc-kit--color--bg--field-alt)` |
  * | `--sc-kit--date-picker--border-color` | Trigger border color | `var(--sc-kit--color--border--field)` |
+ * | `--sc-kit--date-picker--border-color--hover` | Trigger border color on hover | `var(--sc-kit--color--border--strong)` |
  * | `--sc-kit--date-picker--border-color--error` | Trigger border color in error state | `var(--sc-kit--color--danger)` |
  * | `--sc-kit--date-picker--border-radius` | Trigger border radius | per size — `sm` 4px, `md`/`lg` 6px |
  * | `--sc-kit--date-picker--underline-color` | Inset bottom-underline indicator (transparent default, accent when open, danger on error) | `transparent` |

package/dist/ui/date-picker/cmp.date-time-picker.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">import DatePicker from './cmp.date-picker.svelte';
+import TimePicker from './cmp.time-picker.svelte';
+const { value, size = 'md', datePlaceholder = '', min, step = 30, on } = $props();
+const DEFAULT_TIME = '12:00';
+const pad = (n) => n.toString().padStart(2, '0');
+const toTimeValue = (date) => `${pad(date.getHours())}:${pad(date.getMinutes())}`;
+const currentDate = $derived(value ? new Date(value) : null);
+const timeValue = $derived(currentDate ? toTimeValue(currentDate) : DEFAULT_TIME);
+const onDateChange = (next) => {
+    if (!next) {
+        on?.change?.(null);
+        return;
+    }
+    const picked = new Date(next);
+    const combined = new Date(currentDate ?? picked);
+    if (!currentDate) {
+        const [hours, minutes] = DEFAULT_TIME.split(':').map(Number);
+        combined.setHours(hours, minutes, 0, 0);
+    }
+    combined.setFullYear(picked.getFullYear(), picked.getMonth(), picked.getDate());
+    on?.change?.(combined.toISOString());
+};
+const onTimeChange = (next) => {
+    if (!currentDate) {
+        return;
+    }
+    const [hours, minutes] = next.split(':').map(Number);
+    const combined = new Date(currentDate);
+    combined.setHours(hours, minutes, 0, 0);
+    on?.change?.(combined.toISOString());
+};
+</script>
+
+<div class="date-time" class:date-time--date-only={!currentDate}>
+  <DatePicker clearable size={size} value={value} placeholder={datePlaceholder} min={min} on={{ change: onDateChange }} />
+  {#if currentDate}
+    <TimePicker clearable={false} size={size} step={step} value={timeValue} on={{ change: onTimeChange }} />
+  {/if}
+</div>
+
+<!--
+@component
+DateTimePicker — composes `DatePicker` + `TimePicker` into one ISO date-time field. The time row appears
+only once a date is picked (defaulting to `12:00`); `size` and `step` thread down to both controls.
+Emits an ISO 8601 string — or `null` when the date is cleared — via `on.change`.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--date-time-picker--time-width` | Width of the time column | `6rem` |
+| `--sc-kit--date-time-picker--gap` | Gap between the date and time fields | `var(--sc-kit--space--2)` |
+-->
+
+<style>.date-time {
+  --_dtp--time-width: var(--sc-kit--date-time-picker--time-width, 6rem);
+  --_dtp--gap: var(--sc-kit--date-time-picker--gap, var(--sc-kit--space--2));
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) var(--_dtp--time-width);
+  gap: var(--_dtp--gap);
+  width: 100%;
+  max-width: 100%;
+}
+.date-time--date-only {
+  grid-template-columns: minmax(0, 1fr);
+}</style>

package/dist/ui/date-picker/cmp.date-time-picker.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { LikeDate } from './types';
+type Props = {
+    value: string | null;
+    /** @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+    datePlaceholder?: string;
+    /** Earliest selectable date (inclusive). */
+    min?: LikeDate;
+    /** Minute interval for the time list. @default 30 */
+    step?: number;
+    on?: {
+        change?: (value: string | null) => void;
+    };
+};
+/**
+ * DateTimePicker — composes `DatePicker` + `TimePicker` into one ISO date-time field. The time row appears
+ * only once a date is picked (defaulting to `12:00`); `size` and `step` thread down to both controls.
+ * Emits an ISO 8601 string — or `null` when the date is cleared — via `on.change`.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--date-time-picker--time-width` | Width of the time column | `6rem` |
+ * | `--sc-kit--date-time-picker--gap` | Gap between the date and time fields | `var(--sc-kit--space--2)` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/date-picker/cmp.time-picker.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">import { Singleselect } from '../select';
+const { size = 'md', step = 30, placeholder = '', disabled = false, readonly = false, inert = false, error = false, borderless = false, id, name, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, ...mode } = $props();
+const MINUTES_PER_DAY = 24 * 60;
+const pad = (n) => n.toString().padStart(2, '0');
+const stepOptions = $derived.by(() => {
+    const count = Math.max(1, Math.floor(MINUTES_PER_DAY / step));
+    return Array.from({ length: count }, (_, i) => {
+        const total = i * step;
+        const label = `${pad(Math.floor(total / 60))}:${pad(total % 60)}`;
+        return { label, value: label };
+    });
+});
+const options = $derived.by(() => {
+    const current = mode.value;
+    if (current && !stepOptions.some((option) => option.value === current)) {
+        return [...stepOptions, { label: current, value: current }].sort((a, b) => a.value.localeCompare(b.value));
+    }
+    return stepOptions;
+});
+const emit = (next) => {
+    if (mode.clearable) {
+        mode.on?.change?.(next);
+    }
+    else if (next !== null) {
+        mode.on?.change?.(next);
+    }
+};
+</script>
+
+<div class="time-picker">
+  {#if mode.clearable}
+    <Singleselect
+      clearable
+      value={mode.value}
+      options={options}
+      size={size}
+      placeholder={placeholder}
+      disabled={disabled}
+      readonly={readonly}
+      inert={inert}
+      error={error}
+      borderless={borderless}
+      id={id}
+      name={name}
+      aria-label={ariaLabel}
+      aria-describedby={ariaDescribedby}
+      aria-required={ariaRequired}
+      on={{ change: emit }} />
+  {:else}
+    <Singleselect
+      clearable={false}
+      value={mode.value}
+      options={options}
+      size={size}
+      placeholder={placeholder}
+      disabled={disabled}
+      readonly={readonly}
+      inert={inert}
+      error={error}
+      borderless={borderless}
+      id={id}
+      name={name}
+      aria-label={ariaLabel}
+      aria-describedby={ariaDescribedby}
+      aria-required={ariaRequired}
+      on={{ change: emit }} />
+  {/if}
+</div>
+
+<!--
+@component
+TimePicker — an `'HH:mm'` (24-hour) time field built on `Singleselect` over a time grid generated from
+`step` (minutes). Discriminated by `clearable`: `true` allows clearing to `null` and shows an X button;
+`false` requires a value. An out-of-grid `value` is injected into the list so it always renders. Emits
+the picked `'HH:mm'` string via `on.change`.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--time-picker--width` | Field width | `100%` |
+-->
+
+<style>.time-picker {
+  --_tp--width: var(--sc-kit--time-picker--width, 100%);
+  display: flex;
+  width: var(--_tp--width);
+  max-width: 100%;
+}</style>

package/dist/ui/date-picker/cmp.time-picker.svelte.d.ts

@@ -0,0 +1,50 @@
+type BaseProps = {
+    /** @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+    /** Minute interval between generated options. @default 30 */
+    step?: number;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Focusable, value visible, but selection cannot change. */
+    readonly?: boolean;
+    /** Non-interactive, unstyled view-only mode. */
+    inert?: boolean;
+    error?: boolean;
+    borderless?: boolean;
+    id?: string;
+    name?: string;
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+    'aria-required'?: boolean;
+};
+type ClearableProps = BaseProps & {
+    /** Value can be cleared to `null`; shows a clear (X) button when set. */
+    clearable: true;
+    value: string | null | undefined;
+    on?: {
+        change?: (value: string | null) => void;
+    };
+};
+type RequiredProps = BaseProps & {
+    /** Value is required. No clear button. */
+    clearable: false;
+    value: string;
+    on?: {
+        change?: (value: string) => void;
+    };
+};
+type Props = ClearableProps | RequiredProps;
+/**
+ * TimePicker — an `'HH:mm'` (24-hour) time field built on `Singleselect` over a time grid generated from
+ * `step` (minutes). Discriminated by `clearable`: `true` allows clearing to `null` and shows an X button;
+ * `false` requires a value. An out-of-grid `value` is injected into the list so it always renders. Emits
+ * the picked `'HH:mm'` string via `on.change`.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--time-picker--width` | Field width | `100%` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/date-picker/index.d.ts

@@ -1,2 +1,4 @@
 export { default as DatePicker } from './cmp.date-picker.svelte';
+export { default as DateTimePicker } from './cmp.date-time-picker.svelte';
+export { default as TimePicker } from './cmp.time-picker.svelte';
 export type { LikeDate } from './types';

package/dist/ui/date-picker/index.js

@@ -1 +1,3 @@
 export { default as DatePicker } from './cmp.date-picker.svelte';
+export { default as DateTimePicker } from './cmp.date-time-picker.svelte';
+export { default as TimePicker } from './cmp.time-picker.svelte';

package/dist/ui/select/cmp.multiselect.svelte.d.ts

@@ -5,7 +5,7 @@ export type MultiselectInstance = {
 };
 import { type MultiselectBaseProps, type SelectOption } from './types';
 declare function $$render<T>(): {
-    props: Omit<MultiselectBaseProps<T>, "value" | "on" | "debounceMs" | "loadOptions" | "groupHeader" | "selectionMode" | "parentSource"> & {
+    props: Omit<MultiselectBaseProps<T>, "value" | "on" | "loadOptions" | "debounceMs" | "groupHeader" | "selectionMode" | "parentSource"> & {
         /** Flat option list. Fuse filters in-memory on every keystroke — no debounce. */
         options: SelectOption<T>[];
         /** Current selection — array of values. Order is preserved (and editable when `reorderable`). */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.21.1",
+  "version": "0.22.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",