@galaxy-io/dls 1.3.1 → 1.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -7,7 +7,7 @@ import Dropdown, { DropdownVariant } from "../dropdown/Dropdown.js";
7
7
  import GridWrapper from "../containers/GridWrapper.js";
8
8
  import Spacing from "../containers/Spacing.js";
9
9
  import { InputLabel, InputSize } from "./Input.js";
10
- import SelectInput, { SelectInputSize, SelectInputVariant } from "./SelectInput.js";
10
+ import SelectInput, { SelectInputVariant } from "./SelectInput.js";
11
11
  /* empty css */
12
12
  import { styled } from "@linaria/react";
13
13
  import { match } from "ts-pattern";
@@ -379,7 +379,7 @@ var DateInput = ({ label, size = InputSize.MEDIUM, value, placeholder = "Select
379
379
  onMouseDown: (e) => e.stopPropagation(),
380
380
  children: [/* @__PURE__ */ jsx(SelectInput, {
381
381
  variant: SelectInputVariant.SECONDARY,
382
- size: SelectInputSize.SMALL,
382
+ size: InputSize.SMALL,
383
383
  options: monthOptions,
384
384
  value: selectedMonthOption,
385
385
  onChange: handleMonthChange,
@@ -388,7 +388,7 @@ var DateInput = ({ label, size = InputSize.MEDIUM, value, placeholder = "Select
388
388
  width: 120
389
389
  }), /* @__PURE__ */ jsx(SelectInput, {
390
390
  variant: SelectInputVariant.SECONDARY,
391
- size: SelectInputSize.SMALL,
391
+ size: InputSize.SMALL,
392
392
  options: yearOptions,
393
393
  value: selectedYearOption,
394
394
  onChange: handleYearChange,
@@ -1,7 +1,8 @@
1
1
  import { type ReactNode } from "react";
2
2
  import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
3
3
  import { DropdownPosition } from "../dropdown/Dropdown";
4
- import { SelectInputSize, SelectInputVariant, type SelectInputOption } from "./SelectInput";
4
+ import { InputSize } from "./Input";
5
+ import { SelectInputVariant, type SelectInputOption } from "./SelectInput";
5
6
  export interface PinnedOptions {
6
7
  id: string;
7
8
  label: string;
@@ -11,7 +12,7 @@ export interface MultiSelectInputProps {
11
12
  label?: string;
12
13
  icon?: PhosphorIcon;
13
14
  variant?: SelectInputVariant;
14
- size?: SelectInputSize;
15
+ size?: InputSize;
15
16
  options: SelectInputOption[];
16
17
  value: SelectInputOption[];
17
18
  placeholder?: string;
@@ -6,12 +6,12 @@ import Icon, { IconVariant } from "../icons/Icon.js";
6
6
  import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
7
7
  import CheckboxInput, { CheckboxInputVariant } from "./CheckboxInput.js";
8
8
  import Dropdown, { DropdownPosition, DropdownVariant } from "../dropdown/Dropdown.js";
9
- import { InputLabel } from "./Input.js";
9
+ import { InputLabel, InputSize } from "./Input.js";
10
10
  import RotateWithTransition from "../animations/RotateWithTransition.js";
11
11
  import HorizontalDivider from "../dividers/HorizontalDivider.js";
12
12
  import { useElementWidth } from "../hooks/useElementWidth.js";
13
13
  import { useControlledOpenState, useDebouncedValue } from "./hooks.js";
14
- import { SELECT_INPUT_SIZE_TO_ICON_SIZE, SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP, SELECT_INPUT_VARIANT_TO_ICON_VARIANT_MAP, SelectInputSize, SelectInputVariant } from "./SelectInput.js";
14
+ import { SELECT_INPUT_SIZE_TO_ICON_SIZE, SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP, SELECT_INPUT_VARIANT_TO_ICON_VARIANT_MAP, SelectInputVariant } from "./SelectInput.js";
15
15
  /* empty css */
16
16
  import { styled } from "@linaria/react";
17
17
  import { match } from "ts-pattern";
@@ -20,10 +20,10 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
20
20
  import { ArrowCounterClockwiseIcon, CaretDownIcon } from "@phosphor-icons/react";
21
21
  //#region src/inputs/MultiSelectInput.tsx
22
22
  var _exp = () => ({ $size }) => {
23
- return match($size).with(SelectInputSize.SMALL, () => "0 6px").with(SelectInputSize.MEDIUM, () => "0 8px").with(SelectInputSize.LARGE, () => "0 10px").exhaustive();
23
+ return match($size).with(InputSize.SMALL, () => "0 6px").with(InputSize.MEDIUM, () => "0 8px").with(InputSize.LARGE, () => "0 10px").exhaustive();
24
24
  };
25
25
  var _exp2 = () => ({ $size }) => {
26
- return match($size).with(SelectInputSize.SMALL, () => "24px").with(SelectInputSize.MEDIUM, () => "28px").with(SelectInputSize.LARGE, () => "32px").exhaustive();
26
+ return match($size).with(InputSize.SMALL, () => "24px").with(InputSize.MEDIUM, () => "28px").with(InputSize.LARGE, () => "32px").exhaustive();
27
27
  };
28
28
  var _exp3 = () => ({ $fillWidth, $width }) => $fillWidth ? "100%" : $width ? getCssSizeValue($width) : "auto";
29
29
  var _exp4 = () => ({ $isDisabled }) => $isDisabled ? "not-allowed" : "pointer";
@@ -51,14 +51,14 @@ var StyledMultiSelectInput = withTheme(/*#__PURE__*/ styled("div")({
51
51
  }
52
52
  }));
53
53
  var _exp9 = () => ({ $size }) => {
54
- return match($size).with(SelectInputSize.SMALL, () => "24px").with(SelectInputSize.MEDIUM, () => "28px").with(SelectInputSize.LARGE, () => "32px").exhaustive();
54
+ return match($size).with(InputSize.SMALL, () => "24px").with(InputSize.MEDIUM, () => "28px").with(InputSize.LARGE, () => "32px").exhaustive();
55
55
  };
56
56
  var _exp0 = () => ({ theme }) => theme.color.text.primary;
57
57
  var _exp1 = () => ({ theme, $size }) => {
58
- return match($size).with(SelectInputSize.SMALL, () => theme.font.sans.size.body_sm).with(SelectInputSize.MEDIUM, () => theme.font.sans.size.body_md).with(SelectInputSize.LARGE, () => theme.font.sans.size.body_lg).exhaustive();
58
+ return match($size).with(InputSize.SMALL, () => theme.font.sans.size.body_sm).with(InputSize.MEDIUM, () => theme.font.sans.size.body_md).with(InputSize.LARGE, () => theme.font.sans.size.body_lg).exhaustive();
59
59
  };
60
60
  var _exp10 = () => ({ theme, $size }) => {
61
- return match($size).with(SelectInputSize.SMALL, () => theme.font.sans.height.body_sm).with(SelectInputSize.MEDIUM, () => theme.font.sans.height.body_md).with(SelectInputSize.LARGE, () => theme.font.sans.height.body_lg).exhaustive();
61
+ return match($size).with(InputSize.SMALL, () => theme.font.sans.height.body_sm).with(InputSize.MEDIUM, () => theme.font.sans.height.body_md).with(InputSize.LARGE, () => theme.font.sans.height.body_lg).exhaustive();
62
62
  };
63
63
  var _exp11 = () => ({ theme }) => theme.font.sans.weight.medium;
64
64
  var _exp12 = () => ({ theme }) => theme.font.sans.family;
@@ -131,7 +131,7 @@ var SELECT_INPUT_VARIANT_TO_CHECKBOX_INPUT_VARIANT = {
131
131
  [SelectInputVariant.SECONDARY]: CheckboxInputVariant.SECONDARY,
132
132
  [SelectInputVariant.TERTIARY]: CheckboxInputVariant.PRIMARY
133
133
  };
134
- var MultiSelectInput = ({ label, icon, variant = SelectInputVariant.PRIMARY, size = SelectInputSize.MEDIUM, options, value, placeholder = "Select options...", onChange, width, fillWidth, dropdownWidth, dropdownPlacement = DropdownPosition.BOTTOM_START, isDisabled = false, isRequired = false, isOpen: controlledIsOpen, isIconTrailing, onOpenChange, onReset, pinnedOptions = [], maxDisplayItems = 3, renderSelectedText, renderSelectedContent, error, onSearch, debounceMs = 300 }) => {
134
+ var MultiSelectInput = ({ label, icon, variant = SelectInputVariant.PRIMARY, size = InputSize.MEDIUM, options, value, placeholder = "Select options...", onChange, width, fillWidth, dropdownWidth, dropdownPlacement = DropdownPosition.BOTTOM_START, isDisabled = false, isRequired = false, isOpen: controlledIsOpen, isIconTrailing, onOpenChange, onReset, pinnedOptions = [], maxDisplayItems = 3, renderSelectedText, renderSelectedContent, error, onSearch, debounceMs = 300 }) => {
135
135
  const isSearchable = !!onSearch;
136
136
  const [isHovered, setIsHovered] = useState(false);
137
137
  const [searchTerm, setSearchTerm] = useState("");
@@ -1,16 +1,12 @@
1
1
  import { IconVariant } from "../icons/Icon";
2
2
  import { TextSize, TextVariant } from "../text/Text";
3
+ import { InputSize } from "./Input";
3
4
  export declare enum SelectInputVariant {
4
5
  BASE = "BASE",
5
6
  PRIMARY = "PRIMARY",
6
7
  SECONDARY = "SECONDARY",
7
8
  TERTIARY = "TERTIARY"
8
9
  }
9
- export declare enum SelectInputSize {
10
- SMALL = "SMALL",
11
- MEDIUM = "MEDIUM",
12
- LARGE = "LARGE"
13
- }
14
10
  export interface SelectInputOption {
15
11
  id: string;
16
12
  label: string;
@@ -26,7 +22,7 @@ export interface PinnedOption {
26
22
  export interface SelectInputProps {
27
23
  label?: string;
28
24
  variant?: SelectInputVariant;
29
- size?: SelectInputSize;
25
+ size?: InputSize;
30
26
  options: SelectInputOption[];
31
27
  value?: SelectInputOption | null;
32
28
  placeholder?: string;
@@ -45,7 +41,7 @@ export interface SelectInputProps {
45
41
  debounceMs?: number;
46
42
  }
47
43
  export declare const SELECT_INPUT_VARIANT_TO_ICON_VARIANT_MAP: Record<SelectInputVariant, IconVariant>;
48
- export declare const SELECT_INPUT_SIZE_TO_ICON_SIZE: Record<SelectInputSize, number>;
49
- export declare const SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP: Record<SelectInputSize, TextSize>;
44
+ export declare const SELECT_INPUT_SIZE_TO_ICON_SIZE: Record<InputSize, number>;
45
+ export declare const SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP: Record<InputSize, TextSize>;
50
46
  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;
51
47
  export default SelectInput;
@@ -6,7 +6,7 @@ import Icon, { IconVariant, IconWeight } from "../icons/Icon.js";
6
6
  import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
7
7
  import Dropdown, { DropdownVariant } from "../dropdown/Dropdown.js";
8
8
  import Spacing from "../containers/Spacing.js";
9
- import { InputLabel } from "./Input.js";
9
+ import { InputLabel, InputSize } from "./Input.js";
10
10
  import RotateWithTransition from "../animations/RotateWithTransition.js";
11
11
  import HorizontalDivider from "../dividers/HorizontalDivider.js";
12
12
  import { useElementWidth } from "../hooks/useElementWidth.js";
@@ -25,17 +25,11 @@ var SelectInputVariant = /* @__PURE__ */ function(SelectInputVariant) {
25
25
  SelectInputVariant["TERTIARY"] = "TERTIARY";
26
26
  return SelectInputVariant;
27
27
  }({});
28
- var SelectInputSize = /* @__PURE__ */ function(SelectInputSize) {
29
- SelectInputSize["SMALL"] = "SMALL";
30
- SelectInputSize["MEDIUM"] = "MEDIUM";
31
- SelectInputSize["LARGE"] = "LARGE";
32
- return SelectInputSize;
33
- }({});
34
28
  var _exp = () => ({ $size }) => {
35
- return match($size).with("SMALL", () => "0 6px").with("MEDIUM", () => "0 8px").with("LARGE", () => "0 10px").exhaustive();
29
+ return match($size).with(InputSize.SMALL, () => "0 6px").with(InputSize.MEDIUM, () => "0 8px").with(InputSize.LARGE, () => "0 10px").exhaustive();
36
30
  };
37
31
  var _exp2 = () => ({ $size }) => {
38
- return match($size).with("SMALL", () => "24px").with("MEDIUM", () => "28px").with("LARGE", () => "32px").exhaustive();
32
+ return match($size).with(InputSize.SMALL, () => "24px").with(InputSize.MEDIUM, () => "28px").with(InputSize.LARGE, () => "32px").exhaustive();
39
33
  };
40
34
  var _exp3 = () => ({ $fillWidth, $width }) => $fillWidth ? "100%" : $width ? getCssSizeValue($width) : "auto";
41
35
  var _exp4 = () => ({ $isDisabled }) => $isDisabled ? "not-allowed" : "pointer";
@@ -63,14 +57,14 @@ var StyledSelectInput = withTheme(/*#__PURE__*/ styled("div")({
63
57
  }
64
58
  }));
65
59
  var _exp9 = () => ({ $size }) => {
66
- return match($size).with("SMALL", () => "24px").with("MEDIUM", () => "28px").with("LARGE", () => "32px").exhaustive();
60
+ return match($size).with(InputSize.SMALL, () => "24px").with(InputSize.MEDIUM, () => "28px").with(InputSize.LARGE, () => "32px").exhaustive();
67
61
  };
68
62
  var _exp0 = () => ({ theme }) => theme.color.text.primary;
69
63
  var _exp1 = () => ({ theme, $size }) => {
70
- 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();
64
+ return match($size).with(InputSize.SMALL, () => theme.font.sans.size.body_sm).with(InputSize.MEDIUM, () => theme.font.sans.size.body_md).with(InputSize.LARGE, () => theme.font.sans.size.body_lg).exhaustive();
71
65
  };
72
66
  var _exp10 = () => ({ theme, $size }) => {
73
- 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();
67
+ return match($size).with(InputSize.SMALL, () => theme.font.sans.height.body_sm).with(InputSize.MEDIUM, () => theme.font.sans.height.body_md).with(InputSize.LARGE, () => theme.font.sans.height.body_lg).exhaustive();
74
68
  };
75
69
  var _exp11 = () => ({ theme }) => theme.font.sans.weight.medium;
76
70
  var _exp12 = () => ({ theme }) => theme.font.sans.family;
@@ -150,16 +144,16 @@ var SELECT_INPUT_VARIANT_TO_ICON_VARIANT_MAP = {
150
144
  ["TERTIARY"]: IconVariant.PRIMARY
151
145
  };
152
146
  var SELECT_INPUT_SIZE_TO_ICON_SIZE = {
153
- ["SMALL"]: 12,
154
- ["MEDIUM"]: 14,
155
- ["LARGE"]: 16
147
+ [InputSize.SMALL]: 12,
148
+ [InputSize.MEDIUM]: 14,
149
+ [InputSize.LARGE]: 16
156
150
  };
157
151
  var SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP = {
158
- ["SMALL"]: TextSize.BODY_MD,
159
- ["MEDIUM"]: TextSize.BODY_MD,
160
- ["LARGE"]: TextSize.BODY_MD
152
+ [InputSize.SMALL]: TextSize.BODY_MD,
153
+ [InputSize.MEDIUM]: TextSize.BODY_MD,
154
+ [InputSize.LARGE]: TextSize.BODY_MD
161
155
  };
162
- var SelectInput = ({ label, variant = "PRIMARY", size = "MEDIUM", options, value, placeholder = "Select an option...", onChange, width, fillWidth, dropdownWidth, isDisabled = false, isRequired = false, isOpen: controlledIsOpen, onOpenChange, onReset, pinnedOptions = [], error, onSearch, debounceMs = 300 }) => {
156
+ var SelectInput = ({ label, variant = "PRIMARY", size = InputSize.MEDIUM, options, value, placeholder = "Select an option...", onChange, width, fillWidth, dropdownWidth, isDisabled = false, isRequired = false, isOpen: controlledIsOpen, onOpenChange, onReset, pinnedOptions = [], error, onSearch, debounceMs = 300 }) => {
163
157
  const isSearchable = !!onSearch;
164
158
  const [isHovered, setIsHovered] = useState(false);
165
159
  const [searchTerm, setSearchTerm] = useState("");
@@ -525,4 +519,4 @@ var SelectInput = ({ label, variant = "PRIMARY", size = "MEDIUM", options, value
525
519
  });
526
520
  };
527
521
  //#endregion
528
- export { SELECT_INPUT_SIZE_TO_ICON_SIZE, SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP, SELECT_INPUT_VARIANT_TO_ICON_VARIANT_MAP, SelectInputSize, SelectInputVariant, SelectInput as default };
522
+ export { SELECT_INPUT_SIZE_TO_ICON_SIZE, SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP, SELECT_INPUT_VARIANT_TO_ICON_VARIANT_MAP, SelectInputVariant, SelectInput as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@galaxy-io/dls",
3
- "version": "1.3.1",
3
+ "version": "1.3.2",
4
4
  "description": "Galaxy Design Language System",
5
5
  "license": "UNLICENSED",
6
6
  "type": "module",