@drivenets/design-system 0.0.5 → 0.1.0

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

@@ -0,0 +1,352 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_ds_icon = require('../ds-icon/ds-icon.cjs');
+require('../ds-icon/index.cjs');
+const require_ds_typography = require('../ds-typography/ds-typography.cjs');
+require('../ds-typography/index.cjs');
+const require_ds_date_input_utils = require('./ds-date-input.utils.cjs');
+const require_ds_date_input_module = require('./ds-date-input.module.cjs');
+let react_compiler_runtime = require("react/compiler-runtime");
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let __ark_ui_react_portal = require("@ark-ui/react/portal");
+let __ark_ui_react_date_picker = require("@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 ? require_ds_date_input_utils.isoStringToDateValue(_min) : void 0;
+	const max = _max ? require_ds_date_input_utils.isoStringToDateValue(_max) : void 0;
+	const value = _value ? require_ds_date_input_utils.stringToDateValue(_value) : [];
+	const defaultValue = _defaultValue ? require_ds_date_input_utils.stringToDateValue(_defaultValue) : [];
+	const [isFocused, setIsFocused] = (0, react.useState)(false);
+	const [isOpen, setIsOpen] = (0, react.useState)(false);
+	const prevValue = (0, react.useRef)(null);
+	const inputRef = (0, react.useRef)(null);
+	if (!isFocused && prevValue.current !== JSON.stringify(value)) {
+		prevValue.current = JSON.stringify(value);
+		if (inputRef.current) inputRef.current.value = require_ds_date_input_utils.formatDateInputValue(value, range);
+	}
+	const clear = () => {
+		if (inputRef.current) inputRef.current.value = "";
+		onValueChange?.(void 0);
+	};
+	const handleInputChange = (e) => {
+		const text = e.target.value;
+		if (require_ds_date_input_utils.validateDateString({
+			text,
+			range,
+			min,
+			max
+		}).isValid) {
+			const parsedValue = require_ds_date_input_utils.parseInputText(text, range);
+			onValueChange?.(require_ds_date_input_utils.dateValuesToStrings(parsedValue, range));
+		}
+	};
+	const handleBlur = () => {
+		setIsFocused(false);
+		const text_0 = inputRef.current?.value || "";
+		if (!require_ds_date_input_utils.validateDateString({
+			text: text_0,
+			range,
+			min,
+			max
+		}).isValid) {
+			clear();
+			return;
+		}
+		const parsedValue_0 = require_ds_date_input_utils.parseInputText(text_0, range);
+		onValueChange?.(require_ds_date_input_utils.dateValuesToStrings(parsedValue_0, range));
+	};
+	const showClearButton = !disabled && !readOnly && !!(value.length > 0 ? value : defaultValue).length;
+	const Wrapper = disablePortal ? react.Fragment : __ark_ui_react_portal.Portal;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ark_ui_react_date_picker.DatePicker.Root, {
+		value,
+		defaultValue,
+		onValueChange: (details) => {
+			onValueChange?.(require_ds_date_input_utils.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__ */ (0, react_jsx_runtime.jsxs)(__ark_ui_react_date_picker.DatePicker.Control, {
+			style,
+			className: (0, classnames.default)(require_ds_date_input_module.default.dateInputControl, disabled && require_ds_date_input_module.default.disabled, readOnly && require_ds_date_input_module.default.readOnly, className),
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.Trigger, {
+					asChild: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: require_ds_date_input_module.default.dateInputButton,
+						disabled,
+						"aria-label": "Open calendar",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+							icon: "calendar_month",
+							size: "small"
+						})
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					ref: inputRef,
+					id,
+					type: "text",
+					className: require_ds_date_input_module.default.input,
+					placeholder: placeholder ?? (range ? "MM/DD/YYYY - MM/DD/YYYY" : "MM/DD/YYYY"),
+					defaultValue: require_ds_date_input_utils.formatDateInputValue(value.length > 0 ? value : defaultValue, range),
+					onChange: handleInputChange,
+					onBlur: handleBlur,
+					onFocus: () => setIsFocused(true),
+					disabled,
+					readOnly
+				}),
+				showClearButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: require_ds_date_input_module.default.dateInputButton,
+					onClick: clear,
+					"aria-label": range ? "Clear date range" : "Clear date",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+						icon: "close",
+						size: "small"
+					})
+				})
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Wrapper, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.Positioner, {
+			className: require_ds_date_input_module.default.positioner,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ark_ui_react_date_picker.DatePicker.Content, {
+				className: require_ds_date_input_module.default.content,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarViewControl, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: require_ds_date_input_module.default.calendarView,
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DayView, {}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MonthView, {}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(YearView, {})
+					]
+				})]
+			})
+		}) })]
+	});
+};
+/**
+* Calendar view control with navigation buttons
+*/
+const CalendarViewControl = () => {
+	const $ = (0, react_compiler_runtime.c)(3);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.PrevTrigger, {
+			className: require_ds_date_input_module.default.prevTrigger,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_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__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.ViewTrigger, {
+			className: require_ds_date_input_module.default.viewTrigger,
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
+					variant: "body-md-md",
+					asChild: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.RangeText, {})
+				})
+			})
+		});
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ark_ui_react_date_picker.DatePicker.ViewControl, {
+			className: require_ds_date_input_module.default.viewControl,
+			children: [
+				t0,
+				t1,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.NextTrigger, {
+					className: require_ds_date_input_module.default.nextTrigger,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_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 $ = (0, react_compiler_runtime.c)(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.View, {
+			view: "day",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.Context, { children: _temp4 })
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+};
+/**
+* Month view - displays grid with months of the year
+*/
+const MonthView = () => {
+	const $ = (0, react_compiler_runtime.c)(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.View, {
+			view: "month",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.Context, { children: _temp7 })
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+};
+/**
+* Year view - displays grid with years in a decade
+*/
+const YearView = () => {
+	const $ = (0, react_compiler_runtime.c)(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.View, {
+			view: "year",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.Context, { children: _temp0 })
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+};
+var ds_date_input_default = DsDateInput;
+function _temp(weekDay, id) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.TableHeader, {
+		className: require_ds_date_input_module.default.tableHeader,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
+			variant: "body-md-md",
+			children: weekDay.short
+		})
+	}, id);
+}
+function _temp2(day, dayId) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.TableCell, {
+		value: day,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.TableCellTrigger, {
+			className: require_ds_date_input_module.default.tableCellTrigger,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
+				className: require_ds_date_input_module.default.tableCellTriggerValue,
+				variant: "body-md-md",
+				children: day.day
+			})
+		})
+	}, dayId);
+}
+function _temp3(week, weekId) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.TableRow, {
+		className: require_ds_date_input_module.default.tableRow,
+		children: week.map(_temp2)
+	}, weekId);
+}
+function _temp4(datePicker) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ark_ui_react_date_picker.DatePicker.Table, {
+		className: require_ds_date_input_module.default.table,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.TableHead, {
+			className: require_ds_date_input_module.default.tableHead,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.TableRow, {
+				className: require_ds_date_input_module.default.tableRow,
+				children: datePicker.weekDays.map(_temp)
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.TableBody, {
+			className: require_ds_date_input_module.default.tableBody,
+			children: datePicker.weeks.map(_temp3)
+		})]
+	});
+}
+function _temp5(month, monthId) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.TableCell, {
+		value: month.value,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.TableCellTrigger, {
+			className: require_ds_date_input_module.default.tableCellTrigger,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
+				className: require_ds_date_input_module.default.tableCellTriggerValue,
+				variant: "body-md-md",
+				children: month.label
+			})
+		})
+	}, monthId);
+}
+function _temp6(months, rowId) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.TableRow, {
+		className: require_ds_date_input_module.default.tableRow,
+		children: months.map(_temp5)
+	}, rowId);
+}
+function _temp7(datePicker) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.Table, {
+		className: require_ds_date_input_module.default.table,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.TableBody, {
+			className: require_ds_date_input_module.default.tableBody,
+			children: datePicker.getMonthsGrid({
+				columns: 4,
+				format: "short"
+			}).map(_temp6)
+		})
+	});
+}
+function _temp8(year, yearId) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.TableCell, {
+		value: year.value,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.TableCellTrigger, {
+			className: require_ds_date_input_module.default.tableCellTrigger,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
+				className: require_ds_date_input_module.default.tableCellTriggerValue,
+				variant: "body-md-md",
+				children: year.label
+			})
+		})
+	}, yearId);
+}
+function _temp9(years, rowId) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.TableRow, {
+		className: require_ds_date_input_module.default.tableRow,
+		children: years.map(_temp8)
+	}, rowId);
+}
+function _temp0(datePicker) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.Table, {
+		className: require_ds_date_input_module.default.table,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.TableBody, {
+			className: require_ds_date_input_module.default.tableBody,
+			children: datePicker.getYearsGrid({ columns: 4 }).map(_temp9)
+		})
+	});
+}
+
+//#endregion
+exports.default = ds_date_input_default;

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

