@galaxy-io/dls 1.0.3

package/dist/inputs/DateInput.js

@@ -0,0 +1,498 @@
+import { withTheme } from "../theme/GalaxyTheme.js";
+import { getCssSizeValue } from "../utils/linaria.js";
+import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
+import FlexWrapper, { AlignItems, FlexDirection, JustifyContent } from "../containers/FlexWrapper.js";
+import Icon, { IconVariant } from "../icons/Icon.js";
+import Dropdown, { DropdownVariant } from "../dropdown/Dropdown.js";
+import GridWrapper from "../containers/GridWrapper.js";
+import Spacing from "../containers/Spacing.js";
+import { InputLabel, InputSize } from "./Input.js";
+import SelectInput, { SelectInputSize, SelectInputVariant } from "./SelectInput.js";
+/* empty css                    */
+import { styled } from "@linaria/react";
+import { match } from "ts-pattern";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CalendarBlankIcon, CaretLeftIcon, CaretRightIcon } from "@phosphor-icons/react";
+//#region src/inputs/DateInput.tsx
+var DateMonth = /* @__PURE__ */ function(DateMonth) {
+	DateMonth["JANUARY"] = "JANUARY";
+	DateMonth["FEBRUARY"] = "FEBRUARY";
+	DateMonth["MARCH"] = "MARCH";
+	DateMonth["APRIL"] = "APRIL";
+	DateMonth["MAY"] = "MAY";
+	DateMonth["JUNE"] = "JUNE";
+	DateMonth["JULY"] = "JULY";
+	DateMonth["AUGUST"] = "AUGUST";
+	DateMonth["SEPTEMBER"] = "SEPTEMBER";
+	DateMonth["OCTOBER"] = "OCTOBER";
+	DateMonth["NOVEMBER"] = "NOVEMBER";
+	DateMonth["DECEMBER"] = "DECEMBER";
+	return DateMonth;
+}(DateMonth || {});
+var DateDay = /* @__PURE__ */ function(DateDay) {
+	DateDay["SUNDAY"] = "SUNDAY";
+	DateDay["MONDAY"] = "MONDAY";
+	DateDay["TUESDAY"] = "TUESDAY";
+	DateDay["WEDNESDAY"] = "WEDNESDAY";
+	DateDay["THURSDAY"] = "THURSDAY";
+	DateDay["FRIDAY"] = "FRIDAY";
+	DateDay["SATURDAY"] = "SATURDAY";
+	return DateDay;
+}(DateDay || {});
+var DATE_MONTH_TO_LABEL = {
+	["JANUARY"]: "January",
+	["FEBRUARY"]: "February",
+	["MARCH"]: "March",
+	["APRIL"]: "April",
+	["MAY"]: "May",
+	["JUNE"]: "June",
+	["JULY"]: "July",
+	["AUGUST"]: "August",
+	["SEPTEMBER"]: "September",
+	["OCTOBER"]: "October",
+	["NOVEMBER"]: "November",
+	["DECEMBER"]: "December"
+};
+var DATE_DAY_TO_LABEL = {
+	["SUNDAY"]: "Sun",
+	["MONDAY"]: "Mon",
+	["TUESDAY"]: "Tue",
+	["WEDNESDAY"]: "Wed",
+	["THURSDAY"]: "Thu",
+	["FRIDAY"]: "Fri",
+	["SATURDAY"]: "Sat"
+};
+var _exp = () => ({ $size }) => {
+	return match($size).with(InputSize.SMALL, () => "0 6px 0 8px").with(InputSize.MEDIUM, () => "0 8px 0 10px").with(InputSize.LARGE, () => "0 10px 0 12px").exhaustive();
+};
+var _exp2 = () => ({ $size }) => {
+	return match($size).with(InputSize.SMALL, () => "24px").with(InputSize.MEDIUM, () => "28px").with(InputSize.LARGE, () => "32px").exhaustive();
+};
+var _exp3 = () => ({ $width, $fillWidth }) => $fillWidth ? "100%" : $width ? getCssSizeValue($width) : "auto";
+var _exp4 = () => ({ $isDisabled }) => $isDisabled ? "not-allowed" : "pointer";
+var _exp5 = () => ({ $isDisabled }) => $isDisabled ? .5 : 1;
+var _exp6 = () => ({ theme }) => theme.color.background.primary;
+var _exp7 = () => ({ theme, $isActive, $isError }) => {
+	if ($isActive) return theme.color.border.selected;
+	if ($isError) return theme.color.border.error;
+	return theme.color.border.primary;
+};
+var _exp8 = () => ({ theme, $isActive, $isDisabled }) => {
+	if ($isDisabled) return theme.color.border.primary;
+	if ($isActive) return theme.color.border.selected;
+	return theme.color.border.primary;
+};
+var StyledDateInput = withTheme(/*#__PURE__*/ styled("div")({
+	name: "StyledDateInput",
+	class: "s1902pw9",
+	propsAsIs: false,
+	vars: {
+		"s1902pw9-0": [_exp()],
+		"s1902pw9-1": [_exp2()],
+		"s1902pw9-2": [_exp3()],
+		"s1902pw9-3": [_exp4()],
+		"s1902pw9-4": [_exp5()],
+		"s1902pw9-5": [_exp6()],
+		"s1902pw9-6": [_exp7()],
+		"s1902pw9-7": [_exp8()]
+	}
+}));
+var CalendarContainer = withTheme(/*#__PURE__*/ styled("div")({
+	name: "CalendarContainer",
+	class: "c179xo5d",
+	propsAsIs: false
+}));
+var _exp9 = () => ({ $isDisabled }) => $isDisabled ? "not-allowed" : "pointer";
+var _exp0 = () => ({ $isDisabled, $isCurrentMonth }) => {
+	if ($isDisabled) return .3;
+	if (!$isCurrentMonth) return .4;
+	return 1;
+};
+var _exp1 = () => ({ theme, $isSelected, $isToday }) => {
+	if ($isSelected) return theme.color.background.tertiary;
+	if ($isToday) return theme.color.background.tertiary;
+	return "transparent";
+};
+var _exp10 = () => ({ theme, $isSelected }) => {
+	if ($isSelected) return `0.5px solid ${theme.color.border.primary}`;
+	return "0.5px solid transparent";
+};
+var _exp11 = () => ({ theme, $isSelected }) => $isSelected ? theme.color.background.tertiary : theme.color.background.secondary;
+var DayCell = withTheme(/*#__PURE__*/ styled("button")({
+	name: "DayCell",
+	class: "d60emtx",
+	propsAsIs: false,
+	vars: {
+		"d60emtx-0": [_exp9()],
+		"d60emtx-1": [_exp0()],
+		"d60emtx-2": [_exp1()],
+		"d60emtx-3": [_exp10()],
+		"d60emtx-4": [_exp11()]
+	}
+}));
+var DATE_INPUT_SIZE_TO_TEXT_SIZE = {
+	[InputSize.SMALL]: TextSize.BODY_MD,
+	[InputSize.MEDIUM]: TextSize.BODY_MD,
+	[InputSize.LARGE]: TextSize.BODY_MD
+};
+var DATE_INPUT_SIZE_TO_ICON_SIZE = {
+	[InputSize.SMALL]: 14,
+	[InputSize.MEDIUM]: 16,
+	[InputSize.LARGE]: 18
+};
+var DEFAULT_MAX_DATE = /* @__PURE__ */ new Date();
+function defaultDateFormat(date) {
+	return date.toLocaleDateString("en-US", {
+		month: "short",
+		day: "numeric",
+		year: "numeric"
+	});
+}
+var getInitialViewDate = (value) => {
+	return value || /* @__PURE__ */ new Date();
+};
+var DateInput = ({ label, size = InputSize.MEDIUM, value, placeholder = "Select date...", onChange, width, fillWidth = false, isDisabled = false, isRequired = false, error, minDate = new Date(1970, 0, 1), maxDate = DEFAULT_MAX_DATE, format = defaultDateFormat }) => {
+	const [state, setState] = useState({
+		isOpen: false,
+		isHovered: false,
+		viewDate: getInitialViewDate(value),
+		isMonthSelectOpen: false,
+		isYearSelectOpen: false
+	});
+	const selectInteractionRef = useRef(false);
+	const [prevValue, setPrevValue] = useState(value);
+	if (value !== prevValue) {
+		setPrevValue(value);
+		if (value) setState((prev) => ({
+			...prev,
+			viewDate: value
+		}));
+	}
+	const handleToggle = useCallback(() => {
+		if (isDisabled) return;
+		setState((prev) => ({
+			...prev,
+			isOpen: !prev.isOpen
+		}));
+	}, [isDisabled]);
+	const handleClose = useCallback(() => {
+		setState((prev) => {
+			if (prev.isMonthSelectOpen || prev.isYearSelectOpen) return prev;
+			if (selectInteractionRef.current) {
+				selectInteractionRef.current = false;
+				return prev;
+			}
+			return {
+				...prev,
+				isOpen: false
+			};
+		});
+	}, []);
+	const handleMouseEnter = useCallback(() => {
+		setState((prev) => ({
+			...prev,
+			isHovered: true
+		}));
+	}, []);
+	const handleMouseLeave = useCallback(() => {
+		setState((prev) => ({
+			...prev,
+			isHovered: false
+		}));
+	}, []);
+	const handlePrevMonth = useCallback((e) => {
+		e.stopPropagation();
+		setState((prev) => {
+			const newDate = new Date(prev.viewDate);
+			newDate.setMonth(newDate.getMonth() - 1);
+			return {
+				...prev,
+				viewDate: newDate
+			};
+		});
+	}, []);
+	const handleNextMonth = useCallback((e) => {
+		e.stopPropagation();
+		setState((prev) => {
+			const newDate = new Date(prev.viewDate);
+			newDate.setMonth(newDate.getMonth() + 1);
+			return {
+				...prev,
+				viewDate: newDate
+			};
+		});
+	}, []);
+	const handleMonthChange = useCallback((option) => {
+		selectInteractionRef.current = true;
+		setState((prev) => {
+			const newDate = new Date(prev.viewDate);
+			newDate.setMonth(option.value);
+			return {
+				...prev,
+				viewDate: newDate,
+				isMonthSelectOpen: false
+			};
+		});
+	}, []);
+	const handleYearChange = useCallback((option) => {
+		selectInteractionRef.current = true;
+		setState((prev) => {
+			const newDate = new Date(prev.viewDate);
+			newDate.setFullYear(option.value);
+			return {
+				...prev,
+				viewDate: newDate,
+				isYearSelectOpen: false
+			};
+		});
+	}, []);
+	const handleMonthSelectOpenChange = useCallback((isOpen) => {
+		setState((prev) => ({
+			...prev,
+			isMonthSelectOpen: isOpen,
+			isYearSelectOpen: false
+		}));
+	}, []);
+	const handleYearSelectOpenChange = useCallback((isOpen) => {
+		setState((prev) => ({
+			...prev,
+			isYearSelectOpen: isOpen,
+			isMonthSelectOpen: false
+		}));
+	}, []);
+	const handleDateSelect = useCallback((date) => {
+		if (onChange) onChange(date);
+		setState((prev) => ({
+			...prev,
+			isOpen: false,
+			isMonthSelectOpen: false,
+			isYearSelectOpen: false
+		}));
+	}, [onChange]);
+	const isDateDisabled = useCallback((date) => {
+		if (minDate && date < minDate) return true;
+		if (maxDate && date > maxDate) return true;
+		return false;
+	}, [minDate, maxDate]);
+	const calendarDays = useMemo(() => {
+		const year = state.viewDate.getFullYear();
+		const month = state.viewDate.getMonth();
+		const firstDayOfMonth = new Date(year, month, 1);
+		const lastDayOfMonth = new Date(year, month + 1, 0);
+		const startDay = firstDayOfMonth.getDay();
+		const daysInMonth = lastDayOfMonth.getDate();
+		const days = [];
+		const prevMonthLastDay = new Date(year, month, 0).getDate();
+		for (let i = startDay - 1; i >= 0; i--) {
+			const date = new Date(year, month - 1, prevMonthLastDay - i);
+			days.push({
+				date,
+				isCurrentMonth: false,
+				isToday: isSameDay(date, /* @__PURE__ */ new Date()),
+				isSelected: value ? isSameDay(date, value) : false,
+				isDisabled: isDateDisabled(date)
+			});
+		}
+		for (let day = 1; day <= daysInMonth; day++) {
+			const date = new Date(year, month, day);
+			days.push({
+				date,
+				isCurrentMonth: true,
+				isToday: isSameDay(date, /* @__PURE__ */ new Date()),
+				isSelected: value ? isSameDay(date, value) : false,
+				isDisabled: isDateDisabled(date)
+			});
+		}
+		const remainingDays = 42 - days.length;
+		for (let i = 1; i <= remainingDays; i++) {
+			const date = new Date(year, month + 1, i);
+			days.push({
+				date,
+				isCurrentMonth: false,
+				isToday: isSameDay(date, /* @__PURE__ */ new Date()),
+				isSelected: value ? isSameDay(date, value) : false,
+				isDisabled: isDateDisabled(date)
+			});
+		}
+		return days;
+	}, [
+		state.viewDate,
+		value,
+		isDateDisabled
+	]);
+	const textVariant = useMemo(() => {
+		if (value) return TextVariant.PRIMARY;
+		if (state.isOpen || state.isHovered) return TextVariant.SECONDARY;
+		return TextVariant.TERTIARY;
+	}, [
+		value,
+		state.isOpen,
+		state.isHovered
+	]);
+	const displayValue = useMemo(() => {
+		if (value) return format(value);
+		return placeholder;
+	}, [
+		value,
+		placeholder,
+		format
+	]);
+	const monthOptions = useMemo(() => Object.values(DateMonth).map((month, index) => ({
+		id: String(index),
+		label: DATE_MONTH_TO_LABEL[month],
+		value: index
+	})), []);
+	const yearOptions = useMemo(() => {
+		const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+		const minYear = minDate ? minDate.getFullYear() : currentYear - 100;
+		const maxYear = maxDate ? maxDate.getFullYear() : currentYear + 10;
+		const years = [];
+		for (let year = maxYear; year >= minYear; year--) years.push({
+			id: String(year),
+			label: String(year),
+			value: year
+		});
+		return years;
+	}, [minDate, maxDate]);
+	const selectedMonthOption = useMemo(() => monthOptions.find((opt) => opt.value === state.viewDate.getMonth()), [monthOptions, state.viewDate]);
+	const selectedYearOption = useMemo(() => yearOptions.find((opt) => opt.value === state.viewDate.getFullYear()), [yearOptions, state.viewDate]);
+	const calendarBody = /* @__PURE__ */ jsxs(CalendarContainer, {
+		onClick: (e) => e.stopPropagation(),
+		children: [/* @__PURE__ */ jsxs(FlexWrapper, {
+			alignItems: AlignItems.CENTER,
+			justifyContent: JustifyContent.SPACE_BETWEEN,
+			padding: "0 0 12px 0",
+			children: [
+				/* @__PURE__ */ jsx(FlexWrapper, {
+					onClick: handlePrevMonth,
+					children: /* @__PURE__ */ jsx(Icon, {
+						component: CaretLeftIcon,
+						size: 16,
+						variant: IconVariant.SECONDARY
+					})
+				}),
+				/* @__PURE__ */ jsxs(FlexWrapper, {
+					alignItems: AlignItems.CENTER,
+					gap: 4,
+					onClick: (e) => e.stopPropagation(),
+					onMouseDown: (e) => e.stopPropagation(),
+					children: [/* @__PURE__ */ jsx(SelectInput, {
+						variant: SelectInputVariant.SECONDARY,
+						size: SelectInputSize.SMALL,
+						options: monthOptions,
+						value: selectedMonthOption,
+						onChange: handleMonthChange,
+						isOpen: state.isMonthSelectOpen,
+						onOpenChange: handleMonthSelectOpenChange,
+						width: 120
+					}), /* @__PURE__ */ jsx(SelectInput, {
+						variant: SelectInputVariant.SECONDARY,
+						size: SelectInputSize.SMALL,
+						options: yearOptions,
+						value: selectedYearOption,
+						onChange: handleYearChange,
+						isOpen: state.isYearSelectOpen,
+						onOpenChange: handleYearSelectOpenChange,
+						width: 70
+					})]
+				}),
+				/* @__PURE__ */ jsx(FlexWrapper, {
+					onClick: handleNextMonth,
+					children: /* @__PURE__ */ jsx(Icon, {
+						component: CaretRightIcon,
+						size: 16,
+						variant: IconVariant.SECONDARY
+					})
+				})
+			]
+		}), /* @__PURE__ */ jsxs(GridWrapper, {
+			columns: 7,
+			gap: 2,
+			children: [Object.values(DateDay).map((day) => /* @__PURE__ */ jsx(FlexWrapper, {
+				alignItems: AlignItems.CENTER,
+				justifyContent: JustifyContent.CENTER,
+				height: 32,
+				children: /* @__PURE__ */ jsx(Text, {
+					size: TextSize.CAPTION,
+					variant: TextVariant.TERTIARY,
+					weight: TextWeight.MEDIUM,
+					children: DATE_DAY_TO_LABEL[day].toUpperCase()
+				})
+			}, day)), calendarDays.map((day, index) => /* @__PURE__ */ jsx(DayCell, {
+				$isSelected: day.isSelected,
+				$isToday: day.isToday,
+				$isCurrentMonth: day.isCurrentMonth,
+				$isDisabled: day.isDisabled,
+				onClick: () => !day.isDisabled && handleDateSelect(day.date),
+				disabled: day.isDisabled,
+				children: /* @__PURE__ */ jsx(Text, {
+					size: TextSize.BODY_SM,
+					variant: day.isSelected ? TextVariant.PRIMARY : TextVariant.SECONDARY,
+					weight: day.isSelected || day.isToday ? TextWeight.MEDIUM : TextWeight.REGULAR,
+					children: day.date.getDate()
+				})
+			}, index))]
+		})]
+	});
+	return /* @__PURE__ */ jsxs(FlexWrapper, {
+		direction: FlexDirection.COLUMN,
+		gap: 4,
+		fillWidth,
+		children: [
+			label && /* @__PURE__ */ jsx(InputLabel, {
+				label,
+				isRequired
+			}),
+			/* @__PURE__ */ jsx(Dropdown, {
+				variant: DropdownVariant.PRIMARY,
+				body: calendarBody,
+				isOpen: state.isOpen,
+				onClose: handleClose,
+				noPadding: true,
+				fillWidth,
+				children: /* @__PURE__ */ jsxs(StyledDateInput, {
+					$size: size,
+					$isActive: state.isOpen,
+					$isDisabled: isDisabled,
+					$isError: !!error,
+					$width: width,
+					$fillWidth: fillWidth,
+					onClick: handleToggle,
+					onMouseEnter: handleMouseEnter,
+					onMouseLeave: handleMouseLeave,
+					role: "button",
+					tabIndex: isDisabled ? -1 : 0,
+					"aria-haspopup": "dialog",
+					"aria-expanded": state.isOpen,
+					"aria-label": value ? displayValue : placeholder,
+					children: [
+						/* @__PURE__ */ jsx(Text, {
+							variant: textVariant,
+							size: DATE_INPUT_SIZE_TO_TEXT_SIZE[size],
+							isEllipsis: true,
+							cursor: !isDisabled ? "pointer" : "not-allowed",
+							children: displayValue
+						}),
+						/* @__PURE__ */ jsx(Spacing, { left: 8 }),
+						/* @__PURE__ */ jsx(Icon, {
+							component: CalendarBlankIcon,
+							size: DATE_INPUT_SIZE_TO_ICON_SIZE[size],
+							variant: state.isOpen || state.isHovered ? IconVariant.SECONDARY : IconVariant.TERTIARY
+						})
+					]
+				})
+			}),
+			error && /* @__PURE__ */ jsx(Text, {
+				variant: TextVariant.ERROR,
+				size: TextSize.BODY_SM,
+				children: error
+			})
+		]
+	});
+};
+function isSameDay(date1, date2) {
+	return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
+}
+//#endregion
+export { DateInput as default, defaultDateFormat };

