@galaxy-io/dls 1.0.3

package/dist/inputs/MultiTextInput.js

@@ -0,0 +1,178 @@
+import { withTheme } from "../theme/GalaxyTheme.js";
+import { getCssSizeValue } from "../utils/linaria.js";
+import Text, { TextSize, TextVariant } from "../text/Text.js";
+import FlexWrapper, { FlexDirection } from "../containers/FlexWrapper.js";
+import { InputLabel } from "./Input.js";
+import Chip, { ChipSize } from "../chips/Chip.js";
+/* empty css                         */
+import { styled } from "@linaria/react";
+import { match } from "ts-pattern";
+import { forwardRef, useCallback, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/inputs/MultiTextInput.tsx
+var MultiTextInputSize = /* @__PURE__ */ function(MultiTextInputSize) {
+	MultiTextInputSize["SMALL"] = "SMALL";
+	MultiTextInputSize["MEDIUM"] = "MEDIUM";
+	MultiTextInputSize["LARGE"] = "LARGE";
+	return MultiTextInputSize;
+}({});
+var MultiTextInputVariant = /* @__PURE__ */ function(MultiTextInputVariant) {
+	MultiTextInputVariant["PRIMARY"] = "PRIMARY";
+	MultiTextInputVariant["SECONDARY"] = "SECONDARY";
+	MultiTextInputVariant["TERTIARY"] = "TERTIARY";
+	return MultiTextInputVariant;
+}({});
+var _exp = () => ({ $size }) => {
+	return match($size).with("SMALL", () => "24px").with("MEDIUM", () => "28px").with("LARGE", () => "32px").exhaustive();
+};
+var _exp2 = () => ({ $fillWidth, $width }) => $fillWidth ? "100%" : $width ? getCssSizeValue($width) : "auto";
+var _exp3 = () => ({ theme, $variant }) => match($variant).with("PRIMARY", () => theme.color.background.primary).with("SECONDARY", () => theme.color.background.secondary).with("TERTIARY", () => theme.color.background.tertiary).exhaustive();
+var _exp4 = () => ({ theme, $isError, $isFocused }) => {
+	if ($isError) return theme.color.border.error;
+	if ($isFocused) return theme.color.border.selected;
+	return theme.color.border.primary;
+};
+var _exp5 = () => ({ $size }) => {
+	return match($size).with("SMALL", () => "2px 6px").with("MEDIUM", () => "4px 6px").with("LARGE", () => "4px 8px").exhaustive();
+};
+var _exp6 = () => ({ $isDisabled }) => $isDisabled ? "not-allowed" : "text";
+var _exp7 = () => ({ $isDisabled }) => $isDisabled ? .5 : 1;
+var _exp8 = () => ({ theme, $isFocused }) => $isFocused ? theme.color.border.selected : theme.color.border.primary;
+var MultiTextInputWrapper = withTheme(/*#__PURE__*/ styled("div")({
+	name: "MultiTextInputWrapper",
+	class: "m19ovajc",
+	propsAsIs: false,
+	vars: {
+		"m19ovajc-0": [_exp()],
+		"m19ovajc-1": [_exp2()],
+		"m19ovajc-2": [_exp3()],
+		"m19ovajc-3": [_exp4()],
+		"m19ovajc-4": [_exp5()],
+		"m19ovajc-5": [_exp6()],
+		"m19ovajc-6": [_exp7()],
+		"m19ovajc-7": [_exp8()]
+	}
+}));
+var _exp9 = () => ({ theme }) => theme.color.text.primary;
+var _exp0 = () => ({ theme, $size }) => {
+	return match($size).with("SMALL", () => theme.font.sans.size.body_md).with("MEDIUM", () => theme.font.sans.size.body_md).with("LARGE", () => theme.font.sans.size.body_lg).exhaustive();
+};
+var _exp1 = () => ({ theme, $size }) => {
+	return match($size).with("SMALL", () => theme.font.sans.height.body_md).with("MEDIUM", () => theme.font.sans.height.body_md).with("LARGE", () => theme.font.sans.height.body_lg).exhaustive();
+};
+var _exp10 = () => ({ theme }) => theme.font.sans.weight.regular;
+var _exp11 = () => ({ theme }) => theme.font.sans.family;
+var _exp12 = () => ({ theme }) => theme.color.text.disabled;
+var StyledInput = withTheme(/*#__PURE__*/ styled("input")({
+	name: "StyledInput",
+	class: "s190irv4",
+	propsAsIs: false,
+	vars: {
+		"s190irv4-0": [_exp9()],
+		"s190irv4-1": [_exp0()],
+		"s190irv4-2": [_exp1()],
+		"s190irv4-3": [_exp10()],
+		"s190irv4-4": [_exp11()],
+		"s190irv4-5": [_exp12()]
+	}
+}));
+var MultiTextInput = forwardRef(({ value, onChange, variant = "PRIMARY", size = "MEDIUM", placeholder, label, error, isRequired, isDisabled, autoFocus, width, fillWidth, separator = "," }, ref) => {
+	const [inputValue, setInputValue] = useState("");
+	const [isFocused, setIsFocused] = useState(false);
+	const inputRef = useRef(null);
+	const setRefs = useCallback((node) => {
+		inputRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref && "current" in ref) ref.current = node;
+	}, [ref]);
+	const addValues = useCallback((text) => {
+		const newValues = text.split(separator).map((v) => v.trim()).filter((v) => v.length > 0 && !value.includes(v));
+		if (newValues.length > 0) onChange([...value, ...newValues]);
+	}, [
+		onChange,
+		separator,
+		value
+	]);
+	const handleInputChange = (e) => {
+		const newValue = e.target.value;
+		if (newValue.includes(separator)) {
+			addValues(newValue);
+			setInputValue("");
+		} else setInputValue(newValue);
+	};
+	const handleKeyDown = (e) => {
+		if (e.key === "Enter" && inputValue.trim()) {
+			e.preventDefault();
+			addValues(inputValue);
+			setInputValue("");
+		} else if (e.key === "Backspace" && inputValue === "" && value.length > 0) onChange(value.slice(0, -1));
+	};
+	const handleRemoveChip = (index) => {
+		if (isDisabled) return;
+		const newValue = [...value];
+		newValue.splice(index, 1);
+		onChange(newValue);
+	};
+	const handleContainerClick = () => {
+		if (!isDisabled) inputRef.current?.focus();
+	};
+	const handleFocus = () => {
+		setIsFocused(true);
+	};
+	const handleBlur = () => {
+		setIsFocused(false);
+		if (inputValue.trim()) {
+			addValues(inputValue);
+			setInputValue("");
+		}
+	};
+	return /* @__PURE__ */ jsxs(FlexWrapper, {
+		direction: FlexDirection.COLUMN,
+		gap: 4,
+		fillWidth,
+		children: [
+			label && /* @__PURE__ */ jsx(InputLabel, {
+				label,
+				isRequired
+			}),
+			/* @__PURE__ */ jsxs(MultiTextInputWrapper, {
+				$variant: variant,
+				$size: size,
+				$width: width,
+				$fillWidth: fillWidth,
+				$isError: !!error,
+				$isFocused: isFocused,
+				$isDisabled: isDisabled,
+				onClick: handleContainerClick,
+				"data-disabled": isDisabled,
+				children: [value.map((item, index) => /* @__PURE__ */ jsx(Chip, {
+					label: item,
+					size: ChipSize.SMALL,
+					onDismiss: isDisabled ? void 0 : () => handleRemoveChip(index)
+				}, `${item}-${index}`)), /* @__PURE__ */ jsx(StyledInput, {
+					ref: setRefs,
+					$size: size,
+					type: "text",
+					placeholder: value.length === 0 ? placeholder : void 0,
+					value: inputValue,
+					onChange: handleInputChange,
+					onKeyDown: handleKeyDown,
+					onFocus: handleFocus,
+					onBlur: handleBlur,
+					disabled: isDisabled,
+					autoFocus,
+					autoComplete: "off",
+					autoCorrect: "off"
+				})]
+			}),
+			error && /* @__PURE__ */ jsx(Text, {
+				size: TextSize.BODY_SM,
+				variant: TextVariant.ERROR,
+				children: error
+			})
+		]
+	});
+});
+MultiTextInput.displayName = "MultiTextInput";
+//#endregion
+export { MultiTextInputSize, MultiTextInputVariant, MultiTextInput as default };