@@ -0,0 +1,31 @@
+import { DsDateInputProps } from "./ds-date-input.types.cjs";
+import * as react_jsx_runtime11 from "react/jsx-runtime";
+
+//#region src/components/ds-date-input/ds-date-input.d.ts
+
+/**
+ * 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.
+ */
+declare const DsDateInput: ({
+  range,
+  placeholder,
+  style,
+  className,
+  disablePortal,
+  onValueChange,
+  onOpenChange,
+  value: _value,
+  defaultValue: _defaultValue,
+  min: _min,
+  max: _max,
+  disabled,
+  readOnly,
+  id,
+  ...datePickerProps
+}: DsDateInputProps) => react_jsx_runtime11.JSX.Element;
+//#endregion
+export { DsDateInput };
+//# sourceMappingURL=ds-date-input.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-date-input.d.cts","names":[],"sources":["../../../src/components/ds-date-input/ds-date-input.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAI8D;;;cAmBxD,WAAe,EAAA,CAAA;EAAA,KAAA;EAAA,WAAA;EAAA,KAAA;EAAA,SAAA;EAAA,aAAA;EAAA,aAAA;EAAA,YAAA;EAAA,KAAA,EAAA,MAAA;EAAA,YAAA,EAAA,aAAA;EAAA,GAAA,EAAA,IAAA;EAAA,GAAA,EAAA,IAAA;EAAA,QAAA;EAAA,QAAA;EAAA,EAAA;EAAA,GAAA;AAAA,CAAA,EAgBlB,gBAhBkB,EAAA,GAgBF,mBAAA,CAAA,GAAA,CAAA,OAhBE"}

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

