@galaxy-io/dls 1.0.3

package/dist/inputs/ColorInput.js

@@ -0,0 +1,368 @@
+import { withTheme } from "../theme/GalaxyTheme.js";
+import { getCssSizeValue } from "../utils/linaria.js";
+import { hexToHsva, hsvaToHex } from "../utils/colors.js";
+import Text, { TextSize, TextVariant } from "../text/Text.js";
+import FlexWrapper, { AlignItems, FlexDirection } 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";
+/* empty css                     */
+import { styled } from "@linaria/react";
+import { match } from "ts-pattern";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CaretDownIcon } from "@phosphor-icons/react";
+import { Hue, Saturation } from "@uiw/react-color";
+//#region src/inputs/ColorInput.tsx
+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 StyledColorInput = withTheme(/*#__PURE__*/ styled("div")({
+	name: "StyledColorInput",
+	class: "s161ysn8",
+	propsAsIs: false,
+	vars: {
+		"s161ysn8-0": [_exp()],
+		"s161ysn8-1": [_exp2()],
+		"s161ysn8-2": [_exp3()],
+		"s161ysn8-3": [_exp4()],
+		"s161ysn8-4": [_exp5()],
+		"s161ysn8-5": [_exp6()],
+		"s161ysn8-6": [_exp7()],
+		"s161ysn8-7": [_exp8()]
+	}
+}));
+var ColorPickerContainer = /*#__PURE__*/ styled("div")({
+	name: "ColorPickerContainer",
+	class: "c10utehj",
+	propsAsIs: false
+});
+var StyledSaturation = /*#__PURE__*/ styled("div")({
+	name: "StyledSaturation",
+	class: "sjdhyd9",
+	propsAsIs: false
+});
+var _exp9 = () => ({ theme }) => theme.color.border.primary;
+var StyledHue = withTheme(/*#__PURE__*/ styled("div")({
+	name: "StyledHue",
+	class: "s1xfz2j",
+	propsAsIs: false,
+	vars: { "s1xfz2j-0": [_exp9()] }
+}));
+var _exp0 = () => ({ $left }) => $left ?? "0";
+var _exp1 = () => ({ theme }) => theme.color.background.base;
+var _exp10 = () => ({ theme }) => theme.color.border.primary;
+var HuePointerElement = withTheme(/*#__PURE__*/ styled("div")({
+	name: "HuePointerElement",
+	class: "hv4cfbr",
+	propsAsIs: false,
+	vars: {
+		"hv4cfbr-0": [_exp0()],
+		"hv4cfbr-1": [_exp1()],
+		"hv4cfbr-2": [_exp10()]
+	}
+}));
+var HuePointer = ({ left }) => /* @__PURE__ */ jsx(HuePointerElement, { $left: left });
+var ColorInputTriggerWrapper = /*#__PURE__*/ styled("div")({
+	name: "ColorInputTriggerWrapper",
+	class: "c1581w8r",
+	propsAsIs: false
+});
+var _exp11 = () => ({ $color }) => $color;
+var ColorInputPreviewSwatch = /*#__PURE__*/ styled("div")({
+	name: "ColorInputPreviewSwatch",
+	class: "c2h225c",
+	propsAsIs: false,
+	vars: { "c2h225c-0": [_exp11()] }
+});
+var _exp12 = () => ({ $isSelected }) => $isSelected ? "#ffffff" : "rgba(0, 0, 0, 0.15)";
+var _exp13 = () => ({ $color }) => $color;
+var ColorSwatch = /*#__PURE__*/ styled("button")({
+	name: "ColorSwatch",
+	class: "cnw6647",
+	propsAsIs: false,
+	vars: {
+		"cnw6647-0": [_exp12()],
+		"cnw6647-1": [_exp13()]
+	}
+});
+var normalizeHex = (hex) => {
+	let h = hex.trim().toLowerCase();
+	if (!h.startsWith("#")) h = `#${h}`;
+	if (h.length === 4) {
+		const r = h[1], g = h[2], b = h[3];
+		return `#${r}${r}${g}${g}${b}${b}`;
+	}
+	if (h.length !== 7) throw new Error(`Invalid hex color: "${hex}". Expected #RRGGBB or #RGB`);
+	return h;
+};
+var safeNormalizeHex = (hex) => {
+	if (!hex) return null;
+	try {
+		return normalizeHex(hex);
+	} catch {
+		return null;
+	}
+};
+var COLOR_INPUT_SIZE_TO_TEXT_SIZE = {
+	[InputSize.SMALL]: TextSize.BODY_MD,
+	[InputSize.MEDIUM]: TextSize.BODY_MD,
+	[InputSize.LARGE]: TextSize.BODY_MD
+};
+var COLOR_INPUT_SIZE_TO_ICON_SIZE = {
+	[InputSize.SMALL]: 14,
+	[InputSize.MEDIUM]: 16,
+	[InputSize.LARGE]: 18
+};
+var ColorInput = ({ label, size = InputSize.MEDIUM, value, placeholder = "Select color...", onChange, onPreviewChange, width, fillWidth = false, isDisabled = false, isRequired = false, error, pinnedHex = [], isOpen: controlledIsOpen, onOpenChange, children }) => {
+	const [localState, setLocalState] = useState({
+		isOpen: false,
+		isHovered: false
+	});
+	const isControlled = controlledIsOpen !== void 0;
+	const isOpen = isControlled ? controlledIsOpen : localState.isOpen;
+	const hsva = useMemo(() => {
+		if (!value) return {
+			h: 0,
+			s: 0,
+			v: 100,
+			a: 1
+		};
+		try {
+			const normalized = safeNormalizeHex(value);
+			if (!normalized) return {
+				h: 0,
+				s: 0,
+				v: 100,
+				a: 1
+			};
+			return hexToHsva(normalized);
+		} catch {
+			return {
+				h: 0,
+				s: 0,
+				v: 100,
+				a: 1
+			};
+		}
+	}, [value]);
+	const [localHsva, setLocalHsva] = useState(hsva);
+	const [prevHsva, setPrevHsva] = useState(hsva);
+	if (hsva !== prevHsva) {
+		setPrevHsva(hsva);
+		setLocalHsva(hsva);
+	}
+	const handleToggle = useCallback(() => {
+		if (isDisabled) return;
+		const newIsOpen = !isOpen;
+		if (!isControlled) setLocalState((prev) => ({
+			...prev,
+			isOpen: newIsOpen
+		}));
+		if (onOpenChange) onOpenChange(newIsOpen);
+	}, [
+		isDisabled,
+		isOpen,
+		isControlled,
+		onOpenChange
+	]);
+	const handleClose = useCallback(() => {
+		const hex = hsvaToHex(localHsva);
+		if (onChange) onChange(hex);
+		if (!isControlled) setLocalState((prev) => ({
+			...prev,
+			isOpen: false
+		}));
+		if (onOpenChange) onOpenChange(false);
+	}, [
+		isControlled,
+		onOpenChange,
+		localHsva,
+		onChange
+	]);
+	const handleMouseEnter = useCallback(() => {
+		setLocalState((prev) => ({
+			...prev,
+			isHovered: true
+		}));
+	}, []);
+	const handleMouseLeave = useCallback(() => {
+		setLocalState((prev) => ({
+			...prev,
+			isHovered: false
+		}));
+	}, []);
+	useEffect(() => {
+		if (onPreviewChange && isOpen) onPreviewChange(hsvaToHex(localHsva));
+	}, [
+		localHsva,
+		isOpen,
+		onPreviewChange
+	]);
+	const handleSaturationChange = useCallback((hsva) => {
+		setLocalHsva(hsva);
+	}, []);
+	const handleHueChange = useCallback((newHue) => {
+		setLocalHsva((prev) => ({
+			...prev,
+			h: newHue.h
+		}));
+	}, []);
+	const handleColorSelect = useCallback((hex) => {
+		const normalized = safeNormalizeHex(hex);
+		if (normalized && onChange) {
+			onChange(normalized);
+			if (!isControlled) setLocalState((prev) => ({
+				...prev,
+				isOpen: false
+			}));
+			if (onOpenChange) onOpenChange(false);
+		}
+	}, [
+		onChange,
+		isControlled,
+		onOpenChange
+	]);
+	const textVariant = useMemo(() => {
+		if (value) return TextVariant.PRIMARY;
+		if (isOpen || localState.isHovered) return TextVariant.SECONDARY;
+		return TextVariant.TERTIARY;
+	}, [
+		value,
+		isOpen,
+		localState.isHovered
+	]);
+	const displayValue = useMemo(() => {
+		if (value) {
+			const normalized = safeNormalizeHex(value);
+			if (normalized) return normalized.toUpperCase();
+			return value;
+		}
+		return placeholder;
+	}, [value, placeholder]);
+	const normalizedPinnedHex = useMemo(() => pinnedHex.map((hex) => safeNormalizeHex(hex)).filter((hex) => Boolean(hex)), [pinnedHex]);
+	const hasPinnedColors = normalizedPinnedHex.length > 0;
+	const pinnedColorColumns = Math.min(12, normalizedPinnedHex.length);
+	const colorPickerBody = /* @__PURE__ */ jsxs(ColorPickerContainer, {
+		$hasPinnedColors: hasPinnedColors,
+		onClick: (e) => e.stopPropagation(),
+		children: [
+			/* @__PURE__ */ jsx(StyledSaturation, { children: /* @__PURE__ */ jsx(Saturation, {
+				hsva: localHsva,
+				onChange: handleSaturationChange
+			}) }),
+			/* @__PURE__ */ jsx(StyledHue, { children: /* @__PURE__ */ jsx(Hue, {
+				hue: localHsva.h,
+				onChange: handleHueChange,
+				pointer: HuePointer
+			}) }),
+			hasPinnedColors && /* @__PURE__ */ jsx(GridWrapper, {
+				columns: `repeat(${pinnedColorColumns}, 24px)`,
+				gap: 4,
+				children: normalizedPinnedHex.map((normalized, index) => /* @__PURE__ */ jsx(ColorSwatch, {
+					$color: normalized,
+					$isSelected: value === normalized,
+					onClick: () => handleColorSelect(normalized)
+				}, `pinned-${index}-${normalized}`))
+			})
+		]
+	});
+	return /* @__PURE__ */ jsxs(FlexWrapper, {
+		direction: FlexDirection.COLUMN,
+		gap: 4,
+		fillWidth,
+		children: [
+			label && /* @__PURE__ */ jsx(InputLabel, {
+				label,
+				isRequired
+			}),
+			/* @__PURE__ */ jsx(Dropdown, {
+				variant: DropdownVariant.PRIMARY,
+				body: colorPickerBody,
+				isOpen,
+				onClose: handleClose,
+				noPadding: true,
+				fillWidth,
+				children: children ? /* @__PURE__ */ jsx(ColorInputTriggerWrapper, {
+					onClick: (e) => {
+						e.stopPropagation();
+						handleToggle();
+					},
+					onKeyDown: (e) => {
+						if (e.key === "Enter" || e.key === " ") {
+							e.preventDefault();
+							handleToggle();
+						}
+					},
+					onMouseEnter: handleMouseEnter,
+					onMouseLeave: handleMouseLeave,
+					role: "button",
+					tabIndex: isDisabled ? -1 : 0,
+					"aria-haspopup": "dialog",
+					"aria-expanded": isOpen,
+					children
+				}) : /* @__PURE__ */ jsxs(StyledColorInput, {
+					$size: size,
+					$isActive: 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": isOpen,
+					"aria-label": value ? displayValue : placeholder,
+					children: [
+						/* @__PURE__ */ jsxs(FlexWrapper, {
+							alignItems: AlignItems.CENTER,
+							gap: 8,
+							children: [value && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ColorInputPreviewSwatch, { $color: value }), /* @__PURE__ */ jsx(Spacing, { left: 4 })] }), /* @__PURE__ */ jsx(Text, {
+								variant: textVariant,
+								size: COLOR_INPUT_SIZE_TO_TEXT_SIZE[size],
+								isEllipsis: true,
+								cursor: !isDisabled ? "pointer" : "not-allowed",
+								children: displayValue
+							})]
+						}),
+						/* @__PURE__ */ jsx(Spacing, { left: 8 }),
+						/* @__PURE__ */ jsx(Icon, {
+							component: CaretDownIcon,
+							size: COLOR_INPUT_SIZE_TO_ICON_SIZE[size],
+							variant: isOpen || localState.isHovered ? IconVariant.SECONDARY : IconVariant.TERTIARY
+						})
+					]
+				})
+			}),
+			error && /* @__PURE__ */ jsx(Text, {
+				variant: TextVariant.ERROR,
+				size: TextSize.BODY_SM,
+				children: error
+			})
+		]
+	});
+};
+//#endregion
+export { ColorInput as default };

