@thebuoyant-tsdev/mui-ts-library 3.28.1 → 3.29.0

package/README.de.md

@@ -16,13 +16,14 @@ Eine typsichere React-Komponentenbibliothek auf Basis von **TypeScript** und **M
 
 ## Komponenten
 
-12 produktionsreife Komponenten in drei Kategorien. Jede verlinkt zu einer interaktiven Live-Demo und einem vollständigen Manual mit allen Props, Typen und Mustern.
+13 produktionsreife Komponenten in drei Kategorien. Jede verlinkt zu einer interaktiven Live-Demo und einem vollständigen Manual mit allen Props, Typen und Mustern.
 
 ### Interaktive UI
 
 | Komponente | Wofür | Ausprobieren |
 |---|---|---|
 | [`GanttChart`](#ganttchart) | Drag-and-Drop-Projekt-Timelines mit Meilensteinen, Abhängigkeiten und CSV-Export | [Live-Demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-ganttchart--default) · [Docs](user-manuals/GanttChart.de.md) |
+| [`DateRangePicker`](#daterangepicker) | Start- und Enddatum in einem Inline-Picker — schließt die MUI X Pro-Lücke, kostenlos und ohne zusätzliche Abhängigkeiten | [Live-Demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-daterangepicker--default) · [Docs](user-manuals/DateRangePicker.de.md) |
 | [`TagSelection`](#tagselection) | Multi-Tag-Autocomplete mit freier Tag-Erstellung und Suchergebnis-Highlighting | [Live-Demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-tagselection--default) · [Docs](user-manuals/TagSelection.de.md) |
 | [`PasswordStrengthMeter`](#passwordstrengthmeter) | Echtzeit-Stärke-Feedback mit eingebautem sicheren Passwort-Generator | [Live-Demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-passwordstrengthmeter--default) · [Docs](user-manuals/PasswordStrengthMeter.de.md) |
 | [`ColorPicker`](#colorpicker) | Sättigung/Farbton/Alpha-Farbwähler-Panel mit Pipette-Werkzeug — MUI bringt keinen mit | [Live-Demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-colorpicker--default) · [Docs](user-manuals/ColorPicker.de.md) |
@@ -100,6 +101,33 @@ const tasks: GanttTask[] = [
 
 ---
 
+### DateRangePicker
+
+Start- und Enddatum in einem einzigen Inline-Picker — kein MUI X Pro-Lizenz erforderlich. Entwickelt für Formulare, Filter und Buchungsflows. Unterstützt Controlled/Uncontrolled-Modus, `minDate`/`maxDate`, `required`, Inline-Validierung und vollständige i18n. `onChange` gibt für jedes Datum sowohl ein `Date`-Objekt als auch einen ISO-String zurück.
+
+```tsx
+import { DateRangePicker } from '@thebuoyant-tsdev/mui-ts-library';
+import type { DateRange, DateRangeInput } from '@thebuoyant-tsdev/mui-ts-library';
+import { useState } from 'react';
+
+function App() {
+  const [range, setRange] = useState<DateRangeInput>({ start: null, end: null });
+
+  return (
+    <DateRangePicker
+      value={range}
+      onChange={(r) => setRange({ start: r.start?.date ?? null, end: r.end?.date ?? null })}
+      required
+      translation={{ fromLabel: 'Von', toLabel: 'Bis' }}
+    />
+  );
+}
+```
+
+→ [Vollständige Dokumentation](user-manuals/DateRangePicker.de.md)
+
+---
+
 ### TagSelection
 
 Multi-Select-Eingabe mit Autocomplete für Tag- und Label-Verwaltung. Ideal für Filter-UIs, Content-Tagging, Skill-Auswahl und alle Szenarien, in denen Nutzer aus einer vordefinierten Liste wählen oder neue Einträge erstellen sollen.
@@ -487,6 +515,10 @@ Dieses Projekt folgt [Semantic Versioning](https://semver.org/):
 
 ---
 
+### [3.29.0] — 2026-07-16
+
+---
+
 ### [3.28.1] — 2026-07-15
 
 **Behoben**

package/README.md

@@ -16,13 +16,14 @@ A type-safe React component library built on **TypeScript** and **MUI (Material
 
 ## Components
 
-12 production-ready components across three categories. Each links to a live, interactive demo and a full manual covering every prop, type, and pattern.
+13 production-ready components across three categories. Each links to a live, interactive demo and a full manual covering every prop, type, and pattern.
 
 ### Interactive UI
 
 | Component | What it's for | Try it |
 |---|---|---|
 | [`GanttChart`](#ganttchart) | Drag-and-drop project timelines with milestones, dependencies, and CSV export | [Live demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-ganttchart--default) · [Docs](user-manuals/GanttChart.md) |
+| [`DateRangePicker`](#daterangepicker) | Start + end date in one inline picker — fills the MUI X Pro gap, free and dependency-free | [Live demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-daterangepicker--default) · [Docs](user-manuals/DateRangePicker.md) |
 | [`TagSelection`](#tagselection) | Multi-tag autocomplete with free-form tag creation and search highlighting | [Live demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-tagselection--default) · [Docs](user-manuals/TagSelection.md) |
 | [`PasswordStrengthMeter`](#passwordstrengthmeter) | Real-time strength feedback with a built-in secure password generator | [Live demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-passwordstrengthmeter--default) · [Docs](user-manuals/PasswordStrengthMeter.md) |
 | [`ColorPicker`](#colorpicker) | Saturation/hue/alpha color picker panel with an eyedropper tool — MUI ships none | [Live demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-colorpicker--default) · [Docs](user-manuals/ColorPicker.md) |
@@ -100,6 +101,33 @@ const tasks: GanttTask[] = [
 
 ---
 
+### DateRangePicker
+
+Start and end date in a single inline picker — no MUI X Pro license required. Built for forms, filters, and booking flows. Supports controlled/uncontrolled mode, `minDate`/`maxDate`, `required`, inline validation, and full i18n. `onChange` returns both a `Date` object and an ISO string for each date.
+
+```tsx
+import { DateRangePicker } from '@thebuoyant-tsdev/mui-ts-library';
+import type { DateRange, DateRangeInput } from '@thebuoyant-tsdev/mui-ts-library';
+import { useState } from 'react';
+
+function App() {
+  const [range, setRange] = useState<DateRangeInput>({ start: null, end: null });
+
+  return (
+    <DateRangePicker
+      value={range}
+      onChange={(r) => setRange({ start: r.start?.date ?? null, end: r.end?.date ?? null })}
+      required
+      translation={{ fromLabel: 'From', toLabel: 'To' }}
+    />
+  );
+}
+```
+
+→ [Full documentation](user-manuals/DateRangePicker.md)
+
+---
+
 ### TagSelection
 
 Multi-select input with autocomplete for tag and label management. Best suited for filter UIs, content tagging, skill selection, and any scenario where users pick from a predefined list or create new items on the fly.
@@ -487,6 +515,10 @@ This project follows [Semantic Versioning](https://semver.org/):
 
 ---
 
+### [3.29.0] — 2026-07-16
+
+---
+
 ### [3.28.1] — 2026-07-15
 
 **Fixed**

package/dist/components/color-picker/ColorPicker.js

@@ -4,8 +4,8 @@ import { clamp as n, hexToRgba as r, hslaToHsva as i, hsvaToHsla as a, hsvaToRgb
 import { DEFAULT_COLOR_PICKER_TRANSLATION as u } from "./ColorPicker.types.js";
 import { useEffect as d, useRef as f, useState as p } from "react";
 import { Box as m, IconButton as ee, MenuItem as h, Select as te, TextField as g, Tooltip as ne, Typography as re, useTheme as ie } from "@mui/material";
-import ae from "@mui/icons-material/Colorize";
 import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import ae from "@mui/icons-material/Colorize";
 //#region src/components/color-picker/ColorPicker.tsx
 function y(e, t) {
 	let r = n(e, 0, 100);

package/dist/components/date-range-picker/DateRangePicker.d.ts

@@ -0,0 +1,2 @@
+import type { DateRangePickerProps } from "./DateRangePicker.types";
+export declare function DateRangePicker({ value, defaultValue, onChange, minDate, maxDate, disabled, required, error, helperText, inputSize, inputMinWidth, translation, }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/date-range-picker/DateRangePicker.js

@@ -0,0 +1,161 @@
+import { muiTsStateClasses as e } from "../../utils/muiTsClasses.js";
+import { dateRangePickerClasses as t } from "./dateRangePickerClasses.js";
+import { DEFAULT_DATE_RANGE_PICKER_TRANSLATION as n } from "./DateRangePicker.types.js";
+import { useState as r } from "react";
+import { Box as i, FormHelperText as a, TextField as o } from "@mui/material";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/date-range-picker/DateRangePicker.tsx
+function l(e) {
+	return `${e.getFullYear()}-${String(e.getMonth() + 1).padStart(2, "0")}-${String(e.getDate()).padStart(2, "0")}`;
+}
+function u(e) {
+	if (!e) return null;
+	let t = /* @__PURE__ */ new Date(`${e}T00:00:00`);
+	return isNaN(t.getTime()) ? null : t;
+}
+function d(e) {
+	return e ? {
+		date: e,
+		iso: l(e)
+	} : null;
+}
+function f(e, t, n, r) {
+	let i = "", a = "";
+	return e.start && e.end && e.end < e.start && (a = r.endBeforeStartError), n && !e.start && t.start && (i = r.startRequiredError), n && !e.end && t.end && !a && (a = r.endRequiredError), {
+		startError: i,
+		endError: a
+	};
+}
+var p = {
+	start: null,
+	end: null
+};
+function m({ value: m, defaultValue: h, onChange: g, minDate: _, maxDate: v, disabled: y = !1, required: b = !1, error: x = !1, helperText: S, inputSize: C = "small", inputMinWidth: w = 170, translation: T }) {
+	let E = {
+		...n,
+		...T
+	}, D = m !== void 0, [O, k] = r(h ?? p), [A, j] = r({
+		start: !1,
+		end: !1
+	}), M = D ? m : O, { startError: N, endError: P } = f(M, A, b, E);
+	function F(e, t) {
+		D || k({
+			start: e,
+			end: t
+		}), g?.({
+			start: d(e),
+			end: d(t)
+		});
+	}
+	function I(e) {
+		j((e) => ({
+			...e,
+			start: !0
+		})), F(u(e.target.value), M.end);
+	}
+	function L(e) {
+		j((e) => ({
+			...e,
+			end: !0
+		})), F(M.start, u(e.target.value));
+	}
+	function R() {
+		j((e) => ({
+			...e,
+			start: !0
+		}));
+	}
+	function z() {
+		j((e) => ({
+			...e,
+			end: !0
+		}));
+	}
+	let B = _ ? l(_) : void 0, V = v ? l(v) : void 0, H = M.start ? l(M.start) : B, U = x || !!N || !!P;
+	return /* @__PURE__ */ c(i, {
+		className: [
+			t.root,
+			y && e.disabled,
+			U && e.error
+		].filter(Boolean).join(" "),
+		sx: {
+			display: "inline-flex",
+			flexDirection: "column",
+			gap: .25
+		},
+		children: [/* @__PURE__ */ c(i, {
+			className: t.inputs,
+			sx: {
+				display: "inline-flex",
+				alignItems: "flex-start",
+				gap: 1
+			},
+			children: [
+				/* @__PURE__ */ s(o, {
+					className: t.startInput,
+					type: "date",
+					label: E.fromLabel,
+					value: M.start ? l(M.start) : "",
+					onChange: I,
+					onBlur: R,
+					disabled: y,
+					required: b,
+					error: !!N || x,
+					helperText: N || " ",
+					size: C,
+					sx: { width: w },
+					slotProps: {
+						inputLabel: { shrink: !0 },
+						htmlInput: {
+							min: B,
+							max: V,
+							"data-testid": "date-range-start"
+						}
+					}
+				}),
+				/* @__PURE__ */ s(i, {
+					component: "span",
+					className: t.separator,
+					"aria-hidden": !0,
+					sx: {
+						color: "text.disabled",
+						userSelect: "none",
+						flexShrink: 0,
+						lineHeight: 1,
+						mt: C === "small" ? "12px" : "20px"
+					},
+					children: "–"
+				}),
+				/* @__PURE__ */ s(o, {
+					className: t.endInput,
+					type: "date",
+					label: E.toLabel,
+					value: M.end ? l(M.end) : "",
+					onChange: L,
+					onBlur: z,
+					disabled: y,
+					required: b,
+					error: !!P || x,
+					helperText: P || " ",
+					size: C,
+					sx: { width: w },
+					slotProps: {
+						inputLabel: { shrink: !0 },
+						htmlInput: {
+							min: H,
+							max: V,
+							"data-testid": "date-range-end"
+						}
+					}
+				})
+			]
+		}), S && /* @__PURE__ */ s(a, {
+			className: t.helperText,
+			error: x,
+			sx: { mx: "14px" },
+			children: S
+		})]
+	});
+}
+//#endregion
+export { m as DateRangePicker };

package/dist/components/date-range-picker/DateRangePicker.types.d.ts

@@ -0,0 +1,48 @@
+/** One date within the range — returned by `onChange` with both representations. */
+export type DateRangeEntry = {
+    date: Date;
+    /** ISO date string in local time: "YYYY-MM-DD" */
+    iso: string;
+};
+/** Rich output type returned by `onChange`. */
+export type DateRange = {
+    start: DateRangeEntry | null;
+    end: DateRangeEntry | null;
+};
+/** Simple input type for the `value` and `defaultValue` props. */
+export type DateRangeInput = {
+    start: Date | null;
+    end: Date | null;
+};
+export type DateRangePickerTranslation = {
+    fromLabel: string;
+    toLabel: string;
+    endBeforeStartError: string;
+    startRequiredError: string;
+    endRequiredError: string;
+};
+export declare const DEFAULT_DATE_RANGE_PICKER_TRANSLATION: Required<DateRangePickerTranslation>;
+export type DateRangePickerProps = {
+    /** Controlled value — pass simple `Date` objects. Omit to use uncontrolled mode via `defaultValue`. */
+    value?: DateRangeInput;
+    /** Initial value for uncontrolled mode. */
+    defaultValue?: DateRangeInput;
+    /** Called on every change — receives both `Date` and ISO string per date. */
+    onChange?: (range: DateRange) => void;
+    /** Earliest selectable date (inclusive). */
+    minDate?: Date;
+    /** Latest selectable date (inclusive). */
+    maxDate?: Date;
+    disabled?: boolean;
+    /** Marks both inputs as required — shows error after the user has interacted with a field. */
+    required?: boolean;
+    /** External error state — turns the helper text red. */
+    error?: boolean;
+    /** General hint or error message displayed below the picker. */
+    helperText?: string;
+    inputSize?: "small" | "medium";
+    /** Minimum (and fixed) width of each date input in pixels. Prevents the field from stretching when a helperText or error message appears. Default: 170. */
+    inputMinWidth?: number;
+    /** Override any translation key — rest falls back to English defaults. */
+    translation?: Partial<DateRangePickerTranslation>;
+};

package/dist/components/date-range-picker/DateRangePicker.types.js

@@ -0,0 +1,10 @@
+//#region src/components/date-range-picker/DateRangePicker.types.ts
+var e = {
+	fromLabel: "From",
+	toLabel: "To",
+	endBeforeStartError: "End date must be after start date",
+	startRequiredError: "Start date is required",
+	endRequiredError: "End date is required"
+};
+//#endregion
+export { e as DEFAULT_DATE_RANGE_PICKER_TRANSLATION };

package/dist/components/date-range-picker/dateRangePickerClasses.d.ts

@@ -0,0 +1,26 @@
+/**
+ * CSS class names for every named slot in the DateRangePicker component.
+ *
+ * Use these to style individual parts of the component without relying on
+ * MUI's internal class names, which can change between versions.
+ *
+ * @example
+ * ```css
+ * .MuiTsDateRangePicker-root.MuiTs-disabled { opacity: 0.5; }
+ * .MuiTsDateRangePicker-root.MuiTs-error .MuiTsDateRangePicker-separator { color: red; }
+ * ```
+ */
+export declare const dateRangePickerClasses: {
+    /** The outermost wrapper element. Also receives `MuiTs-disabled` and `MuiTs-error` state classes. */
+    readonly root: "MuiTsDateRangePicker-root";
+    /** The flex row that holds the start input, separator, and end input. */
+    readonly inputs: "MuiTsDateRangePicker-inputs";
+    /** The start-date TextField. */
+    readonly startInput: "MuiTsDateRangePicker-startInput";
+    /** The "–" character between the two inputs. */
+    readonly separator: "MuiTsDateRangePicker-separator";
+    /** The end-date TextField. */
+    readonly endInput: "MuiTsDateRangePicker-endInput";
+    /** The FormHelperText shown below the picker row when `helperText` is set. */
+    readonly helperText: "MuiTsDateRangePicker-helperText";
+};

package/dist/components/date-range-picker/dateRangePickerClasses.js

@@ -0,0 +1,11 @@
+//#region src/components/date-range-picker/dateRangePickerClasses.ts
+var e = {
+	root: "MuiTsDateRangePicker-root",
+	inputs: "MuiTsDateRangePicker-inputs",
+	startInput: "MuiTsDateRangePicker-startInput",
+	separator: "MuiTsDateRangePicker-separator",
+	endInput: "MuiTsDateRangePicker-endInput",
+	helperText: "MuiTsDateRangePicker-helperText"
+};
+//#endregion
+export { e as dateRangePickerClasses };