@@ -0,0 +1,31 @@
+import { DsDateInputProps } from "./ds-date-input.types.js";
+import * as react_jsx_runtime46 from "react/jsx-runtime";
+
+//#region src/components/ds-date-input/ds-date-input.d.ts
+
+/**
+ * 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.
+ */
+declare const DsDateInput: ({
+  range,
+  placeholder,
+  style,
+  className,
+  disablePortal,
+  onValueChange,
+  onOpenChange,
+  value: _value,
+  defaultValue: _defaultValue,
+  min: _min,
+  max: _max,
+  disabled,
+  readOnly,
+  id,
+  ...datePickerProps
+}: DsDateInputProps) => react_jsx_runtime46.JSX.Element;
+//#endregion
+export { DsDateInput };
+//# sourceMappingURL=ds-date-input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-date-input.d.ts","names":[],"sources":["../../../src/components/ds-date-input/ds-date-input.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAI8D;;;cAmBxD,WAAe,EAAA,CAAA;EAAA,KAAA;EAAA,WAAA;EAAA,KAAA;EAAA,SAAA;EAAA,aAAA;EAAA,aAAA;EAAA,YAAA;EAAA,KAAA,EAAA,MAAA;EAAA,YAAA,EAAA,aAAA;EAAA,GAAA,EAAA,IAAA;EAAA,GAAA,EAAA,IAAA;EAAA,QAAA;EAAA,QAAA;EAAA,EAAA;EAAA,GAAA;AAAA,CAAA,EAgBlB,gBAhBkB,EAAA,GAgBF,mBAAA,CAAA,GAAA,CAAA,OAhBE"}