@galaxy-io/dls 1.0.3

package/dist/inputs/Input.js

@@ -0,0 +1,205 @@
+import { withTheme } from "../theme/GalaxyTheme.js";
+import { getCssSizeValue } from "../utils/linaria.js";
+import Text, { TextSize, TextVariant } from "../text/Text.js";
+import Tooltip, { TooltipPosition } from "../tooltip/Tooltip.js";
+import RequiredMarker from "../text/RequiredMarker.js";
+import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
+import Icon, { IconVariant } from "../icons/Icon.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 { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/inputs/Input.tsx
+var InputLabel = ({ label, labelTooltip, isRequired }) => {
+	return /* @__PURE__ */ jsxs(FlexWrapper, {
+		alignItems: AlignItems.CENTER,
+		gap: 1,
+		children: [
+			/* @__PURE__ */ jsx(Text, {
+				variant: TextVariant.SECONDARY,
+				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, {})
+				})
+			})
+		]
+	});
+};
+var InputSize = /* @__PURE__ */ function(InputSize) {
+	InputSize["SMALL"] = "SMALL";
+	InputSize["MEDIUM"] = "MEDIUM";
+	InputSize["LARGE"] = "LARGE";
+	return InputSize;
+}({});
+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 }) => theme.color.background.primary;
+var _exp4 = () => ({ theme, $isError }) => {
+	if ($isError) return theme.color.border.error;
+	return theme.color.border.primary;
+};
+var _exp5 = () => ({ theme }) => theme.color.text.primary;
+var _exp6 = () => ({ theme, $size }) => {
+	return match($size).with("SMALL", () => theme.font.sans.size.body_sm).with("MEDIUM", () => theme.font.sans.size.body_md).with("LARGE", () => theme.font.sans.size.body_lg).exhaustive();
+};
+var _exp7 = () => ({ theme, $size }) => {
+	return match($size).with("SMALL", () => theme.font.sans.height.body_sm).with("MEDIUM", () => theme.font.sans.height.body_md).with("LARGE", () => theme.font.sans.height.body_lg).exhaustive();
+};
+var _exp8 = () => ({ theme, $size }) => {
+	return match($size).with("SMALL", () => theme.font.sans.weight.regular).with("MEDIUM", () => theme.font.sans.weight.regular).with("LARGE", () => theme.font.sans.weight.regular).exhaustive();
+};
+var _exp9 = () => ({ theme, $isMonospace }) => $isMonospace ? theme.font.mono.family : theme.font.sans.family;
+var _exp0 = () => ({ $size, $hasLeadingIcon, $hasTrailingAction }) => {
+	const leftPadding = match($size).with("SMALL", () => $hasLeadingIcon ? "24px" : "6px").with("MEDIUM", () => $hasLeadingIcon ? "28px" : "8px").with("LARGE", () => $hasLeadingIcon ? "32px" : "12px").exhaustive();
+	return `0 ${match($size).with("SMALL", () => $hasTrailingAction ? "28px" : "6px").with("MEDIUM", () => $hasTrailingAction ? "32px" : "8px").with("LARGE", () => $hasTrailingAction ? "38px" : "12px").exhaustive()} 0 ${leftPadding}`;
+};
+var _exp1 = () => ({ theme }) => theme.color.border.primary;
+var _exp10 = () => ({ theme }) => theme.color.border.selected;
+var _exp11 = () => ({ theme }) => theme.color.text.tertiary;
+var _exp12 = () => ({ theme }) => theme.color.background.disabled;
+var _exp13 = () => ({ theme }) => theme.color.border.disabled;
+var StyledInput = withTheme(/*#__PURE__*/ styled("input")({
+	name: "StyledInput",
+	class: "s1bxp24n",
+	propsAsIs: false,
+	vars: {
+		"s1bxp24n-0": [_exp()],
+		"s1bxp24n-1": [_exp2()],
+		"s1bxp24n-2": [_exp3()],
+		"s1bxp24n-3": [_exp4()],
+		"s1bxp24n-4": [_exp5()],
+		"s1bxp24n-5": [_exp6()],
+		"s1bxp24n-6": [_exp7()],
+		"s1bxp24n-7": [_exp8()],
+		"s1bxp24n-8": [_exp9()],
+		"s1bxp24n-9": [_exp0()],
+		"s1bxp24n-10": [_exp1()],
+		"s1bxp24n-11": [_exp10()],
+		"s1bxp24n-12": [_exp11()],
+		"s1bxp24n-13": [_exp12()],
+		"s1bxp24n-14": [_exp13()]
+	}
+}));
+var _exp14 = () => ({ $fillWidth, $width }) => $fillWidth ? "100%" : $width ? getCssSizeValue($width) : "auto";
+var InputContainer = /*#__PURE__*/ styled("div")({
+	name: "InputContainer",
+	class: "ixmrsxd",
+	propsAsIs: false,
+	vars: { "ixmrsxd-0": [_exp14()] }
+});
+var _exp15 = () => ({ $size }) => {
+	return match($size).with("SMALL", () => "6px").with("MEDIUM", () => "8px").with("LARGE", () => "12px").exhaustive();
+};
+var LeadingIconWrapper = withTheme(/*#__PURE__*/ styled("div")({
+	name: "LeadingIconWrapper",
+	class: "l8jap54",
+	propsAsIs: false,
+	vars: { "l8jap54-0": [_exp15()] }
+}));
+var _exp16 = () => ({ $size }) => {
+	return match($size).with("SMALL", () => "6px").with("MEDIUM", () => "8px").with("LARGE", () => "12px").exhaustive();
+};
+var _exp17 = () => ({ $isDisabled }) => $isDisabled ? "not-allowed" : "pointer";
+var TrailingActionButton = /*#__PURE__*/ styled("button")({
+	name: "TrailingActionButton",
+	class: "t16cwjje",
+	propsAsIs: false,
+	vars: {
+		"t16cwjje-0": [_exp16()],
+		"t16cwjje-1": [_exp17()]
+	}
+});
+var INPUT_SIZE_TO_ICON_SIZE_MAP = {
+	["SMALL"]: 12,
+	["MEDIUM"]: 14,
+	["LARGE"]: 14
+};
+var Input = forwardRef(({ parse, onChange, size = "MEDIUM", type, value, label, labelTooltip, error, placeholder, leading, trailing, isRequired, isDisabled, autoFocus, min, max, step, onFocus, onBlur, onKeyDown, width, fillWidth, isMonospace }, ref) => {
+	const handleChange = (e) => {
+		onChange(parse(e.target.value));
+	};
+	const hasLeading = !!leading?.icon;
+	const hasTrailing = !!trailing?.icon;
+	return /* @__PURE__ */ jsxs(FlexWrapper, {
+		direction: FlexDirection.COLUMN,
+		gap: 4,
+		fillWidth,
+		children: [
+			label && /* @__PURE__ */ jsx(InputLabel, {
+				label,
+				labelTooltip,
+				isRequired
+			}),
+			/* @__PURE__ */ jsxs(InputContainer, {
+				$width: width,
+				$fillWidth: fillWidth,
+				children: [
+					hasLeading && /* @__PURE__ */ jsx(LeadingIconWrapper, {
+						$size: size,
+						children: /* @__PURE__ */ jsx(Icon, {
+							component: leading.icon,
+							variant: isDisabled ? IconVariant.DISABLED : IconVariant.SECONDARY,
+							size: INPUT_SIZE_TO_ICON_SIZE_MAP[size]
+						})
+					}),
+					/* @__PURE__ */ jsx(StyledInput, {
+						$size: size,
+						$width: width,
+						$fillWidth: fillWidth || hasLeading || hasTrailing,
+						$isError: !!error,
+						$hasLeadingIcon: hasLeading,
+						$hasTrailingAction: hasTrailing,
+						$isMonospace: isMonospace,
+						ref,
+						type,
+						placeholder,
+						value: value?.toString() ?? "",
+						required: isRequired,
+						disabled: isDisabled,
+						onChange: handleChange,
+						autoComplete: "off",
+						autoCorrect: "off",
+						min,
+						max,
+						step,
+						autoFocus,
+						onFocus,
+						onBlur,
+						onKeyDown
+					}),
+					hasTrailing && /* @__PURE__ */ jsx(TrailingActionButton, {
+						onClick: trailing.onClick,
+						$size: size,
+						$isDisabled: isDisabled || trailing.isDisabled,
+						disabled: isDisabled || trailing.isDisabled,
+						children: /* @__PURE__ */ jsx(Icon, {
+							component: trailing.icon,
+							variant: IconVariant.SECONDARY,
+							size: INPUT_SIZE_TO_ICON_SIZE_MAP[size]
+						})
+					})
+				]
+			}),
+			error && /* @__PURE__ */ jsx(Text, {
+				size: TextSize.BODY_SM,
+				variant: TextVariant.ERROR,
+				children: error
+			})
+		]
+	});
+});
+var InputWithDisplayName = Input;
+InputWithDisplayName.displayName = "Input";
+//#endregion
+export { InputLabel, InputSize, StyledInput, Input as default };