package/dist/inputs/Input.d.ts

@@ -0,0 +1,91 @@
+import { type Ref } from "react";
+import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
+export interface InputLabelProps {
+    label: string;
+    labelTooltip?: string | React.ReactNode;
+    isRequired?: boolean;
+}
+export declare const InputLabel: ({ label, labelTooltip, isRequired }: InputLabelProps) => import("react").JSX.Element;
+export declare enum InputSize {
+    SMALL = "SMALL",
+    MEDIUM = "MEDIUM",
+    LARGE = "LARGE"
+}
+export declare const StyledInput: import("react").ComponentType<Pick<import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & {
+    $size: InputSize;
+    $width?: number | string;
+    $fillWidth?: boolean;
+    $isError?: boolean;
+    $hasLeadingIcon?: boolean;
+    $hasTrailingAction?: boolean;
+    $isMonospace?: boolean;
+} & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}, "$width" | "$fillWidth" | "as" | "$size" | "$isMonospace" | "$isError" | "$hasLeadingIcon" | "$hasTrailingAction" | keyof import("react").ClassAttributes<HTMLInputElement> | keyof import("react").InputHTMLAttributes<HTMLInputElement>> & {
+    theme?: import("@callstack/react-theme-provider").$DeepPartial<import("../theme").Theme> | undefined;
+}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<import("react").ComponentType<import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & {
+    $size: InputSize;
+    $width?: number | string;
+    $fillWidth?: boolean;
+    $isError?: boolean;
+    $hasLeadingIcon?: boolean;
+    $hasTrailingAction?: boolean;
+    $isMonospace?: boolean;
+} & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}> & {
+    __wyw_meta: unknown;
+} & import("react").FunctionComponent<import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & {
+    $size: InputSize;
+    $width?: number | string;
+    $fillWidth?: boolean;
+    $isError?: boolean;
+    $hasLeadingIcon?: boolean;
+    $hasTrailingAction?: boolean;
+    $isMonospace?: boolean;
+} & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}>, {}>;
+export type InputValue = string | number | readonly string[] | undefined;
+export interface InputProps<T> {
+    parse: (value: T) => T;
+    onChange: (value: T) => void;
+    size?: InputSize;
+    type: HTMLInputElement["type"];
+    value?: T;
+    placeholder?: string;
+    leading?: {
+        icon: PhosphorIcon;
+        onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    };
+    trailing?: {
+        icon: PhosphorIcon;
+        onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+        isDisabled?: boolean;
+    };
+    label?: string;
+    labelTooltip?: string | React.ReactNode;
+    error?: string;
+    isRequired?: boolean;
+    isDisabled?: boolean;
+    autoFocus?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    width?: number | string;
+    fillWidth?: boolean;
+    isMonospace?: boolean;
+}
+declare const Input: <T extends InputValue>(props: InputProps<T> & {
+    ref?: Ref<HTMLInputElement>;
+}) => React.ReactElement;
+export default Input;