package/dist/inputs/CopyInput.d.ts

@@ -0,0 +1,15 @@
+import { InputSize } from "./Input";
+export interface CopyInputProps {
+    value: string;
+    label?: string;
+    labelTooltip?: string | React.ReactNode;
+    size?: InputSize;
+    width?: number | string;
+    fillWidth?: boolean;
+    isMonospace?: boolean;
+}
+declare const CopyInput: {
+    ({ value, label, labelTooltip, size, width, fillWidth, isMonospace, }: CopyInputProps): import("react").JSX.Element;
+    displayName: string;
+};
+export default CopyInput;

package/dist/inputs/CopyInput.js

@@ -0,0 +1,46 @@
+import FlexWrapper, { AlignItems } from "../containers/FlexWrapper.js";
+import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
+import { InputSize } from "./Input.js";
+import TextInput from "./TextInput.js";
+import { useCallback, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, CopyIcon } from "@phosphor-icons/react";
+//#region src/inputs/CopyInput.tsx
+var INPUT_SIZE_TO_BUTTON_SIZE = {
+	[InputSize.SMALL]: ButtonSize.SMALL,
+	[InputSize.MEDIUM]: ButtonSize.MEDIUM,
+	[InputSize.LARGE]: ButtonSize.LARGE
+};
+var CopyInput = ({ value, label, labelTooltip, size = InputSize.MEDIUM, width, fillWidth, isMonospace = false }) => {
+	const [copied, setCopied] = useState(false);
+	const handleCopy = useCallback(() => {
+		navigator.clipboard.writeText(value).then(() => {
+			setCopied(true);
+			setTimeout(() => setCopied(false), 2e3);
+		});
+	}, [value]);
+	return /* @__PURE__ */ jsxs(FlexWrapper, {
+		alignItems: AlignItems.END,
+		gap: 8,
+		fillWidth,
+		children: [/* @__PURE__ */ jsx(TextInput, {
+			label,
+			labelTooltip,
+			value,
+			onChange: () => {},
+			size,
+			width,
+			fillWidth,
+			isDisabled: true,
+			isMonospace
+		}), /* @__PURE__ */ jsx(Button, {
+			icon: copied ? CheckIcon : CopyIcon,
+			variant: ButtonVariant.SECONDARY,
+			size: INPUT_SIZE_TO_BUTTON_SIZE[size],
+			onClick: handleCopy
+		})]
+	});
+};
+CopyInput.displayName = "CopyInput";
+//#endregion
+export { CopyInput as default };

package/dist/inputs/DateInput.d.ts

@@ -0,0 +1,19 @@
+import { InputSize } from "./Input";
+export interface DateInputProps {
+    label?: string;
+    size?: InputSize;
+    value?: Date | null;
+    placeholder?: string;
+    onChange?: (value: Date | null) => void;
+    width?: number | string;
+    fillWidth?: boolean;
+    isDisabled?: boolean;
+    isRequired?: boolean;
+    error?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    format?: (date: Date) => string;
+}
+export declare function defaultDateFormat(date: Date): string;
+declare const DateInput: ({ label, size, value, placeholder, onChange, width, fillWidth, isDisabled, isRequired, error, minDate, maxDate, format, }: DateInputProps) => import("react").JSX.Element;
+export default DateInput;