@drivenets/design-system 0.0.4 → 0.1.0

package/dist/components/ds-date-input/ds-date-input.js

@@ -0,0 +1,351 @@
+import ds_icon_default from "../ds-icon/ds-icon.js";
+import "../ds-icon/index.js";
+import ds_typography_default from "../ds-typography/ds-typography.js";
+import "../ds-typography/index.js";
+import { dateValuesToStrings, formatDateInputValue, isoStringToDateValue, parseInputText, stringToDateValue, validateDateString } from "./ds-date-input.utils.js";
+import ds_date_input_module_default from "./ds-date-input.module.js";
+import { c } from "react/compiler-runtime";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, useRef, useState } from "react";
+import { Portal } from "@ark-ui/react/portal";
+import { DatePicker } from "@ark-ui/react/date-picker";
+
+//#region src/components/ds-date-input/ds-date-input.tsx
+/**
+* Design system date input component with integrated calendar picker.
+*
+* Supports both single date and date range selection with a single text input field.
+* Features built-in validation, manual text entry, and calendar selection.
+*/
+const DsDateInput = ({ range = false, placeholder, style, className, disablePortal = false, onValueChange, onOpenChange, value: _value, defaultValue: _defaultValue, min: _min, max: _max, disabled, readOnly, id, ...datePickerProps }) => {
+	const min = _min ? isoStringToDateValue(_min) : void 0;
+	const max = _max ? isoStringToDateValue(_max) : void 0;
+	const value = _value ? stringToDateValue(_value) : [];
+	const defaultValue = _defaultValue ? stringToDateValue(_defaultValue) : [];
+	const [isFocused, setIsFocused] = useState(false);
+	const [isOpen, setIsOpen] = useState(false);
+	const prevValue = useRef(null);
+	const inputRef = useRef(null);
+	if (!isFocused && prevValue.current !== JSON.stringify(value)) {
+		prevValue.current = JSON.stringify(value);
+		if (inputRef.current) inputRef.current.value = formatDateInputValue(value, range);
+	}
+	const clear = () => {
+		if (inputRef.current) inputRef.current.value = "";
+		onValueChange?.(void 0);
+	};
+	const handleInputChange = (e) => {
+		const text = e.target.value;
+		if (validateDateString({
+			text,
+			range,
+			min,
+			max
+		}).isValid) {
+			const parsedValue = parseInputText(text, range);
+			onValueChange?.(dateValuesToStrings(parsedValue, range));
+		}
+	};
+	const handleBlur = () => {
+		setIsFocused(false);
+		const text_0 = inputRef.current?.value || "";
+		if (!validateDateString({
+			text: text_0,
+			range,
+			min,
+			max
+		}).isValid) {
+			clear();
+			return;
+		}
+		const parsedValue_0 = parseInputText(text_0, range);
+		onValueChange?.(dateValuesToStrings(parsedValue_0, range));
+	};
+	const showClearButton = !disabled && !readOnly && !!(value.length > 0 ? value : defaultValue).length;
+	const Wrapper = disablePortal ? Fragment : Portal;
+	return /* @__PURE__ */ jsxs(DatePicker.Root, {
+		value,
+		defaultValue,
+		onValueChange: (details) => {
+			onValueChange?.(dateValuesToStrings(details.value, range));
+		},
+		selectionMode: range ? "range" : "single",
+		positioning: {
+			placement: "bottom-start",
+			gutter: 4
+		},
+		closeOnSelect: !range,
+		min,
+		max,
+		disabled,
+		readOnly,
+		open: isOpen,
+		onOpenChange: (details_0) => {
+			if (!isFocused) {
+				setIsOpen(details_0.open);
+				onOpenChange?.(details_0.open);
+			}
+		},
+		...datePickerProps,
+		children: [/* @__PURE__ */ jsxs(DatePicker.Control, {
+			style,
+			className: classNames(ds_date_input_module_default.dateInputControl, disabled && ds_date_input_module_default.disabled, readOnly && ds_date_input_module_default.readOnly, className),
+			children: [
+				/* @__PURE__ */ jsx(DatePicker.Trigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: ds_date_input_module_default.dateInputButton,
+						disabled,
+						"aria-label": "Open calendar",
+						children: /* @__PURE__ */ jsx(ds_icon_default, {
+							icon: "calendar_month",
+							size: "small"
+						})
+					})
+				}),
+				/* @__PURE__ */ jsx("input", {
+					ref: inputRef,
+					id,
+					type: "text",
+					className: ds_date_input_module_default.input,
+					placeholder: placeholder ?? (range ? "MM/DD/YYYY - MM/DD/YYYY" : "MM/DD/YYYY"),
+					defaultValue: formatDateInputValue(value.length > 0 ? value : defaultValue, range),
+					onChange: handleInputChange,
+					onBlur: handleBlur,
+					onFocus: () => setIsFocused(true),
+					disabled,
+					readOnly
+				}),
+				showClearButton && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: ds_date_input_module_default.dateInputButton,
+					onClick: clear,
+					"aria-label": range ? "Clear date range" : "Clear date",
+					children: /* @__PURE__ */ jsx(ds_icon_default, {
+						icon: "close",
+						size: "small"
+					})
+				})
+			]
+		}), /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsx(DatePicker.Positioner, {
+			className: ds_date_input_module_default.positioner,
+			children: /* @__PURE__ */ jsxs(DatePicker.Content, {
+				className: ds_date_input_module_default.content,
+				children: [/* @__PURE__ */ jsx(CalendarViewControl, {}), /* @__PURE__ */ jsxs("div", {
+					className: ds_date_input_module_default.calendarView,
+					children: [
+						/* @__PURE__ */ jsx(DayView, {}),
+						/* @__PURE__ */ jsx(MonthView, {}),
+						/* @__PURE__ */ jsx(YearView, {})
+					]
+				})]
+			})
+		}) })]
+	});
+};
+/**
+* Calendar view control with navigation buttons
+*/
+const CalendarViewControl = () => {
+	const $ = c(3);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(DatePicker.PrevTrigger, {
+			className: ds_date_input_module_default.prevTrigger,
+			children: /* @__PURE__ */ jsx(ds_icon_default, {
+				icon: "chevron_left",
+				size: "small"
+			})
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(DatePicker.ViewTrigger, {
+			className: ds_date_input_module_default.viewTrigger,
+			asChild: true,
+			children: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				children: /* @__PURE__ */ jsx(ds_typography_default, {
+					variant: "body-md-md",
+					asChild: true,
+					children: /* @__PURE__ */ jsx(DatePicker.RangeText, {})
+				})
+			})
+		});
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsxs(DatePicker.ViewControl, {
+			className: ds_date_input_module_default.viewControl,
+			children: [
+				t0,
+				t1,
+				/* @__PURE__ */ jsx(DatePicker.NextTrigger, {
+					className: ds_date_input_module_default.nextTrigger,
+					children: /* @__PURE__ */ jsx(ds_icon_default, {
+						icon: "chevron_right",
+						size: "small"
+					})
+				})
+			]
+		});
+		$[2] = t2;
+	} else t2 = $[2];
+	return t2;
+};
+/**
+* Day view - displays calendar grid with days of the month
+*/
+const DayView = () => {
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(DatePicker.View, {
+			view: "day",
+			children: /* @__PURE__ */ jsx(DatePicker.Context, { children: _temp4 })
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+};
+/**
+* Month view - displays grid with months of the year
+*/
+const MonthView = () => {
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(DatePicker.View, {
+			view: "month",
+			children: /* @__PURE__ */ jsx(DatePicker.Context, { children: _temp7 })
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+};
+/**
+* Year view - displays grid with years in a decade
+*/
+const YearView = () => {
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(DatePicker.View, {
+			view: "year",
+			children: /* @__PURE__ */ jsx(DatePicker.Context, { children: _temp0 })
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+};
+var ds_date_input_default = DsDateInput;
+function _temp(weekDay, id) {
+	return /* @__PURE__ */ jsx(DatePicker.TableHeader, {
+		className: ds_date_input_module_default.tableHeader,
+		children: /* @__PURE__ */ jsx(ds_typography_default, {
+			variant: "body-md-md",
+			children: weekDay.short
+		})
+	}, id);
+}
+function _temp2(day, dayId) {
+	return /* @__PURE__ */ jsx(DatePicker.TableCell, {
+		value: day,
+		children: /* @__PURE__ */ jsx(DatePicker.TableCellTrigger, {
+			className: ds_date_input_module_default.tableCellTrigger,
+			children: /* @__PURE__ */ jsx(ds_typography_default, {
+				className: ds_date_input_module_default.tableCellTriggerValue,
+				variant: "body-md-md",
+				children: day.day
+			})
+		})
+	}, dayId);
+}
+function _temp3(week, weekId) {
+	return /* @__PURE__ */ jsx(DatePicker.TableRow, {
+		className: ds_date_input_module_default.tableRow,
+		children: week.map(_temp2)
+	}, weekId);
+}
+function _temp4(datePicker) {
+	return /* @__PURE__ */ jsxs(DatePicker.Table, {
+		className: ds_date_input_module_default.table,
+		children: [/* @__PURE__ */ jsx(DatePicker.TableHead, {
+			className: ds_date_input_module_default.tableHead,
+			children: /* @__PURE__ */ jsx(DatePicker.TableRow, {
+				className: ds_date_input_module_default.tableRow,
+				children: datePicker.weekDays.map(_temp)
+			})
+		}), /* @__PURE__ */ jsx(DatePicker.TableBody, {
+			className: ds_date_input_module_default.tableBody,
+			children: datePicker.weeks.map(_temp3)
+		})]
+	});
+}
+function _temp5(month, monthId) {
+	return /* @__PURE__ */ jsx(DatePicker.TableCell, {
+		value: month.value,
+		children: /* @__PURE__ */ jsx(DatePicker.TableCellTrigger, {
+			className: ds_date_input_module_default.tableCellTrigger,
+			children: /* @__PURE__ */ jsx(ds_typography_default, {
+				className: ds_date_input_module_default.tableCellTriggerValue,
+				variant: "body-md-md",
+				children: month.label
+			})
+		})
+	}, monthId);
+}
+function _temp6(months, rowId) {
+	return /* @__PURE__ */ jsx(DatePicker.TableRow, {
+		className: ds_date_input_module_default.tableRow,
+		children: months.map(_temp5)
+	}, rowId);
+}
+function _temp7(datePicker) {
+	return /* @__PURE__ */ jsx(DatePicker.Table, {
+		className: ds_date_input_module_default.table,
+		children: /* @__PURE__ */ jsx(DatePicker.TableBody, {
+			className: ds_date_input_module_default.tableBody,
+			children: datePicker.getMonthsGrid({
+				columns: 4,
+				format: "short"
+			}).map(_temp6)
+		})
+	});
+}
+function _temp8(year, yearId) {
+	return /* @__PURE__ */ jsx(DatePicker.TableCell, {
+		value: year.value,
+		children: /* @__PURE__ */ jsx(DatePicker.TableCellTrigger, {
+			className: ds_date_input_module_default.tableCellTrigger,
+			children: /* @__PURE__ */ jsx(ds_typography_default, {
+				className: ds_date_input_module_default.tableCellTriggerValue,
+				variant: "body-md-md",
+				children: year.label
+			})
+		})
+	}, yearId);
+}
+function _temp9(years, rowId) {
+	return /* @__PURE__ */ jsx(DatePicker.TableRow, {
+		className: ds_date_input_module_default.tableRow,
+		children: years.map(_temp8)
+	}, rowId);
+}
+function _temp0(datePicker) {
+	return /* @__PURE__ */ jsx(DatePicker.Table, {
+		className: ds_date_input_module_default.table,
+		children: /* @__PURE__ */ jsx(DatePicker.TableBody, {
+			className: ds_date_input_module_default.tableBody,
+			children: datePicker.getYearsGrid({ columns: 4 }).map(_temp9)
+		})
+	});
+}
+
+//#endregion
+export { ds_date_input_default as default };
+//# sourceMappingURL=ds-date-input.js.map

package/dist/components/ds-date-input/ds-date-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-date-input.js","names":["ChangeEvent","Fragment","useRef","useState","DatePicker","Portal","classNames","DsDateInputProps","dateValuesToStrings","formatDateInputValue","isoStringToDateValue","parseInputText","stringToDateValue","validateDateString","DsIcon","DsTypography","styles","DsDateInput","range","placeholder","style","className","disablePortal","onValueChange","onOpenChange","value","_value","defaultValue","_defaultValue","min","_min","max","_max","disabled","readOnly","id","datePickerProps","undefined","isFocused","setIsFocused","isOpen","setIsOpen","prevValue","inputRef","HTMLInputElement","current","JSON","stringify","clear","handleInputChange","e","text","target","validation","isValid","parsedValue","handleBlur","showClearButton","length","Wrapper","details","placement","gutter","open","dateInputControl","dateInputButton","input","positioner","content","calendarView","CalendarViewControl","$","_c","t0","Symbol","for","prevTrigger","t1","viewTrigger","t2","viewControl","nextTrigger","DayView","_temp4","MonthView","_temp7","YearView","_temp0","_temp","weekDay","tableHeader","short","_temp2","day","dayId","tableCellTrigger","tableCellTriggerValue","_temp3","week","weekId","tableRow","map","datePicker","table","tableHead","weekDays","tableBody","weeks","_temp5","month","monthId","label","_temp6","months","rowId","getMonthsGrid","columns","format","_temp8","year","yearId","_temp9","years","getYearsGrid"],"sources":["../../../src/components/ds-date-input/ds-date-input.tsx"],"sourcesContent":["import { type ChangeEvent, Fragment, useRef, useState } from 'react';\nimport { DatePicker } from '@ark-ui/react/date-picker';\nimport { Portal } from '@ark-ui/react/portal';\nimport classNames from 'classnames';\nimport type { DsDateInputProps } from './ds-date-input.types';\nimport {\n\tdateValuesToStrings,\n\tformatDateInputValue,\n\tisoStringToDateValue,\n\tparseInputText,\n\tstringToDateValue,\n\tvalidateDateString,\n} from './ds-date-input.utils';\nimport { DsIcon } from '../ds-icon';\nimport { DsTypography } from '../ds-typography';\nimport styles from './ds-date-input.module.scss';\n\n/**\n * Design system date input component with integrated calendar picker.\n *\n * Supports both single date and date range selection with a single text input field.\n * Features built-in validation, manual text entry, and calendar selection.\n */\nconst DsDateInput = ({\n\trange = false,\n\tplaceholder,\n\tstyle,\n\tclassName,\n\tdisablePortal = false,\n\tonValueChange,\n\tonOpenChange,\n\tvalue: _value,\n\tdefaultValue: _defaultValue,\n\tmin: _min,\n\tmax: _max,\n\tdisabled,\n\treadOnly,\n\tid,\n\t...datePickerProps\n}: DsDateInputProps) => {\n\tconst min = _min ? isoStringToDateValue(_min) : undefined;\n\tconst max = _max ? isoStringToDateValue(_max) : undefined;\n\n\t// Convert public API (string | [string, string]) to internal API (DateValue[])\n\tconst value = _value ? stringToDateValue(_value) : [];\n\tconst defaultValue = _defaultValue ? stringToDateValue(_defaultValue) : [];\n\n\t// Local state for manual text editing\n\tconst [isFocused, setIsFocused] = useState(false);\n\tconst [isOpen, setIsOpen] = useState(false);\n\n\tconst prevValue = useRef<string | null>(null);\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\n\t// Reformat the input value on every value change\n\t// We don't format when the input is focused since the date value might get updated while the user is typing\n\t// but we don't want to reformat the input text for him while he's typing.\n\tif (!isFocused && prevValue.current !== JSON.stringify(value)) {\n\t\tprevValue.current = JSON.stringify(value);\n\n\t\tif (inputRef.current) {\n\t\t\tinputRef.current.value = formatDateInputValue(value, range);\n\t\t}\n\t}\n\n\tconst clear = () => {\n\t\tif (inputRef.current) {\n\t\t\tinputRef.current.value = '';\n\t\t}\n\n\t\tonValueChange?.(undefined);\n\t};\n\n\tconst handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n\t\tconst text = e.target.value;\n\n\t\t// Try to parse and validate as the user types\n\t\tconst validation = validateDateString({ text, range, min, max });\n\n\t\tif (validation.isValid) {\n\t\t\tconst parsedValue = parseInputText(text, range);\n\t\t\tonValueChange?.(dateValuesToStrings(parsedValue, range) as never);\n\t\t}\n\t};\n\n\tconst handleBlur = () => {\n\t\tsetIsFocused(false);\n\n\t\tconst text = inputRef.current?.value || '';\n\t\tconst validation = validateDateString({ text, range, min, max });\n\n\t\t// Clear invalid input on blur\n\t\tif (!validation.isValid) {\n\t\t\tclear();\n\t\t\treturn;\n\t\t}\n\n\t\tconst parsedValue = parseInputText(text, range);\n\n\t\tonValueChange?.(dateValuesToStrings(parsedValue, range) as never);\n\t};\n\n\tconst showClearButton = !disabled && !readOnly && !!(value.length > 0 ? value : defaultValue).length;\n\tconst Wrapper = disablePortal ? Fragment : Portal;\n\n\treturn (\n\t\t<DatePicker.Root\n\t\t\tvalue={value}\n\t\t\tdefaultValue={defaultValue}\n\t\t\tonValueChange={(details) => {\n\t\t\t\tonValueChange?.(dateValuesToStrings(details.value, range) as never);\n\t\t\t}}\n\t\t\tselectionMode={range ? 'range' : 'single'}\n\t\t\tpositioning={{ placement: 'bottom-start', gutter: 4 }}\n\t\t\tcloseOnSelect={!range}\n\t\t\tmin={min}\n\t\t\tmax={max}\n\t\t\tdisabled={disabled}\n\t\t\treadOnly={readOnly}\n\t\t\topen={isOpen}\n\t\t\tonOpenChange={(details) => {\n\t\t\t\t// Don't close the calendar when the user is typing\n\t\t\t\tif (!isFocused) {\n\t\t\t\t\tsetIsOpen(details.open);\n\t\t\t\t\tonOpenChange?.(details.open);\n\t\t\t\t}\n\t\t\t}}\n\t\t\t{...datePickerProps}\n\t\t>\n\t\t\t<DatePicker.Control\n\t\t\t\tstyle={style}\n\t\t\t\tclassName={classNames(\n\t\t\t\t\tstyles.dateInputControl,\n\t\t\t\t\tdisabled && styles.disabled,\n\t\t\t\t\treadOnly && styles.readOnly,\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<DatePicker.Trigger asChild>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclassName={styles.dateInputButton}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\taria-label=\"Open calendar\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<DsIcon icon=\"calendar_month\" size=\"small\" />\n\t\t\t\t\t</button>\n\t\t\t\t</DatePicker.Trigger>\n\n\t\t\t\t<input\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\tid={id}\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tclassName={styles.input}\n\t\t\t\t\tplaceholder={placeholder ?? (range ? 'MM/DD/YYYY - MM/DD/YYYY' : 'MM/DD/YYYY')}\n\t\t\t\t\tdefaultValue={formatDateInputValue(value.length > 0 ? value : defaultValue, range)}\n\t\t\t\t\tonChange={handleInputChange}\n\t\t\t\t\tonBlur={handleBlur}\n\t\t\t\t\tonFocus={() => setIsFocused(true)}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\treadOnly={readOnly}\n\t\t\t\t/>\n\n\t\t\t\t{showClearButton && (\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclassName={styles.dateInputButton}\n\t\t\t\t\t\tonClick={clear}\n\t\t\t\t\t\taria-label={range ? 'Clear date range' : 'Clear date'}\n\t\t\t\t\t>\n\t\t\t\t\t\t<DsIcon icon=\"close\" size=\"small\" />\n\t\t\t\t\t</button>\n\t\t\t\t)}\n\t\t\t</DatePicker.Control>\n\n\t\t\t<Wrapper>\n\t\t\t\t<DatePicker.Positioner className={styles.positioner}>\n\t\t\t\t\t<DatePicker.Content className={styles.content}>\n\t\t\t\t\t\t<CalendarViewControl />\n\t\t\t\t\t\t<div className={styles.calendarView}>\n\t\t\t\t\t\t\t<DayView />\n\t\t\t\t\t\t\t<MonthView />\n\t\t\t\t\t\t\t<YearView />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</DatePicker.Content>\n\t\t\t\t</DatePicker.Positioner>\n\t\t\t</Wrapper>\n\t\t</DatePicker.Root>\n\t);\n};\n\n/**\n * Calendar view control with navigation buttons\n */\nconst CalendarViewControl = () => (\n\t<DatePicker.ViewControl className={styles.viewControl}>\n\t\t<DatePicker.PrevTrigger className={styles.prevTrigger}>\n\t\t\t<DsIcon icon=\"chevron_left\" size=\"small\" />\n\t\t</DatePicker.PrevTrigger>\n\t\t<DatePicker.ViewTrigger className={styles.viewTrigger} asChild>\n\t\t\t<button type=\"button\">\n\t\t\t\t<DsTypography variant=\"body-md-md\" asChild>\n\t\t\t\t\t<DatePicker.RangeText />\n\t\t\t\t</DsTypography>\n\t\t\t</button>\n\t\t</DatePicker.ViewTrigger>\n\t\t<DatePicker.NextTrigger className={styles.nextTrigger}>\n\t\t\t<DsIcon icon=\"chevron_right\" size=\"small\" />\n\t\t</DatePicker.NextTrigger>\n\t</DatePicker.ViewControl>\n);\n\n/**\n * Day view - displays calendar grid with days of the month\n */\nconst DayView = () => (\n\t<DatePicker.View view=\"day\">\n\t\t<DatePicker.Context>\n\t\t\t{(datePicker) => (\n\t\t\t\t<DatePicker.Table className={styles.table}>\n\t\t\t\t\t<DatePicker.TableHead className={styles.tableHead}>\n\t\t\t\t\t\t<DatePicker.TableRow className={styles.tableRow}>\n\t\t\t\t\t\t\t{datePicker.weekDays.map((weekDay, id) => (\n\t\t\t\t\t\t\t\t<DatePicker.TableHeader key={id} className={styles.tableHeader}>\n\t\t\t\t\t\t\t\t\t<DsTypography variant=\"body-md-md\">{weekDay.short}</DsTypography>\n\t\t\t\t\t\t\t\t</DatePicker.TableHeader>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</DatePicker.TableRow>\n\t\t\t\t\t</DatePicker.TableHead>\n\t\t\t\t\t<DatePicker.TableBody className={styles.tableBody}>\n\t\t\t\t\t\t{datePicker.weeks.map((week, weekId) => (\n\t\t\t\t\t\t\t<DatePicker.TableRow key={weekId} className={styles.tableRow}>\n\t\t\t\t\t\t\t\t{week.map((day, dayId) => (\n\t\t\t\t\t\t\t\t\t<DatePicker.TableCell key={dayId} value={day}>\n\t\t\t\t\t\t\t\t\t\t<DatePicker.TableCellTrigger className={styles.tableCellTrigger}>\n\t\t\t\t\t\t\t\t\t\t\t<DsTypography className={styles.tableCellTriggerValue} variant=\"body-md-md\">\n\t\t\t\t\t\t\t\t\t\t\t\t{day.day}\n\t\t\t\t\t\t\t\t\t\t\t</DsTypography>\n\t\t\t\t\t\t\t\t\t\t</DatePicker.TableCellTrigger>\n\t\t\t\t\t\t\t\t\t</DatePicker.TableCell>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</DatePicker.TableRow>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</DatePicker.TableBody>\n\t\t\t\t</DatePicker.Table>\n\t\t\t)}\n\t\t</DatePicker.Context>\n\t</DatePicker.View>\n);\n\n/**\n * Month view - displays grid with months of the year\n */\nconst MonthView = () => (\n\t<DatePicker.View view=\"month\">\n\t\t<DatePicker.Context>\n\t\t\t{(datePicker) => (\n\t\t\t\t<DatePicker.Table className={styles.table}>\n\t\t\t\t\t<DatePicker.TableBody className={styles.tableBody}>\n\t\t\t\t\t\t{datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, rowId) => (\n\t\t\t\t\t\t\t<DatePicker.TableRow key={rowId} className={styles.tableRow}>\n\t\t\t\t\t\t\t\t{months.map((month, monthId) => (\n\t\t\t\t\t\t\t\t\t<DatePicker.TableCell key={monthId} value={month.value}>\n\t\t\t\t\t\t\t\t\t\t<DatePicker.TableCellTrigger className={styles.tableCellTrigger}>\n\t\t\t\t\t\t\t\t\t\t\t<DsTypography className={styles.tableCellTriggerValue} variant=\"body-md-md\">\n\t\t\t\t\t\t\t\t\t\t\t\t{month.label}\n\t\t\t\t\t\t\t\t\t\t\t</DsTypography>\n\t\t\t\t\t\t\t\t\t\t</DatePicker.TableCellTrigger>\n\t\t\t\t\t\t\t\t\t</DatePicker.TableCell>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</DatePicker.TableRow>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</DatePicker.TableBody>\n\t\t\t\t</DatePicker.Table>\n\t\t\t)}\n\t\t</DatePicker.Context>\n\t</DatePicker.View>\n);\n\n/**\n * Year view - displays grid with years in a decade\n */\nconst YearView = () => (\n\t<DatePicker.View view=\"year\">\n\t\t<DatePicker.Context>\n\t\t\t{(datePicker) => (\n\t\t\t\t<DatePicker.Table className={styles.table}>\n\t\t\t\t\t<DatePicker.TableBody className={styles.tableBody}>\n\t\t\t\t\t\t{datePicker.getYearsGrid({ columns: 4 }).map((years, rowId) => (\n\t\t\t\t\t\t\t<DatePicker.TableRow key={rowId} className={styles.tableRow}>\n\t\t\t\t\t\t\t\t{years.map((year, yearId) => (\n\t\t\t\t\t\t\t\t\t<DatePicker.TableCell key={yearId} value={year.value}>\n\t\t\t\t\t\t\t\t\t\t<DatePicker.TableCellTrigger className={styles.tableCellTrigger}>\n\t\t\t\t\t\t\t\t\t\t\t<DsTypography className={styles.tableCellTriggerValue} variant=\"body-md-md\">\n\t\t\t\t\t\t\t\t\t\t\t\t{year.label}\n\t\t\t\t\t\t\t\t\t\t\t</DsTypography>\n\t\t\t\t\t\t\t\t\t\t</DatePicker.TableCellTrigger>\n\t\t\t\t\t\t\t\t\t</DatePicker.TableCell>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</DatePicker.TableRow>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</DatePicker.TableBody>\n\t\t\t\t</DatePicker.Table>\n\t\t\t)}\n\t\t</DatePicker.Context>\n\t</DatePicker.View>\n);\n\nexport default DsDateInput;\n"],"mappings":"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"}

package/dist/components/ds-date-input/ds-date-input.module.cjs

@@ -0,0 +1,29 @@
+
+//#region src/components/ds-date-input/ds-date-input.module.scss
+var ds_date_input_module_default = {
+	"dateInputControl": "_dateInputControl_rkhb0_1",
+	"input": "_input_rkhb0_1",
+	"iconButton": "_iconButton_rkhb0_1",
+	"disabled": "_disabled_rkhb0_1",
+	"dateInputButton": "_dateInputButton_rkhb0_1",
+	"readOnly": "_readOnly_rkhb0_1",
+	"positioner": "_positioner_rkhb0_1",
+	"content": "_content_rkhb0_1",
+	"expand": "_expand_rkhb0_1",
+	"collapse": "_collapse_rkhb0_1",
+	"viewControl": "_viewControl_rkhb0_1",
+	"viewTrigger": "_viewTrigger_rkhb0_1",
+	"prevTrigger": "_prevTrigger_rkhb0_1",
+	"nextTrigger": "_nextTrigger_rkhb0_1",
+	"calendarView": "_calendarView_rkhb0_1",
+	"table": "_table_rkhb0_1",
+	"tableBody": "_tableBody_rkhb0_1",
+	"tableRow": "_tableRow_rkhb0_1",
+	"tableCellTrigger": "_tableCellTrigger_rkhb0_1",
+	"tableCellTriggerValue": "_tableCellTriggerValue_rkhb0_1",
+	"tableHead": "_tableHead_rkhb0_1",
+	"tableHeader": "_tableHeader_rkhb0_1"
+};
+
+//#endregion
+exports.default = ds_date_input_module_default;

package/dist/components/ds-date-input/ds-date-input.module.js

@@ -0,0 +1,29 @@
+//#region src/components/ds-date-input/ds-date-input.module.scss
+var ds_date_input_module_default = {
+	"dateInputControl": "_dateInputControl_rkhb0_1",
+	"input": "_input_rkhb0_1",
+	"iconButton": "_iconButton_rkhb0_1",
+	"disabled": "_disabled_rkhb0_1",
+	"dateInputButton": "_dateInputButton_rkhb0_1",
+	"readOnly": "_readOnly_rkhb0_1",
+	"positioner": "_positioner_rkhb0_1",
+	"content": "_content_rkhb0_1",
+	"expand": "_expand_rkhb0_1",
+	"collapse": "_collapse_rkhb0_1",
+	"viewControl": "_viewControl_rkhb0_1",
+	"viewTrigger": "_viewTrigger_rkhb0_1",
+	"prevTrigger": "_prevTrigger_rkhb0_1",
+	"nextTrigger": "_nextTrigger_rkhb0_1",
+	"calendarView": "_calendarView_rkhb0_1",
+	"table": "_table_rkhb0_1",
+	"tableBody": "_tableBody_rkhb0_1",
+	"tableRow": "_tableRow_rkhb0_1",
+	"tableCellTrigger": "_tableCellTrigger_rkhb0_1",
+	"tableCellTriggerValue": "_tableCellTriggerValue_rkhb0_1",
+	"tableHead": "_tableHead_rkhb0_1",
+	"tableHeader": "_tableHeader_rkhb0_1"
+};
+
+//#endregion
+export { ds_date_input_module_default as default };
+//# sourceMappingURL=ds-date-input.module.js.map

package/dist/components/ds-date-input/ds-date-input.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-date-input.module.js","names":[],"sources":["../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/components/ds-date-input/ds-date-input.module.scss","../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/styles/shared/_input.scss","../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/styles/_typography.scss","../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/styles/shared/_dropdown.scss","../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/styles/mixins/_bounding-box.scss"],"sourcesContent":["@use '../../styles/shared/input';\n@use '../../styles/shared/dropdown';\n\n.dateInputControl {\n\t@include input.base-input-container;\n\t@include input.input-container-states;\n\tmax-height: input.$input-text-height-default;\n\tjustify-content: space-between;\n\tpadding: var(--spacing-xs) var(--spacing-sm);\n\tgap: var(--spacing-3xs);\n\n\tborder-color: var(--form-control-border-color, var(--color-border));\n\n\t&:hover:not(.disabled) {\n\t\tborder-color: var(--form-control-border-color, var(--color-border-hover));\n\t}\n\n\t&:focus-within {\n\t\tborder-color: var(--form-control-border-color, var(--color-border-action));\n\t}\n\n\t&.disabled {\n\t\tcolor: var(--color-background-deselected);\n\t\tbackground: var(--color-background-secondary);\n\t\tborder-color: var(--color-border-disabled);\n\t\tcursor: not-allowed;\n\n\t\t.input {\n\t\t\tcolor: var(--color-font-disabled);\n\t\t}\n\n\t\t.dateInputButton {\n\t\t\tcolor: var(--color-background-disable);\n\t\t\tcursor: not-allowed;\n\t\t}\n\t}\n\n\t&.readOnly {\n\t\tbackground: var(--color-background-secondary);\n\t\tcursor: default;\n\t}\n}\n\n.input {\n\t@include input.base-input;\n\tmin-width: 0;\n\tflex: 1;\n\tpadding: 0;\n}\n\n.dateInputButton {\n\t@include input.icon-button;\n\tdisplay: flex;\n\talign-items: center;\n\tcursor: pointer;\n\tpadding: 0;\n\ttransition: color 0.2s ease;\n\n\t&:hover:not(:disabled) {\n\t\tcolor: var(--color-background-action-hover);\n\t}\n\n\t&:disabled {\n\t\tcolor: var(--color-background-disable);\n\t\tcursor: not-allowed;\n\t}\n}\n\n.positioner {\n\t@include dropdown.dropdown-viewport;\n}\n\n.content {\n\t@include dropdown.dropdown-content;\n\tpadding: var(--spacing-standard);\n}\n\n.viewControl {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tmargin-bottom: var(--spacing-xs);\n}\n\n.viewTrigger {\n\tflex: 1;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground: transparent;\n\tborder: none;\n\tcursor: pointer;\n\tpadding: var(--spacing-2xs) var(--spacing-xs);\n\tborder-radius: var(--spacing-2xs);\n\tcolor: var(--color-font-main);\n\ttransition: background-color 0.2s;\n\n\t&:hover {\n\t\tbackground: var(--color-background-hover);\n\t}\n}\n\n.prevTrigger,\n.nextTrigger {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground: transparent;\n\tborder: none;\n\tcursor: pointer;\n\tpadding: var(--spacing-2xs);\n\tborder-radius: var(--spacing-2xs);\n\tcolor: var(--color-font-secondary);\n\ttransition: all 0.2s;\n\n\t&:hover {\n\t\tbackground: var(--color-background-hover);\n\t\tcolor: var(--color-font-main);\n\t}\n\n\t&:disabled {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}\n\n.calendarView {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: var(--spacing-xs);\n}\n\n.table {\n\twidth: 100%;\n\tborder-collapse: collapse;\n\n\t.tableBody .tableRow .tableCellTrigger:focus-visible {\n\t\t.tableCellTriggerValue {\n\t\t\toutline: 2px solid var(--color-background-action-hover);\n\t\t\tborder-radius: var(--spacing-2xs);\n\t\t\tborder-width: 0;\n\t\t}\n\t}\n}\n\n.tableHead {\n\tborder-bottom: 1px solid var(--color-border);\n}\n\n.tableHeader {\n\ttext-align: center;\n\tpadding: var(--spacing-2xs);\n\tcolor: var(--color-font-secondary);\n\tfont-weight: var(--font-weight-medium);\n}\n\n.tableRow {\n\t&:first-child {\n\t\t.tableCellTrigger {\n\t\t\tmargin-top: var(--spacing-xs);\n\t\t}\n\t}\n}\n\n.tableCellTrigger {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tcursor: pointer;\n\tuser-select: none;\n\t-webkit-tap-highlight-color: transparent;\n\toutline: none;\n\n\t.tableCellTriggerValue {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: var(--spacing-xl);\n\t\theight: var(--spacing-xl);\n\t\tmargin: var(--spacing-3xs);\n\t\tcolor: var(--color-font-main);\n\t\tborder-radius: var(--spacing-xs);\n\t}\n\n\t&:hover:not([data-disabled], [data-selected], [data-in-range], [data-in-hover-range])\n\t\t.tableCellTriggerValue {\n\t\toutline: 1px solid var(--color-border);\n\t\tbackground: var(--color-background-action-hover-weak);\n\t}\n\n\t&[data-outside-range] .tableCellTriggerValue {\n\t\tcolor: var(--color-font-disabled);\n\t}\n\n\t&[data-selected] .tableCellTriggerValue {\n\t\tbackground: var(--color-background-selected);\n\t\tcolor: var(--color-font-on-action);\n\t}\n\n\t&[data-in-range]:not([data-selected]) {\n\t\tposition: relative;\n\n\t\t.tableCellTriggerValue {\n\t\t\tbackground: var(--color-background-action-secondary-hover);\n\t\t}\n\t}\n\n\t&[data-today]:not([data-selected], [data-in-range]):hover .tableCellTriggerValue {\n\t\tborder-radius: var(--spacing-xs);\n\t}\n\n\t&[data-today]:not([data-selected]) .tableCellTriggerValue {\n\t\tposition: relative;\n\n\t\t&::after {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\twidth: 75%;\n\t\t\tbottom: 4px;\n\t\t\tborder-bottom: 1px solid var(--color-background-brand);\n\t\t}\n\t}\n\n\t&[data-today][data-selected] .tableCellTriggerValue {\n\t\tposition: relative;\n\n\t\t&::after {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\twidth: 75%;\n\t\t\tbottom: 4px;\n\t\t\tborder-bottom: 1px solid var(--color-background);\n\t\t}\n\t}\n\n\t&[data-disabled] .tableCellTriggerValue {\n\t\tcolor: var(--color-font-disabled);\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n\n\t&[data-unavailable] .tableCellTriggerValue {\n\t\ttext-decoration: line-through;\n\t\topacity: 0.4;\n\t}\n}\n"],"mappings":""}

package/dist/components/ds-date-input/ds-date-input.types.d.cts

@@ -0,0 +1,92 @@
+import { DatePickerRootProps } from "@ark-ui/react/date-picker";
+
+//#region src/components/ds-date-input/ds-date-input.types.d.ts
+
+/**
+ * Range-specific props with discriminated union for type safety
+ */
+type DsDateInputRangeProps = {
+  /**
+   * Whether to enable range selection
+   * @default false
+   */
+  range?: false;
+  /**
+   * Controlled value as ISO date string (YYYY-MM-DD)
+   * @example '2024-12-25'
+   */
+  value?: string;
+  /**
+   * Default value for uncontrolled mode
+   * @example '2024-12-25'
+   */
+  defaultValue?: string;
+  /**
+   * Callback when the value changes
+   * @param value - ISO date string (YYYY-MM-DD) or undefined when empty
+   * @example '2024-12-25'
+   */
+  onValueChange?: (value: string | undefined) => void;
+} | {
+  /**
+   * Whether to enable range selection
+   */
+  range: true;
+  /**
+   * Controlled value as ISO date string tuple (YYYY-MM-DD)
+   * @example ['2024-12-01', '2024-12-31']
+   */
+  value?: [string, string];
+  /**
+   * Default value for uncontrolled mode
+   * @example ['2024-12-01', '2024-12-31']
+   */
+  defaultValue?: [string, string];
+  /**
+   * Callback when the value changes
+   * @param value - ISO date string tuple (YYYY-MM-DD) or undefined when empty
+   * @example ['2024-12-01', '2024-12-31']
+   */
+  onValueChange?: (value: [string, string] | undefined) => void;
+};
+/**
+ * Base props shared across all modes
+ */
+type DsDateInputBaseProps = Pick<DatePickerRootProps, 'disabled' | 'readOnly' | 'id' | 'open' | 'name' | 'style'> & {
+  /**
+   * Callback when the open state changes
+   * @param open - Whether the calendar is open
+   */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * Minimum allowed date as ISO string (YYYY-MM-DD)
+   * @example '2024-01-01'
+   */
+  min?: string;
+  /**
+   * Maximum allowed date as ISO string (YYYY-MM-DD)
+   * @example '2024-12-31'
+   */
+  max?: string;
+  /**
+   * Placeholder text for the input
+   * @default 'MM/DD/YYYY' for single date, 'MM/DD/YYYY - MM/DD/YYYY' for range
+   */
+  placeholder?: string;
+  /**
+   * Custom class name for the root container
+   */
+  className?: string;
+  /**
+   * Whether to disable the portal for the calendar content
+   * @default false
+   */
+  disablePortal?: boolean;
+};
+/**
+ * Props for the DsDateInput component
+ */
+type DsDateInputProps = DsDateInputBaseProps & DsDateInputRangeProps;
+//#endregion
+export { DsDateInputProps };
+//# sourceMappingURL=ds-date-input.types.d.cts.map

package/dist/components/ds-date-input/ds-date-input.types.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-date-input.types.d.cts","names":[],"sources":["../../../src/components/ds-date-input/ds-date-input.types.tsx"],"sourcesContent":[],"mappings":";;;;;;AAAqE;AAK3C,KAArB,qBAAA,GAwDoB;EA0Cb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA1CP,oBAAA,GAAuB,KAC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyCW,gBAAA,GAAmB,uBAAuB"}

package/dist/components/ds-date-input/ds-date-input.types.d.ts

@@ -0,0 +1,92 @@
+import { DatePickerRootProps } from "@ark-ui/react/date-picker";
+
+//#region src/components/ds-date-input/ds-date-input.types.d.ts
+
+/**
+ * Range-specific props with discriminated union for type safety
+ */
+type DsDateInputRangeProps = {
+  /**
+   * Whether to enable range selection
+   * @default false
+   */
+  range?: false;
+  /**
+   * Controlled value as ISO date string (YYYY-MM-DD)
+   * @example '2024-12-25'
+   */
+  value?: string;
+  /**
+   * Default value for uncontrolled mode
+   * @example '2024-12-25'
+   */
+  defaultValue?: string;
+  /**
+   * Callback when the value changes
+   * @param value - ISO date string (YYYY-MM-DD) or undefined when empty
+   * @example '2024-12-25'
+   */
+  onValueChange?: (value: string | undefined) => void;
+} | {
+  /**
+   * Whether to enable range selection
+   */
+  range: true;
+  /**
+   * Controlled value as ISO date string tuple (YYYY-MM-DD)
+   * @example ['2024-12-01', '2024-12-31']
+   */
+  value?: [string, string];
+  /**
+   * Default value for uncontrolled mode
+   * @example ['2024-12-01', '2024-12-31']
+   */
+  defaultValue?: [string, string];
+  /**
+   * Callback when the value changes
+   * @param value - ISO date string tuple (YYYY-MM-DD) or undefined when empty
+   * @example ['2024-12-01', '2024-12-31']
+   */
+  onValueChange?: (value: [string, string] | undefined) => void;
+};
+/**
+ * Base props shared across all modes
+ */
+type DsDateInputBaseProps = Pick<DatePickerRootProps, 'disabled' | 'readOnly' | 'id' | 'open' | 'name' | 'style'> & {
+  /**
+   * Callback when the open state changes
+   * @param open - Whether the calendar is open
+   */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * Minimum allowed date as ISO string (YYYY-MM-DD)
+   * @example '2024-01-01'
+   */
+  min?: string;
+  /**
+   * Maximum allowed date as ISO string (YYYY-MM-DD)
+   * @example '2024-12-31'
+   */
+  max?: string;
+  /**
+   * Placeholder text for the input
+   * @default 'MM/DD/YYYY' for single date, 'MM/DD/YYYY - MM/DD/YYYY' for range
+   */
+  placeholder?: string;
+  /**
+   * Custom class name for the root container
+   */
+  className?: string;
+  /**
+   * Whether to disable the portal for the calendar content
+   * @default false
+   */
+  disablePortal?: boolean;
+};
+/**
+ * Props for the DsDateInput component
+ */
+type DsDateInputProps = DsDateInputBaseProps & DsDateInputRangeProps;
+//#endregion
+export { DsDateInputProps };
+//# sourceMappingURL=ds-date-input.types.d.ts.map

package/dist/components/ds-date-input/ds-date-input.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-date-input.types.d.ts","names":[],"sources":["../../../src/components/ds-date-input/ds-date-input.types.tsx"],"sourcesContent":[],"mappings":";;;;;;AAAqE;AAK3C,KAArB,qBAAA,GAwDoB;EA0Cb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA1CP,oBAAA,GAAuB,KAC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyCW,gBAAA,GAAmB,uBAAuB"}