@spaethtech/svelte-ui 0.21.1-dev.121.3e3f7cf → 0.21.1-dev.122.60c38bb

package/MIGRATION.md

@@ -87,3 +87,23 @@ grep -rl 'Disclosure\|Accordion' src | xargs sed -i \
   -e 's/\b\(Disclosure\|Accordion\)\b/\12/g'
 # Review: this also rewrites import specifiers and any prose; check each hit.
 ```
+
+### `DatePicker2` vs `DatePicker`
+
+`DatePicker2` reuses `Input` with a real `<input type="date">` / `datetime-local`. **Unlike the other
+`*2` components, the trigger content is NOT a pixel match** — the native control shows editable date
+segments + the browser's picker indicator, not `DatePicker`'s formatted label + MDI calendar. The
+field *frame* is identical (same `Input`), and the value format is identical, so the binding is
+drop-in for single/datetime.
+
+| `DatePicker` prop | `DatePicker2` behaviour |
+| --- | --- |
+| `value` (single `YYYY-MM-DD`, datetime `YYYY-MM-DDTHH:MM`), `time`, `min`, `max`, `size`, `variant`, `disabled`, `name`, `class` | ✅ Honoured. `name` sits on the `<input>` (submits natively — no hidden input). |
+| `range` | ❌ **No native equivalent.** Falls back to a single date input (dev warning). Use two `DatePicker2`s (start/end) or stay on `DatePicker`. |
+| `step`, `seconds`, `meridiem`, `weekStart` | ❌ Accepted but ignored — the OS picker owns time granularity + week layout. |
+| `locale` | ❌ Ignored — the native input formats per the user's browser/OS locale. |
+| `placeholder` | ❌ Ignored — native date inputs don't show placeholder text. |
+| formatted label (e.g. "Mar 5, 2026") | ⚠️ Shown as native editable segments (e.g. `03/05/2026`) instead. |
+
+**When NOT to swap:** range mode, a custom formatted trigger, or a specific locale/time-granularity
+UI — stay on `DatePicker`. Swap for plain single-date / datetime fields that must work without JS.

package/dist/components/DatePicker2.svelte

@@ -0,0 +1,103 @@
+<!--
+/**
+ * DatePicker2 — a native-first, no-JS/SSR-correct sibling of `DatePicker` (transitional `*2`, see
+ * MIGRATION.md). It reuses `Input` with a real `<input type="date">` (or `type="datetime-local">` in
+ * `time` mode), so date entry works with NO JavaScript, pops the browser's native date picker, and
+ * submits in a plain `<form>` via `name` — and the field FRAME (border/height/radius/focus) is
+ * pixel-identical to `DatePicker` because it is the same `Input`.
+ *
+ * HONEST caveat (unlike the other `*2` components): the native control renders its value as editable
+ * segments (e.g. `03/05/2025`) with the browser's own picker indicator, so the trigger *content* is
+ * NOT pixel-identical to `DatePicker`'s formatted label ("Mar 5, 2025") + MDI calendar. Only the
+ * frame matches. Value format for single/datetime is identical, so the binding is drop-in.
+ *
+ * Scope: single date + `time` (datetime). `range` has no native equivalent — if set, it falls back
+ * to a single date input (dev warning). `step`/`seconds`/`meridiem`/`weekStart`/`locale`/`placeholder`
+ * are accepted for drop-in compatibility but not honoured (the OS owns the native picker). See
+ * MIGRATION.md.
+ */
+-->
+<script lang="ts">
+  import type { HTMLInputAttributes } from "svelte/elements";
+  import type { Size } from "../types/sizes.js";
+  import type { Responsive } from "../types/responsive.js";
+  import type { Variant } from "../types/variants.js";
+  import type { StepSpec } from "../types/time.js";
+  import Input from "./Input.svelte";
+  import { DEV } from "esm-env";
+
+  type RangeValue = { start: string | null; end: string | null };
+
+  let {
+    value = $bindable(),
+    range = false,
+    time = false,
+    min,
+    max,
+    disabled = false,
+    size = "md",
+    variant = "primary",
+    name,
+    class: cls = "",
+    // ── Accepted for DatePicker compatibility, but the native picker owns these (ignored). ──
+    step: _step,
+    seconds: _seconds,
+    meridiem: _meridiem,
+    weekStart: _weekStart,
+    locale: _locale,
+    placeholder: _placeholder,
+    ...rest
+  }: {
+    /** `YYYY-MM-DD` (single) or `YYYY-MM-DDTHH:MM` (`time`). Drop-in with DatePicker's single/datetime. */
+    value?: string | RangeValue | null;
+    range?: boolean;
+    time?: boolean;
+    min?: string;
+    max?: string;
+    disabled?: boolean;
+    size?: Responsive<Size>;
+    variant?: Variant;
+    /** Native form field name — the `<input>` carries it; submits with no JS. */
+    name?: string;
+    class?: string;
+    // accepted-but-ignored
+    step?: StepSpec;
+    seconds?: boolean;
+    meridiem?: boolean;
+    weekStart?: 0 | 1;
+    locale?: string;
+    placeholder?: string;
+  } & Omit<
+    HTMLInputAttributes,
+    "type" | "value" | "size" | "min" | "max" | "name" | "class" | "disabled"
+  > = $props();
+
+  $effect(() => {
+    if (DEV && range) {
+      console.warn(
+        "DatePicker2: `range` has no native equivalent — falling back to a single date input. " +
+          "Use two DatePicker2s (start/end) or stay on DatePicker for range. See MIGRATION.md.",
+      );
+    }
+  });
+
+  // The native control only takes a string. Coerce away a RangeValue (range isn't supported here).
+  const strValue = $derived(typeof value === "string" ? value : "");
+  function onInput(v: string) {
+    value = v;
+  }
+</script>
+
+<Input
+  type={time ? "datetime-local" : "date"}
+  value={strValue}
+  oninput={(e) => onInput((e.currentTarget as HTMLInputElement).value)}
+  {min}
+  {max}
+  {name}
+  {disabled}
+  {size}
+  {variant}
+  class={cls}
+  {...rest}
+/>

package/dist/components/DatePicker2.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+import type { Size } from "../types/sizes.js";
+import type { Responsive } from "../types/responsive.js";
+import type { Variant } from "../types/variants.js";
+import type { StepSpec } from "../types/time.js";
+type RangeValue = {
+    start: string | null;
+    end: string | null;
+};
+type $$ComponentProps = {
+    /** `YYYY-MM-DD` (single) or `YYYY-MM-DDTHH:MM` (`time`). Drop-in with DatePicker's single/datetime. */
+    value?: string | RangeValue | null;
+    range?: boolean;
+    time?: boolean;
+    min?: string;
+    max?: string;
+    disabled?: boolean;
+    size?: Responsive<Size>;
+    variant?: Variant;
+    /** Native form field name — the `<input>` carries it; submits with no JS. */
+    name?: string;
+    class?: string;
+    step?: StepSpec;
+    seconds?: boolean;
+    meridiem?: boolean;
+    weekStart?: 0 | 1;
+    locale?: string;
+    placeholder?: string;
+} & Omit<HTMLInputAttributes, "type" | "value" | "size" | "min" | "max" | "name" | "class" | "disabled">;
+declare const DatePicker2: import("svelte").Component<$$ComponentProps, {}, "value">;
+type DatePicker2 = ReturnType<typeof DatePicker2>;
+export default DatePicker2;

package/dist/index.d.ts

@@ -72,6 +72,7 @@ export { default as Disclosure } from "./components/Disclosure.svelte";
 export { default as Accordion } from "./components/Accordion.svelte";
 export { default as Disclosure2 } from "./components/Disclosure2.svelte";
 export { default as Accordion2 } from "./components/Accordion2.svelte";
+export { default as DatePicker2 } from "./components/DatePicker2.svelte";
 export { default as SideBarMenu } from "./components/SideBarMenu/SideBarMenu.svelte";
 export type { SideBarMenuItem, SideBarMenuBadge, SideBarMenuBadgeVariant, SideBarMenuApi, SideBarMenuMode, SideBarMenuActiveRule, } from "./components/SideBarMenu/SideBarMenu.svelte";
 export { Breadcrumbs } from "./components/Breadcrumbs/index.js";

package/dist/index.js

@@ -71,6 +71,7 @@ export { default as Accordion } from "./components/Accordion.svelte";
 // Native-first, no-JS/SSR-correct variants (transitional `*2` — see MIGRATION.md).
 export { default as Disclosure2 } from "./components/Disclosure2.svelte";
 export { default as Accordion2 } from "./components/Accordion2.svelte";
+export { default as DatePicker2 } from "./components/DatePicker2.svelte";
 // Navigation Components
 export { default as SideBarMenu } from "./components/SideBarMenu/SideBarMenu.svelte";
 export { Breadcrumbs } from "./components/Breadcrumbs/index.js";

package/docs/components.md

@@ -415,6 +415,23 @@ snaps to canonical on blur.
   inject `parse`/`format`/`validate` backed by a phone library (e.g. `libphonenumber-js`); the
   component bundles none.
 
+### DatePicker2 (native-first)
+
+**No-JS / SSR-correct** date entry: reuses `Input` with a real `<input type="date">` (or
+`datetime-local` in `time` mode), so it works without JavaScript, pops the browser's native picker,
+and submits via `name`. The field **frame** is pixel-identical to `DatePicker` (same `Input`).
+
+- **Location**: `src/lib/components/DatePicker2.svelte`
+- **Props**: drop-in superset of `DatePicker`'s single/datetime use — `value` (`YYYY-MM-DD` or
+  `YYYY-MM-DDTHH:MM`, identical format), `time`, `min`, `max`, `size`, `variant`, `disabled`, `name`,
+  `class`.
+- **Caveat (unlike the other `*2`)**: the native control renders its value as **editable segments**
+  with the browser's picker indicator, so the trigger *content* is not a pixel match for
+  `DatePicker`'s formatted label — only the frame is. `range` has **no native equivalent** (falls
+  back to a single input with a dev warning); `step`/`seconds`/`meridiem`/`weekStart`/`locale`/
+  `placeholder` are accepted but ignored (the OS owns the picker). See `MIGRATION.md`.
+- **Transitional**: ships alongside `DatePicker` under the `2` suffix.
+
 ## Navigation
 
 ### Breadcrumbs

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaethtech/svelte-ui",
-  "version": "0.21.1-dev.121.3e3f7cf",
+  "version": "0.21.1-dev.122.60c38bb",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"
@@ -205,6 +205,10 @@
       "types": "./dist/components/DatePicker.svelte.d.ts",
       "svelte": "./dist/components/DatePicker.svelte"
     },
+    "./date-picker2": {
+      "types": "./dist/components/DatePicker2.svelte.d.ts",
+      "svelte": "./dist/components/DatePicker2.svelte"
+    },
     "./time-spinner": {
       "types": "./dist/components/TimeSpinner.svelte.d.ts",
       "svelte": "./dist/components/TimeSpinner.svelte"