package/dist/inputs/MultiSelectInput.d.ts

@@ -0,0 +1,38 @@
+import { type ReactNode } from "react";
+import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
+import { DropdownPosition } from "../dropdown/Dropdown";
+import { SelectInputSize, SelectInputVariant, type SelectInputOption } from "./SelectInput";
+export interface PinnedOptions {
+    id: string;
+    label: string;
+    optionIds: string[];
+}
+export interface MultiSelectInputProps {
+    label?: string;
+    icon?: PhosphorIcon;
+    variant?: SelectInputVariant;
+    size?: SelectInputSize;
+    options: SelectInputOption[];
+    value: SelectInputOption[];
+    placeholder?: string;
+    width?: number | string;
+    fillWidth?: boolean;
+    dropdownWidth?: number | string;
+    dropdownPlacement?: DropdownPosition;
+    onChange?: (value: SelectInputOption[]) => void;
+    isDisabled?: boolean;
+    isRequired?: boolean;
+    isOpen?: boolean;
+    isIconTrailing?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    onReset?: () => void;
+    pinnedOptions?: PinnedOptions[];
+    maxDisplayItems?: number;
+    renderSelectedText?: (selectedOptions: SelectInputOption[], placeholder: string) => string;
+    renderSelectedContent?: (selectedOptions: SelectInputOption[], placeholder: string) => ReactNode;
+    error?: string;
+    onSearch?: (searchTerm: string, options: SelectInputOption[]) => SelectInputOption[];
+    debounceMs?: number;
+}
+declare const MultiSelectInput: ({ label, icon, variant, size, options, value, placeholder, onChange, width, fillWidth, dropdownWidth, dropdownPlacement, isDisabled, isRequired, isOpen: controlledIsOpen, isIconTrailing, onOpenChange, onReset, pinnedOptions, maxDisplayItems, renderSelectedText, renderSelectedContent, error, onSearch, debounceMs, }: MultiSelectInputProps) => import("react").JSX.Element;
+export default MultiSelectInput;