@streamscloud/kit 0.21.0 → 0.21.2

package/dist/ui/button/cmp.button.svelte

@@ -116,6 +116,7 @@ Pass `type="anchor"` to render as `<a>` with `href`, or `type="presentational"`
 | `--sc-kit--button--width` | Explicit width | `fit-content` |
 | `--sc-kit--button--min-width` | Minimum width | `0` |
 | `--sc-kit--button--max-width` | Maximum width | `100%` |
+| `--sc-kit--button--justify-content` | Alignment of the button's content along the inline axis | `center` |
 -->
 
 <style>.btn {
@@ -134,12 +135,13 @@ Pass `type="anchor"` to render as `<a>` with `href`, or `type="presentational"`
   --_btn--width: var(--sc-kit--button--width, fit-content);
   --_btn--min-width: var(--sc-kit--button--min-width, 0);
   --_btn--max-width: var(--sc-kit--button--max-width, 100%);
+  --_btn--justify-content: var(--sc-kit--button--justify-content, center);
   --_btn--border-radius: var(--sc-kit--button--border-radius, var(--_btn--size-border-radius, var(--sc-kit--field--border-radius--md)));
   --_btn--font-weight: var(--sc-kit--button--font-weight, var(--sc-kit--font-weight--regular));
   box-sizing: border-box;
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: var(--_btn--justify-content);
   gap: var(--_btn--gap);
   width: var(--_btn--width);
   min-width: var(--_btn--min-width);

package/dist/ui/button/cmp.button.svelte.d.ts

@@ -73,6 +73,7 @@ type Props = ButtonModeProps | AnchorModeProps | PresentationalModeProps;
  * | `--sc-kit--button--width` | Explicit width | `fit-content` |
  * | `--sc-kit--button--min-width` | Minimum width | `0` |
  * | `--sc-kit--button--max-width` | Maximum width | `100%` |
+ * | `--sc-kit--button--justify-content` | Alignment of the button's content along the inline axis | `center` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

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.0",
+  "version": "0.21.2",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",