package/dist/inputs/NumberInput.d.ts

@@ -0,0 +1,4 @@
+import { type InputProps } from "./Input";
+type NumberInputProps = Omit<InputProps<number>, "type" | "parse">;
+declare const NumberInput: ({ value, placeholder, label, leading, trailing, isRequired, isDisabled, min, max, step, onChange, width, fillWidth, }: NumberInputProps) => import("react").JSX.Element;
+export default NumberInput;

package/dist/inputs/NumberInput.js

@@ -0,0 +1,34 @@
+import Input from "./Input.js";
+import { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/inputs/NumberInput.tsx
+var NumberInput = ({ value, placeholder, label, leading, trailing, isRequired, isDisabled, min, max, step, onChange, width, fillWidth }) => {
+	return /* @__PURE__ */ jsx(Input, {
+		type: "number",
+		value,
+		placeholder,
+		label,
+		leading,
+		trailing,
+		isRequired,
+		isDisabled,
+		min,
+		max,
+		step,
+		onChange: useCallback((newValue) => {
+			if (newValue === null) return min ?? void 0;
+			if (min !== void 0 && newValue < min) return min;
+			if (max !== void 0 && newValue > max) return max;
+			onChange(newValue);
+		}, [
+			min,
+			max,
+			onChange
+		]),
+		parse: Number,
+		width,
+		fillWidth
+	});
+};
+//#endregion
+export { NumberInput as default };

package/dist/inputs/PasswordInput.d.ts

@@ -0,0 +1,4 @@
+import { type InputProps } from "./Input";
+type PasswordInputProps = Omit<InputProps<string>, "type" | "parse" | "action">;
+declare const PasswordInput: import("react").ForwardRefExoticComponent<PasswordInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export default PasswordInput;

package/dist/inputs/PasswordInput.js

@@ -0,0 +1,40 @@
+import Input, { InputSize } from "./Input.js";
+import { forwardRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { EyeIcon, EyeSlashIcon } from "@phosphor-icons/react";
+//#region src/inputs/PasswordInput.tsx
+var DEFAULT_STATE = { showPassword: false };
+var PasswordInput = forwardRef(({ size = InputSize.MEDIUM, value, placeholder, label, leading, error, isRequired, isDisabled, autoFocus, onChange, width, fillWidth, onKeyDown, onBlur, onFocus }, ref) => {
+	const [state, setState] = useState(DEFAULT_STATE);
+	return /* @__PURE__ */ jsx(Input, {
+		ref,
+		parse: String,
+		onChange,
+		size,
+		type: state.showPassword ? "text" : "password",
+		value,
+		placeholder,
+		label,
+		leading,
+		trailing: {
+			icon: state.showPassword ? EyeSlashIcon : EyeIcon,
+			onClick: () => setState({
+				...state,
+				showPassword: !state.showPassword
+			}),
+			isDisabled
+		},
+		error,
+		isRequired,
+		isDisabled,
+		autoFocus,
+		onKeyDown,
+		onBlur,
+		onFocus,
+		width,
+		fillWidth
+	});
+});
+PasswordInput.displayName = "PasswordInput";
+//#endregion
+export { PasswordInput as default };

package/dist/inputs/RadioInput.d.ts

@@ -0,0 +1,20 @@
+export declare enum RadioInputVariant {
+    PRIMARY = "PRIMARY",
+    SECONDARY = "SECONDARY"
+}
+export declare enum RadioInputSize {
+    SMALL = "SMALL",
+    MEDIUM = "MEDIUM"
+}
+export interface RadioInputProps {
+    variant?: RadioInputVariant;
+    size?: RadioInputSize;
+    isSelected: boolean;
+    label?: string;
+    labelTooltip?: string | React.ReactNode;
+    isRequired?: boolean;
+    isDisabled?: boolean;
+    onChange: (selected: boolean) => void;
+}
+declare const RadioInput: ({ variant, size, isSelected, label, labelTooltip, isRequired, isDisabled, onChange, }: RadioInputProps) => import("react").JSX.Element;
+export default RadioInput;

package/dist/inputs/RadioInput.js

@@ -0,0 +1,108 @@
+import { withTheme } from "../theme/GalaxyTheme.js";
+import Text, { TextVariant } from "../text/Text.js";
+import Tooltip, { TooltipPosition } from "../tooltip/Tooltip.js";
+import RequiredMarker from "../text/RequiredMarker.js";
+import FlexWrapper, { AlignItems } from "../containers/FlexWrapper.js";
+import Spacing from "../containers/Spacing.js";
+import HelpIcon from "../icons/HelpIcon.js";
+/* empty css                     */
+import { styled } from "@linaria/react";
+import { match } from "ts-pattern";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/inputs/RadioInput.tsx
+var RadioInputVariant = /* @__PURE__ */ function(RadioInputVariant) {
+	RadioInputVariant["PRIMARY"] = "PRIMARY";
+	RadioInputVariant["SECONDARY"] = "SECONDARY";
+	return RadioInputVariant;
+}({});
+var RadioInputSize = /* @__PURE__ */ function(RadioInputSize) {
+	RadioInputSize["SMALL"] = "SMALL";
+	RadioInputSize["MEDIUM"] = "MEDIUM";
+	return RadioInputSize;
+}({});
+var _exp = () => ({ $isDisabled }) => $isDisabled ? "not-allowed" : "pointer";
+var _exp2 = () => ({ $isDisabled }) => $isDisabled ? .5 : 1;
+var RadioContainer = /*#__PURE__*/ styled("div")({
+	name: "RadioContainer",
+	class: "r1pzr59l",
+	propsAsIs: false,
+	vars: {
+		"r1pzr59l-0": [_exp()],
+		"r1pzr59l-1": [_exp2()]
+	}
+});
+var _exp4 = () => ({ $size }) => {
+	return match($size).with("SMALL", () => "12px").with("MEDIUM", () => "16px").exhaustive();
+};
+var _exp5 = () => ({ theme }) => theme.color.border.primary;
+var _exp6 = () => ({ theme, $isSelected }) => $isSelected ? theme.color.background.primaryAlt : theme.color.background.tertiary;
+var _exp7 = () => ({ theme, $isDisabled, $variant }) => {
+	return match($variant).with("PRIMARY", () => $isDisabled ? theme.color.border.primary : theme.color.border.primary).with("SECONDARY", () => $isDisabled ? theme.color.border.primary : theme.color.border.primary).exhaustive();
+};
+var RadioWrapper = withTheme(/*#__PURE__*/ styled("div")({
+	name: "RadioWrapper",
+	class: "r1mwwvky",
+	propsAsIs: false,
+	vars: {
+		"r1mwwvky-0": [_exp4()],
+		"r1mwwvky-1": [_exp5()],
+		"r1mwwvky-2": [_exp6()],
+		"r1mwwvky-3": [_exp7()]
+	}
+}));
+var _exp9 = () => ({ $size }) => {
+	return match($size).with("SMALL", () => "6px").with("MEDIUM", () => "8px").exhaustive();
+};
+var _exp0 = () => ({ theme }) => theme.color.background.primary;
+var _exp1 = () => ({ $isSelected }) => $isSelected ? 1 : 0;
+var _exp10 = () => ({ $isSelected }) => $isSelected ? "scale(1)" : "scale(0)";
+var RadioDot = withTheme(/*#__PURE__*/ styled("div")({
+	name: "RadioDot",
+	class: "r137y8ev",
+	propsAsIs: false,
+	vars: {
+		"r137y8ev-0": [_exp9()],
+		"r137y8ev-1": [_exp0()],
+		"r137y8ev-2": [_exp1()],
+		"r137y8ev-3": [_exp10()]
+	}
+}));
+var RadioInput = ({ variant = "PRIMARY", size = "MEDIUM", isSelected, label, labelTooltip, isRequired = false, isDisabled = false, onChange }) => {
+	const handleClick = () => {
+		if (!isDisabled) onChange(!isSelected);
+	};
+	return /* @__PURE__ */ jsxs(RadioContainer, {
+		$isDisabled: isDisabled,
+		onClick: handleClick,
+		children: [/* @__PURE__ */ jsx(RadioWrapper, {
+			$variant: variant,
+			$size: size,
+			$isSelected: isSelected,
+			$isDisabled: isDisabled,
+			children: /* @__PURE__ */ jsx(RadioDot, {
+				$size: size,
+				$isSelected: isSelected
+			})
+		}), label && /* @__PURE__ */ jsxs(FlexWrapper, {
+			alignItems: AlignItems.CENTER,
+			gap: 1,
+			children: [
+				/* @__PURE__ */ jsx(Text, {
+					variant: TextVariant.PRIMARY,
+					children: label
+				}),
+				isRequired && /* @__PURE__ */ jsx(RequiredMarker, {}),
+				labelTooltip && /* @__PURE__ */ jsx(Spacing, {
+					left: 4,
+					children: /* @__PURE__ */ jsx(Tooltip, {
+						body: labelTooltip,
+						position: TooltipPosition.RIGHT,
+						children: /* @__PURE__ */ jsx(HelpIcon, {})
+					})
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { RadioInputSize, RadioInputVariant, RadioInput as default };

package/dist/inputs/SelectInput.d.ts

@@ -0,0 +1,51 @@
+import { IconVariant } from "../icons/Icon";
+import { TextSize, TextVariant } from "../text/Text";
+export declare enum SelectInputVariant {
+    BASE = "BASE",
+    PRIMARY = "PRIMARY",
+    SECONDARY = "SECONDARY",
+    TERTIARY = "TERTIARY"
+}
+export declare enum SelectInputSize {
+    SMALL = "SMALL",
+    MEDIUM = "MEDIUM",
+    LARGE = "LARGE"
+}
+export interface SelectInputOption {
+    id: string;
+    label: string;
+    value: unknown;
+    icon?: React.ReactNode;
+    variant?: TextVariant;
+}
+export interface PinnedOption {
+    id: string;
+    label: string;
+    optionId: string;
+}
+export interface SelectInputProps {
+    label?: string;
+    variant?: SelectInputVariant;
+    size?: SelectInputSize;
+    options: SelectInputOption[];
+    value?: SelectInputOption | null;
+    placeholder?: string;
+    onChange?: (value: SelectInputOption) => void;
+    width?: number | string;
+    fillWidth?: boolean;
+    dropdownWidth?: number | string;
+    isDisabled?: boolean;
+    isRequired?: boolean;
+    isOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    onReset?: () => void;
+    pinnedOptions?: PinnedOption[];
+    error?: string;
+    onSearch?: (searchTerm: string, options: SelectInputOption[]) => SelectInputOption[];
+    debounceMs?: number;
+}
+export declare const SELECT_INPUT_VARIANT_TO_ICON_VARIANT_MAP: Record<SelectInputVariant, IconVariant>;
+export declare const SELECT_INPUT_SIZE_TO_ICON_SIZE: Record<SelectInputSize, number>;
+export declare const SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP: Record<SelectInputSize, TextSize>;
+declare const SelectInput: ({ label, variant, size, options, value, placeholder, onChange, width, fillWidth, dropdownWidth, isDisabled, isRequired, isOpen: controlledIsOpen, onOpenChange, onReset, pinnedOptions, error, onSearch, debounceMs, }: SelectInputProps) => import("react").JSX.Element;
+export default SelectInput;