@ultraviolet/ui 3.3.0 → 3.4.0

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.
Files changed (35) hide show
  1. package/dist/components/ActionBar/styles.css.js +0 -1
  2. package/dist/components/Avatar/styles.css.js +1 -0
  3. package/dist/components/Avatar/variables.css.js +0 -1
  4. package/dist/components/Label/index.d.ts +2 -1
  5. package/dist/components/Label/index.d.ts.map +1 -1
  6. package/dist/components/Label/index.js +3 -2
  7. package/dist/components/Popup/styles.css.js +1 -0
  8. package/dist/components/Popup/variables.css.js +0 -1
  9. package/dist/components/ProgressBar/styles.css.js +0 -1
  10. package/dist/components/ProgressBar/variables.css.js +1 -0
  11. package/dist/components/SelectInput/components/Dropdown.d.ts.map +1 -1
  12. package/dist/components/SelectInput/components/Dropdown.js +19 -13
  13. package/dist/components/SelectInput/components/dropdown.css.d.ts +1 -0
  14. package/dist/components/SelectInput/components/dropdown.css.d.ts.map +1 -1
  15. package/dist/components/SelectInput/components/dropdown.css.js +9 -9
  16. package/dist/components/Text/style.css.js +1 -0
  17. package/dist/components/Text/variables.css.js +0 -1
  18. package/dist/components/compositions/OptionSelector/RevealOnHover.d.ts +6 -0
  19. package/dist/components/compositions/OptionSelector/RevealOnHover.d.ts.map +1 -0
  20. package/dist/components/compositions/OptionSelector/RevealOnHover.js +12 -0
  21. package/dist/components/compositions/OptionSelector/__mock__/resources.d.ts +35 -0
  22. package/dist/components/compositions/OptionSelector/__mock__/resources.d.ts.map +1 -0
  23. package/dist/components/compositions/OptionSelector/index.d.ts +7 -0
  24. package/dist/components/compositions/OptionSelector/index.d.ts.map +1 -0
  25. package/dist/components/compositions/OptionSelector/index.js +149 -0
  26. package/dist/components/compositions/OptionSelector/styles.css.d.ts +8 -0
  27. package/dist/components/compositions/OptionSelector/styles.css.d.ts.map +1 -0
  28. package/dist/components/compositions/OptionSelector/styles.css.js +19 -0
  29. package/dist/components/compositions/OptionSelector/types.d.ts +37 -0
  30. package/dist/components/compositions/OptionSelector/types.d.ts.map +1 -0
  31. package/dist/components/compositions/index.d.ts +2 -0
  32. package/dist/components/compositions/index.d.ts.map +1 -0
  33. package/dist/components/compositions/index.js +4 -0
  34. package/dist/ui.css +1 -1
  35. package/package.json +9 -4
@@ -1,4 +1,3 @@
1
- /* empty css */
2
1
  /* empty css */
3
2
  /* empty css */
4
3
  var rankActionBar = "var(--uv_1p607tg0)";
@@ -1,3 +1,4 @@
1
+ /* empty css */
1
2
  /* empty css */
2
3
  import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
3
4
  var containerAvatar = createRuntimeFn({ defaultClassName: "uv_19x8y1k0", variantClassNames: { shape: { circle: "uv_19x8y1k1", square: "uv_19x8y1k2" }, size: { large: "uv_19x8y1k3", medium: "uv_19x8y1k4", small: "uv_19x8y1k5", xsmall: "uv_19x8y1k6" }, sentiment: { primary: "uv_19x8y1k7", neutral: "uv_19x8y1k8" } }, defaultVariants: {}, compoundVariants: [[{ size: "large", shape: "square" }, "uv_19x8y1k9"], [{ size: "medium", shape: "square" }, "uv_19x8y1ka"], [{ size: "small", shape: "square" }, "uv_19x8y1kb"], [{ size: "xsmall", shape: "square" }, "uv_19x8y1kc"]] });
@@ -1,4 +1,3 @@
1
- /* empty css */
2
1
  var finalSizeAvatar = "var(--uv_18799yd0)";
3
2
  var finalColorAvatar = "var(--uv_18799yd1)";
4
3
  var halvedColorAvatar = "var(--uv_18799yd2)";
@@ -14,10 +14,11 @@ type LabelProps = {
14
14
  sentiment?: ComponentProps<typeof Text>['sentiment'];
15
15
  disabled?: boolean;
16
16
  style?: CSSProperties;
17
+ className?: string;
17
18
  };
18
19
  /**
19
20
  * Label is used inside all of our input components, but it can be used outside for design purposes
20
21
  */
21
- export declare const Label: ({ as, children, labelDescription, required, size, htmlFor, id, sentiment, disabled, style, }: LabelProps) => import("react/jsx-runtime").JSX.Element;
22
+ export declare const Label: ({ as, children, labelDescription, required, size, htmlFor, id, sentiment, disabled, style, className, }: LabelProps) => import("react/jsx-runtime").JSX.Element;
22
23
  export {};
23
24
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Label/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGrE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAqE9B,KAAK,UAAU,GAAG;IAChB;;OAEG;IACH,EAAE,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,WAAW,CAAC,CAAA;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,KAAK,GAAI,8FAWnB,UAAU,4CAoCV,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Label/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGrE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAqE9B,KAAK,UAAU,GAAG;IAChB;;OAEG;IACH,EAAE,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,WAAW,CAAC,CAAA;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,KAAK,GAAI,yGAYnB,UAAU,4CAoCV,CAAA"}
@@ -77,8 +77,9 @@ const Label = ({
77
77
  id,
78
78
  sentiment = "neutral",
79
79
  disabled,
80
- style
81
- }) => labelDescription ? /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: "1", children: [
80
+ style,
81
+ className
82
+ }) => labelDescription ? /* @__PURE__ */ jsxs(Stack, { alignItems: "center", className, direction: "row", gap: "1", children: [
82
83
  /* @__PURE__ */ jsx(
83
84
  LabelRequiredOrNot,
84
85
  {
@@ -1,3 +1,4 @@
1
+ /* empty css */
1
2
  /* empty css */
2
3
  import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
3
4
  var containerPopup = createRuntimeFn({ defaultClassName: "uv_w40vpo2", variantClassNames: { hasMaxHeight: { true: "uv_w40vpo3" } }, defaultVariants: {}, compoundVariants: [] });
@@ -1,4 +1,3 @@
1
- /* empty css */
2
1
  var arrowTop = "var(--uv_ozfz3c0)";
3
2
  var arrowLeft = "var(--uv_ozfz3c1)";
4
3
  var arrowTransform = "var(--uv_ozfz3c2)";
@@ -1,4 +1,3 @@
1
- /* empty css */
2
1
  /* empty css */
3
2
  var progressContainer = "uv_1pgcd801";
4
3
  var customText = "uv_1pgcd802";
@@ -1,3 +1,4 @@
1
+ /* empty css */
1
2
  var percentageValue = "var(--uv_1taqqht0)";
2
3
  export {
3
4
  percentageValue
@@ -1 +1 @@
1
- {"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectInput/components/Dropdown.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAEV,cAAc,EAId,SAAS,EACT,SAAS,EAEV,MAAM,OAAO,CAAA;AAYd,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AA0BnC,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,EAAE,SAAS,CAAA;IACnB,UAAU,EAAE,SAAS,CAAA;IACrB,oBAAoB,EAAE,KAAK,GAAG,QAAQ,CAAA;IACtC,UAAU,EAAE,OAAO,CAAA;IACnB,WAAW,EAAE,MAAM,CAAA;IACnB,MAAM,CAAC,EAAE,CAAC,CAAC,aAAa,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC,GAAG,SAAS,CAAA;IAC/D,SAAS,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC3C,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,qBAAqB,EAAE,MAAM,GAAG,OAAO,CAAA;IACvC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAClC,aAAa,CAAC,EAAE,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC,OAAO,CAAC,CAAA;IACrD,YAAY,CAAC,EAAE,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC,cAAc,CAAC,CAAA;CAC5D,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,OAAO,CAAA;IAChB,UAAU,EAAE,SAAS,CAAA;IACrB,oBAAoB,EAAE,KAAK,GAAG,QAAQ,CAAA;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,qBAAqB,EAAE,MAAM,GAAG,OAAO,CAAA;IACvC,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAA;IACjC,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAikBD,eAAO,MAAM,QAAQ,GAAI,gLAetB,aAAa,4CAuMf,CAAA"}
1
+ {"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectInput/components/Dropdown.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAEV,cAAc,EAId,SAAS,EACT,SAAS,EAEV,MAAM,OAAO,CAAA;AAYd,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AA0BnC,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,EAAE,SAAS,CAAA;IACnB,UAAU,EAAE,SAAS,CAAA;IACrB,oBAAoB,EAAE,KAAK,GAAG,QAAQ,CAAA;IACtC,UAAU,EAAE,OAAO,CAAA;IACnB,WAAW,EAAE,MAAM,CAAA;IACnB,MAAM,CAAC,EAAE,CAAC,CAAC,aAAa,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC,GAAG,SAAS,CAAA;IAC/D,SAAS,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC3C,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,qBAAqB,EAAE,MAAM,GAAG,OAAO,CAAA;IACvC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAClC,aAAa,CAAC,EAAE,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC,OAAO,CAAC,CAAA;IACrD,YAAY,CAAC,EAAE,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC,cAAc,CAAC,CAAA;CAC5D,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,OAAO,CAAA;IAChB,UAAU,EAAE,SAAS,CAAA;IACrB,oBAAoB,EAAE,KAAK,GAAG,QAAQ,CAAA;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,qBAAqB,EAAE,MAAM,GAAG,OAAO,CAAA;IACvC,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAA;IACjC,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAukBD,eAAO,MAAM,QAAQ,GAAI,gLAetB,aAAa,4CAuMf,CAAA"}
@@ -3,7 +3,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
3
3
  import { useTheme } from "@ultraviolet/themes";
4
4
  import { cn } from "@ultraviolet/utils";
5
5
  import { assignInlineVars } from "@vanilla-extract/dynamic";
6
- import { useState, useRef, use, useCallback, useLayoutEffect, useEffect, useMemo } from "react";
6
+ import { useState, useRef, useContext, useCallback, useLayoutEffect, useEffect, useMemo } from "react";
7
7
  import { Checkbox } from "../../Checkbox/index.js";
8
8
  import { ModalContext } from "../../Modal/ModalProvider.js";
9
9
  import { Popup } from "../../Popup/index.js";
@@ -13,7 +13,7 @@ import { Text } from "../../Text/index.js";
13
13
  import { useSelectInput } from "../SelectInputProvider.js";
14
14
  import { INPUT_SIZE_HEIGHT } from "../types.js";
15
15
  import { DisplayOption } from "./DropdownOption.js";
16
- import { footer, dropdown, dropdownWidth, dropdownEmptyState, dropdownContainer, dropdownItem, dropdownCheckbox, dropdownGroupWrapper, dropdownGroupSelectable, dropdownGroup, dropdownLoadMore, dropdownContainerUnGrouped } from "./dropdown.css.js";
16
+ import { footer, dropdown, dropdownWidth, dropdownEmptyState, dropdownContainer, dropdownCheckbox, dropdownItem, dropdownGroupWrapper, dropdownGroupSelectable, dropdownGroup, dropdownLoadMore, dropdownContainerUnGrouped } from "./dropdown.css.js";
17
17
  import { SearchBarDropdown } from "./SearchBarDropdown.js";
18
18
  const DROPDOWN_MAX_HEIGHT = 256;
19
19
  const NON_SEARCHABLE_KEYS = [
@@ -208,7 +208,9 @@ const CreateDropdown = ({
208
208
  "aria-disabled": false,
209
209
  "aria-label": "select-all",
210
210
  "aria-selected": selectedData.allSelected,
211
- className: dropdownItem({ selected: selectedData.allSelected }),
211
+ className: cn(
212
+ dropdownItem({ selected: selectedData.allSelected })
213
+ ),
212
214
  "data-testid": "select-all",
213
215
  id: "select-all",
214
216
  onClick: selectAllOptions,
@@ -311,10 +313,12 @@ const CreateDropdown = ({
311
313
  "aria-disabled": !!option.disabled,
312
314
  "aria-label": option.value,
313
315
  "aria-selected": selectedData.selectedValues.includes(option.value) && !option.disabled,
314
- className: dropdownItem({
315
- disabled: !!option.disabled,
316
- selected: selectedData.selectedValues.includes(option.value) && !option.disabled
317
- }),
316
+ className: cn(
317
+ dropdownItem({
318
+ disabled: !!option.disabled,
319
+ selected: selectedData.selectedValues.includes(option.value) && !option.disabled
320
+ })
321
+ ),
318
322
  "data-testid": `option-${option.value}`,
319
323
  id: `option-${indexOption}`,
320
324
  onClick: (event) => {
@@ -396,7 +400,7 @@ const CreateDropdown = ({
396
400
  "aria-disabled": false,
397
401
  "aria-label": "select-all",
398
402
  "aria-selected": selectedData.allSelected,
399
- className: dropdownItem({ selected: selectedData.allSelected }),
403
+ className: cn(dropdownItem({ selected: selectedData.allSelected })),
400
404
  "data-testid": "select-all",
401
405
  onClick: selectAllOptions,
402
406
  onKeyDown: (event) => [" ", "Enter"].includes(event.key) ? selectAllOptions() : null,
@@ -437,10 +441,12 @@ const CreateDropdown = ({
437
441
  "aria-disabled": !!option.disabled,
438
442
  "aria-label": option.value,
439
443
  "aria-selected": selectedData.selectedValues.includes(option.value) && !option.disabled,
440
- className: dropdownItem({
441
- disabled: !!option.disabled,
442
- selected: selectedData.selectedValues.includes(option.value) && !option.disabled
443
- }),
444
+ className: cn(
445
+ dropdownItem({
446
+ disabled: !!option.disabled,
447
+ selected: selectedData.selectedValues.includes(option.value) && !option.disabled
448
+ })
449
+ ),
444
450
  "data-testid": `option-${option.value}`,
445
451
  id: `option-${index}`,
446
452
  onClick: (event) => {
@@ -538,7 +544,7 @@ const Dropdown = ({
538
544
  const [maxWidth, setWidth] = useState(
539
545
  refSelect.current?.offsetWidth ?? "100%"
540
546
  );
541
- const modalContext = use(ModalContext);
547
+ const modalContext = useContext(ModalContext);
542
548
  const resizeDropdown = useCallback(() => {
543
549
  if (refSelect.current && refSelect.current.getBoundingClientRect().width > 0 && refSelect.current.getBoundingClientRect().width !== maxWidth) {
544
550
  setWidth(refSelect.current.getBoundingClientRect().width);
@@ -5,6 +5,7 @@ export declare const dropdownContainerUnGrouped: string;
5
5
  export declare const dropdownGroup: string;
6
6
  export declare const dropdownGroupSelectable: string;
7
7
  export declare const dropdownGroupWrapper: string;
8
+ export declare const dropdownItemBase: string;
8
9
  export declare const dropdownItem: import("@vanilla-extract/recipes").RuntimeFn<{
9
10
  selected: {
10
11
  true: {
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown.css.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectInput/components/dropdown.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,aAAa,oBAAc,CAAA;AAExC,eAAO,MAAM,QAAQ,QAQnB,CAAA;AAEF,eAAO,MAAM,iBAAiB,QAK5B,CAAA;AAEF,eAAO,MAAM,0BAA0B,QAErC,CAAA;AAEF,eAAO,MAAM,aAAa,QAmBxB,CAAA;AAEF,eAAO,MAAM,uBAAuB,QAQlC,CAAA;AAEF,eAAO,MAAM,oBAAoB,QAG/B,CAAA;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;EA2CvB,CAAA;AAEF,eAAO,MAAM,MAAM,QAKjB,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAM3B,CAAA;AAEF,eAAO,MAAM,kBAAkB,QAAqC,CAAA;AAEpE,eAAO,MAAM,gBAAgB,QAAyC,CAAA;AAEtE,eAAO,MAAM,YAAY,QAEvB,CAAA;AAEF,eAAO,MAAM,oBAAoB,QAM/B,CAAA;AAEF,eAAO,MAAM,qBAAqB,QAAgC,CAAA;AAElE,eAAO,MAAM,SAAS,QAGpB,CAAA"}
1
+ {"version":3,"file":"dropdown.css.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectInput/components/dropdown.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,aAAa,oBAAc,CAAA;AAExC,eAAO,MAAM,QAAQ,QASnB,CAAA;AAEF,eAAO,MAAM,iBAAiB,QAK5B,CAAA;AAEF,eAAO,MAAM,0BAA0B,QAErC,CAAA;AAEF,eAAO,MAAM,aAAa,QAmBxB,CAAA;AAEF,eAAO,MAAM,uBAAuB,QAQlC,CAAA;AAEF,eAAO,MAAM,oBAAoB,QAG/B,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAgB3B,CAAA;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;EA2BvB,CAAA;AAEF,eAAO,MAAM,MAAM,QAKjB,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAM3B,CAAA;AAEF,eAAO,MAAM,kBAAkB,QAAqC,CAAA;AAEpE,eAAO,MAAM,gBAAgB,QAAyC,CAAA;AAEtE,eAAO,MAAM,YAAY,QAEvB,CAAA;AAEF,eAAO,MAAM,oBAAoB,QAM/B,CAAA;AAEF,eAAO,MAAM,qBAAqB,QAAgC,CAAA;AAElE,eAAO,MAAM,SAAS,QAGpB,CAAA"}
@@ -7,15 +7,15 @@ var dropdownContainerUnGrouped = "uv_5kpm8k3";
7
7
  var dropdownGroup = "uv_5kpm8k4";
8
8
  var dropdownGroupSelectable = "uv_5kpm8k5";
9
9
  var dropdownGroupWrapper = "uv_5kpm8k6";
10
- var dropdownItem = createRuntimeFn({ defaultClassName: "uv_5kpm8k7", variantClassNames: { selected: { true: "uv_5kpm8k8" }, disabled: { true: "uv_5kpm8k9" } }, defaultVariants: { disabled: false, selected: false }, compoundVariants: [] });
11
- var footer = "uv_5kpm8ka";
12
- var dropdownCheckbox = "uv_5kpm8kb";
13
- var dropdownEmptyState = "uv_5kpm8kc";
14
- var dropdownLoadMore = "uv_5kpm8kd";
15
- var dropdownInfo = "uv_5kpm8ke";
16
- var dropdownInfoTextItem = "uv_5kpm8kf";
17
- var dropdownInfoContainer = "uv_5kpm8kg";
18
- var searchBar = "uv_5kpm8kh";
10
+ var dropdownItem = createRuntimeFn({ defaultClassName: "uv_5kpm8k8 uv_5kpm8k7", variantClassNames: { selected: { true: "uv_5kpm8k9" }, disabled: { true: "uv_5kpm8ka" } }, defaultVariants: { disabled: false, selected: false }, compoundVariants: [] });
11
+ var footer = "uv_5kpm8kb";
12
+ var dropdownCheckbox = "uv_5kpm8kc";
13
+ var dropdownEmptyState = "uv_5kpm8kd";
14
+ var dropdownLoadMore = "uv_5kpm8ke";
15
+ var dropdownInfo = "uv_5kpm8kf";
16
+ var dropdownInfoTextItem = "uv_5kpm8kg";
17
+ var dropdownInfoContainer = "uv_5kpm8kh";
18
+ var searchBar = "uv_5kpm8ki";
19
19
  export {
20
20
  dropdown,
21
21
  dropdownCheckbox,
@@ -1,3 +1,4 @@
1
+ /* empty css */
1
2
  /* empty css */
2
3
  import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
3
4
  var text = createRuntimeFn({ defaultClassName: "uv_m4c9ow0", variantClassNames: { strikeThrough: { true: "uv_m4c9ow1", false: "uv_m4c9ow2" }, italic: { true: "uv_m4c9ow3", false: "uv_m4c9ow4" }, underline: { true: "uv_m4c9ow5", false: "uv_m4c9ow6" }, oneLine: { true: "uv_m4c9ow7", false: "uv_m4c9ow8" }, sentiment: { primary: "uv_m4c9ow9", secondary: "uv_m4c9owa", neutral: "uv_m4c9owb", success: "uv_m4c9owc", danger: "uv_m4c9owd", warning: "uv_m4c9owe", info: "uv_m4c9owf", black: "uv_m4c9owg", white: "uv_m4c9owh" }, prominence: { "default": "uv_m4c9owi", strong: "uv_m4c9owj", stronger: "uv_m4c9owk", weak: "uv_m4c9owl" }, variant: { body: "uv_m4c9owm", bodySmall: "uv_m4c9own", bodySmallStrong: "uv_m4c9owo", bodySmallStronger: "uv_m4c9owp", bodyStrong: "uv_m4c9owq", bodyStronger: "uv_m4c9owr", caption: "uv_m4c9ows", captionSmall: "uv_m4c9owt", captionSmallStrong: "uv_m4c9owu", captionSmallStronger: "uv_m4c9owv", captionStrong: "uv_m4c9oww", captionStronger: "uv_m4c9owx", code: "uv_m4c9owy", codeStrong: "uv_m4c9owz", codeStronger: "uv_m4c9ow10", heading: "uv_m4c9ow11", headingLarge: "uv_m4c9ow12", headingLargeStrong: "uv_m4c9ow13", headingLargeStronger: "uv_m4c9ow14", headingSmall: "uv_m4c9ow15", headingSmallStrong: "uv_m4c9ow16", headingSmallStronger: "uv_m4c9ow17", headingStrong: "uv_m4c9ow18", headingStronger: "uv_m4c9ow19" }, disabled: { true: "uv_m4c9ow1a", false: "uv_m4c9ow1b" } }, defaultVariants: { strikeThrough: false, italic: false, underline: false, oneLine: false, sentiment: void 0, prominence: "default", variant: "body", disabled: false }, compoundVariants: [[{ sentiment: "primary", prominence: "default", disabled: false }, "uv_m4c9ow1c"], [{ sentiment: "primary", prominence: "strong", disabled: false }, "uv_m4c9ow1d"], [{ sentiment: "primary", prominence: "stronger", disabled: false }, "uv_m4c9ow1e"], [{ sentiment: "primary", prominence: "weak", disabled: false }, "uv_m4c9ow1f"], [{ sentiment: "secondary", prominence: "default", disabled: false }, "uv_m4c9ow1g"], [{ sentiment: "secondary", prominence: "strong", disabled: false }, "uv_m4c9ow1h"], [{ sentiment: "secondary", prominence: "stronger", disabled: false }, "uv_m4c9ow1i"], [{ sentiment: "secondary", prominence: "weak", disabled: false }, "uv_m4c9ow1j"], [{ sentiment: "danger", prominence: "default", disabled: false }, "uv_m4c9ow1k"], [{ sentiment: "danger", prominence: "strong", disabled: false }, "uv_m4c9ow1l"], [{ sentiment: "danger", prominence: "stronger", disabled: false }, "uv_m4c9ow1m"], [{ sentiment: "danger", prominence: "weak", disabled: false }, "uv_m4c9ow1n"], [{ sentiment: "info", prominence: "default", disabled: false }, "uv_m4c9ow1o"], [{ sentiment: "info", prominence: "strong", disabled: false }, "uv_m4c9ow1p"], [{ sentiment: "info", prominence: "stronger", disabled: false }, "uv_m4c9ow1q"], [{ sentiment: "info", prominence: "weak", disabled: false }, "uv_m4c9ow1r"], [{ sentiment: "success", prominence: "default", disabled: false }, "uv_m4c9ow1s"], [{ sentiment: "success", prominence: "strong", disabled: false }, "uv_m4c9ow1t"], [{ sentiment: "success", prominence: "stronger", disabled: false }, "uv_m4c9ow1u"], [{ sentiment: "success", prominence: "weak", disabled: false }, "uv_m4c9ow1v"], [{ sentiment: "warning", prominence: "default", disabled: false }, "uv_m4c9ow1w"], [{ sentiment: "warning", prominence: "strong", disabled: false }, "uv_m4c9ow1x"], [{ sentiment: "warning", prominence: "stronger", disabled: false }, "uv_m4c9ow1y"], [{ sentiment: "warning", prominence: "weak", disabled: false }, "uv_m4c9ow1z"], [{ sentiment: "neutral", prominence: "default", disabled: false }, "uv_m4c9ow20"], [{ sentiment: "neutral", prominence: "strong", disabled: false }, "uv_m4c9ow21"], [{ sentiment: "neutral", prominence: "stronger", disabled: false }, "uv_m4c9ow22"], [{ sentiment: "neutral", prominence: "weak", disabled: false }, "uv_m4c9ow23"], [{ sentiment: "black", prominence: "default", disabled: false }, "uv_m4c9ow24"], [{ sentiment: "black", prominence: "strong", disabled: false }, "uv_m4c9ow25"], [{ sentiment: "black", prominence: "stronger", disabled: false }, "uv_m4c9ow26"], [{ sentiment: "black", prominence: "weak", disabled: false }, "uv_m4c9ow27"], [{ sentiment: "white", prominence: "default", disabled: false }, "uv_m4c9ow28"], [{ sentiment: "white", prominence: "strong", disabled: false }, "uv_m4c9ow29"], [{ sentiment: "white", prominence: "stronger", disabled: false }, "uv_m4c9ow2a"], [{ sentiment: "white", prominence: "weak", disabled: false }, "uv_m4c9ow2b"], [{ sentiment: "primary", prominence: "default", disabled: true }, "uv_m4c9ow2c"], [{ sentiment: "primary", prominence: "strong", disabled: true }, "uv_m4c9ow2d"], [{ sentiment: "primary", prominence: "stronger", disabled: true }, "uv_m4c9ow2e"], [{ sentiment: "primary", prominence: "weak", disabled: true }, "uv_m4c9ow2f"], [{ sentiment: "secondary", prominence: "default", disabled: true }, "uv_m4c9ow2g"], [{ sentiment: "secondary", prominence: "strong", disabled: true }, "uv_m4c9ow2h"], [{ sentiment: "secondary", prominence: "stronger", disabled: true }, "uv_m4c9ow2i"], [{ sentiment: "secondary", prominence: "weak", disabled: true }, "uv_m4c9ow2j"], [{ sentiment: "danger", prominence: "default", disabled: true }, "uv_m4c9ow2k"], [{ sentiment: "danger", prominence: "strong", disabled: true }, "uv_m4c9ow2l"], [{ sentiment: "danger", prominence: "stronger", disabled: true }, "uv_m4c9ow2m"], [{ sentiment: "danger", prominence: "weak", disabled: true }, "uv_m4c9ow2n"], [{ sentiment: "info", prominence: "default", disabled: true }, "uv_m4c9ow2o"], [{ sentiment: "info", prominence: "strong", disabled: true }, "uv_m4c9ow2p"], [{ sentiment: "info", prominence: "stronger", disabled: true }, "uv_m4c9ow2q"], [{ sentiment: "info", prominence: "weak", disabled: true }, "uv_m4c9ow2r"], [{ sentiment: "success", prominence: "default", disabled: true }, "uv_m4c9ow2s"], [{ sentiment: "success", prominence: "strong", disabled: true }, "uv_m4c9ow2t"], [{ sentiment: "success", prominence: "stronger", disabled: true }, "uv_m4c9ow2u"], [{ sentiment: "success", prominence: "weak", disabled: true }, "uv_m4c9ow2v"], [{ sentiment: "warning", prominence: "default", disabled: true }, "uv_m4c9ow2w"], [{ sentiment: "warning", prominence: "strong", disabled: true }, "uv_m4c9ow2x"], [{ sentiment: "warning", prominence: "stronger", disabled: true }, "uv_m4c9ow2y"], [{ sentiment: "warning", prominence: "weak", disabled: true }, "uv_m4c9ow2z"], [{ sentiment: "neutral", prominence: "default", disabled: true }, "uv_m4c9ow30"], [{ sentiment: "neutral", prominence: "strong", disabled: true }, "uv_m4c9ow31"], [{ sentiment: "neutral", prominence: "stronger", disabled: true }, "uv_m4c9ow32"], [{ sentiment: "neutral", prominence: "weak", disabled: true }, "uv_m4c9ow33"], [{ sentiment: "black", prominence: "default", disabled: true }, "uv_m4c9ow34"], [{ sentiment: "black", prominence: "strong", disabled: true }, "uv_m4c9ow35"], [{ sentiment: "black", prominence: "stronger", disabled: true }, "uv_m4c9ow36"], [{ sentiment: "black", prominence: "weak", disabled: true }, "uv_m4c9ow37"], [{ sentiment: "white", prominence: "default", disabled: true }, "uv_m4c9ow38"], [{ sentiment: "white", prominence: "strong", disabled: true }, "uv_m4c9ow39"], [{ sentiment: "white", prominence: "stronger", disabled: true }, "uv_m4c9ow3a"], [{ sentiment: "white", prominence: "weak", disabled: true }, "uv_m4c9ow3b"], [{ prominence: "default", disabled: false }, "uv_m4c9ow3c"], [{ prominence: "strong", disabled: false }, "uv_m4c9ow3d"], [{ prominence: "stronger", disabled: false }, "uv_m4c9ow3e"], [{ prominence: "weak", disabled: false }, "uv_m4c9ow3f"]] });
@@ -1,4 +1,3 @@
1
- /* empty css */
2
1
  var placementText = "var(--uv_qabug40)";
3
2
  var whiteSpaceText = "var(--uv_qabug41)";
4
3
  export {
@@ -0,0 +1,6 @@
1
+ import type { ReactNode } from 'react';
2
+ export declare const RevealOnHover: ({ content, hoverContent, }: {
3
+ content: ReactNode;
4
+ hoverContent: ReactNode;
5
+ }) => import("react/jsx-runtime").JSX.Element;
6
+ //# sourceMappingURL=RevealOnHover.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"RevealOnHover.d.ts","sourceRoot":"","sources":["../../../../src/components/compositions/OptionSelector/RevealOnHover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,eAAO,MAAM,aAAa,GAAI,4BAG3B;IACD,OAAO,EAAE,SAAS,CAAA;IAClB,YAAY,EAAE,SAAS,CAAA;CACxB,4CAKA,CAAA"}
@@ -0,0 +1,12 @@
1
+ import { jsxs, jsx } from "react/jsx-runtime";
2
+ import { revealOnHover } from "./styles.css.js";
3
+ const RevealOnHover = ({
4
+ content,
5
+ hoverContent
6
+ }) => /* @__PURE__ */ jsxs("div", { className: revealOnHover, children: [
7
+ /* @__PURE__ */ jsx("div", { "data-visibility": "unhover", children: content }),
8
+ /* @__PURE__ */ jsx("div", { "data-visibility": "hover", children: hoverContent })
9
+ ] });
10
+ export {
11
+ RevealOnHover
12
+ };
@@ -0,0 +1,35 @@
1
+ export declare const firstSelectorOptions: {
2
+ content: import("react/jsx-runtime").JSX.Element;
3
+ icon: import("react/jsx-runtime").JSX.Element;
4
+ value: string;
5
+ }[];
6
+ export declare const franceOptions: ({
7
+ content: import("react/jsx-runtime").JSX.Element;
8
+ hoverContent: import("react/jsx-runtime").JSX.Element;
9
+ icon: import("react/jsx-runtime").JSX.Element;
10
+ optionalInfo: import("react/jsx-runtime").JSX.Element;
11
+ value: string;
12
+ } | {
13
+ content: import("react/jsx-runtime").JSX.Element;
14
+ hoverContent: import("react/jsx-runtime").JSX.Element;
15
+ icon: import("react/jsx-runtime").JSX.Element;
16
+ value: string;
17
+ optionalInfo?: undefined;
18
+ })[];
19
+ export declare const polandOptions: {
20
+ content: import("react/jsx-runtime").JSX.Element;
21
+ hoverContent: import("react/jsx-runtime").JSX.Element;
22
+ icon: import("react/jsx-runtime").JSX.Element;
23
+ value: string;
24
+ }[];
25
+ export declare const netherlandsOptions: {
26
+ content: import("react/jsx-runtime").JSX.Element;
27
+ hoverContent: import("react/jsx-runtime").JSX.Element;
28
+ icon: import("react/jsx-runtime").JSX.Element;
29
+ value: string;
30
+ }[];
31
+ export type ValueType = {
32
+ first?: string;
33
+ second?: string;
34
+ };
35
+ //# sourceMappingURL=resources.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"resources.d.ts","sourceRoot":"","sources":["../../../../../src/components/compositions/OptionSelector/__mock__/resources.tsx"],"names":[],"mappings":"AAUA,eAAO,MAAM,oBAAoB;;;;GA2ChC,CAAA;AAED,eAAO,MAAM,aAAa;;;;;;;;;;;;IAwEzB,CAAA;AAED,eAAO,MAAM,aAAa;;;;;GAmEzB,CAAA;AAED,eAAO,MAAM,kBAAkB;;;;;GAmE9B,CAAA;AAED,MAAM,MAAM,SAAS,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA"}
@@ -0,0 +1,7 @@
1
+ import type { OptionSelectorProps } from './types';
2
+ /**
3
+ * A compound selection component that displays two sequential select inputs
4
+ * where the first selection contextualizes and filters the options available in the second.
5
+ */
6
+ export declare const OptionSelector: ({ className, style, "data-testid": dataTestId, firstSelector, secondSelector, size, disabled, readOnly, "aria-label": ariaLabel, error, required, onChange, name, value, }: OptionSelectorProps) => import("react/jsx-runtime").JSX.Element;
7
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/compositions/OptionSelector/index.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,mBAAmB,EAAkB,MAAM,SAAS,CAAA;AA0ClE;;;GAGG;AACH,eAAO,MAAM,cAAc,GAAI,4KAe5B,mBAAmB,4CAgHrB,CAAA"}
@@ -0,0 +1,149 @@
1
+ "use client";
2
+ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
3
+ import { RayStartArrowIcon } from "@ultraviolet/icons";
4
+ import { cn } from "@ultraviolet/utils";
5
+ import { useMemo } from "react";
6
+ import { Label } from "../../Label/index.js";
7
+ import { SelectInput } from "../../SelectInput/index.js";
8
+ import { Stack } from "../../Stack/index.js";
9
+ import { RevealOnHover } from "./RevealOnHover.js";
10
+ import { firstLabel, secondLabel, firstSelectInput, arrow, secondSelectInput, optionSelectorWrapper } from "./styles.css.js";
11
+ const IconWithContent = ({
12
+ content,
13
+ icon
14
+ }) => /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: "1.5", children: [
15
+ icon,
16
+ content
17
+ ] });
18
+ const makeSelectInputOptions = (options) => options.map((option) => {
19
+ const optionLabel = option.hoverContent ? /* @__PURE__ */ jsx(
20
+ RevealOnHover,
21
+ {
22
+ content: /* @__PURE__ */ jsx(IconWithContent, { content: option.content, icon: option.icon }),
23
+ hoverContent: /* @__PURE__ */ jsx(IconWithContent, { content: option.hoverContent, icon: option.icon })
24
+ }
25
+ ) : /* @__PURE__ */ jsx(IconWithContent, { content: option.content, icon: option.icon });
26
+ return {
27
+ disabled: option.disabled,
28
+ label: optionLabel,
29
+ optionalInfo: option.optionalInfo,
30
+ searchText: option.value,
31
+ tooltip: option.tooltip,
32
+ value: option.value
33
+ };
34
+ });
35
+ const OptionSelector = ({
36
+ className,
37
+ style,
38
+ "data-testid": dataTestId,
39
+ firstSelector,
40
+ secondSelector,
41
+ size = "large",
42
+ disabled,
43
+ readOnly,
44
+ "aria-label": ariaLabel,
45
+ error,
46
+ required,
47
+ onChange,
48
+ name,
49
+ value
50
+ }) => {
51
+ const firstValue = useMemo(() => {
52
+ if (value?.first) {
53
+ return value.first;
54
+ }
55
+ if (firstSelector.options.length === 1) {
56
+ onChange?.({
57
+ first: firstSelector.options[0].value,
58
+ second: value?.second
59
+ });
60
+ return firstSelector.options[0].value;
61
+ }
62
+ return void 0;
63
+ }, [value?.first, value?.second, onChange, firstSelector]);
64
+ const secondValue = useMemo(() => {
65
+ if (value?.second) {
66
+ return value.second;
67
+ }
68
+ if (secondSelector?.options.length === 1) {
69
+ onChange?.({
70
+ first: value?.first,
71
+ second: secondSelector.options[0].value
72
+ });
73
+ return secondSelector?.options[0].value;
74
+ }
75
+ return void 0;
76
+ }, [secondSelector, value?.first, value?.second, onChange]);
77
+ const firstSelectorOptions = makeSelectInputOptions(firstSelector.options);
78
+ const secondSelectorOptions = secondSelector?.options ? makeSelectInputOptions(secondSelector.options) : void 0;
79
+ const onChangeFirstSelector = (val) => {
80
+ onChange?.({ first: val, second: value?.second });
81
+ };
82
+ const onChangeSecondSelector = (val) => onChange?.({ first: value?.first, second: val });
83
+ return /* @__PURE__ */ jsxs(
84
+ "fieldset",
85
+ {
86
+ "aria-label": ariaLabel,
87
+ "aria-required": required,
88
+ className: cn(className, optionSelectorWrapper),
89
+ "data-testid": dataTestId,
90
+ name,
91
+ style,
92
+ children: [
93
+ /* @__PURE__ */ jsx(Label, { className: firstLabel, children: firstSelector.label }),
94
+ firstValue && secondSelector && secondSelectorOptions ? /* @__PURE__ */ jsx(Label, { className: secondLabel, children: secondSelector?.label }) : null,
95
+ /* @__PURE__ */ jsx(
96
+ SelectInput,
97
+ {
98
+ className: firstSelectInput,
99
+ "data-testid": "first-selector",
100
+ disabled: firstSelector.disabled || disabled,
101
+ error: error || firstSelector.error,
102
+ helper: firstSelector.helper,
103
+ labelDescription: firstSelector.labelDescription,
104
+ onChange: onChangeFirstSelector,
105
+ optionalInfoPlacement: "right",
106
+ options: firstSelectorOptions,
107
+ placeholder: firstSelector.placeholder,
108
+ readOnly: firstSelector.options.length === 1 || firstSelector.readOnly || readOnly,
109
+ required,
110
+ size,
111
+ value: firstValue
112
+ }
113
+ ),
114
+ firstValue && secondSelector && secondSelectorOptions ? /* @__PURE__ */ jsxs(Fragment, { children: [
115
+ /* @__PURE__ */ jsx(
116
+ RayStartArrowIcon,
117
+ {
118
+ className: arrow,
119
+ prominence: "weak",
120
+ sentiment: "neutral",
121
+ size
122
+ }
123
+ ),
124
+ /* @__PURE__ */ jsx(
125
+ SelectInput,
126
+ {
127
+ className: secondSelectInput,
128
+ "data-testid": "second-selector",
129
+ disabled: !!firstSelector.error || secondSelector.disabled || disabled,
130
+ error: !!error || secondSelector.error,
131
+ helper: secondSelector.helper,
132
+ labelDescription: secondSelector.labelDescription,
133
+ onChange: onChangeSecondSelector,
134
+ optionalInfoPlacement: "right",
135
+ options: secondSelectorOptions,
136
+ placeholder: secondSelector.placeholder,
137
+ readOnly: secondSelector.options.length === 1 || secondSelector.readOnly || readOnly,
138
+ size,
139
+ value: secondValue
140
+ }
141
+ )
142
+ ] }) : null
143
+ ]
144
+ }
145
+ );
146
+ };
147
+ export {
148
+ OptionSelector
149
+ };
@@ -0,0 +1,8 @@
1
+ export declare const optionSelectorWrapper: string;
2
+ export declare const revealOnHover: string;
3
+ export declare const firstLabel: string;
4
+ export declare const secondLabel: string;
5
+ export declare const firstSelectInput: string;
6
+ export declare const secondSelectInput: string;
7
+ export declare const arrow: string;
8
+ //# sourceMappingURL=styles.css.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../../src/components/compositions/OptionSelector/styles.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,qBAAqB,QAMhC,CAAA;AAEF,eAAO,MAAM,aAAa,QAAY,CAAA;AAwBtC,eAAO,MAAM,UAAU,QAGrB,CAAA;AAEF,eAAO,MAAM,WAAW,QAGtB,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAG3B,CAAA;AAEF,eAAO,MAAM,iBAAiB,QAG5B,CAAA;AAEF,eAAO,MAAM,KAAK,QAGhB,CAAA"}
@@ -0,0 +1,19 @@
1
+ /* empty css */
2
+ /* empty css */
3
+ /* empty css */
4
+ var optionSelectorWrapper = "uv_12opk3l0";
5
+ var revealOnHover = "uv_12opk3l1";
6
+ var firstLabel = "uv_12opk3l2";
7
+ var secondLabel = "uv_12opk3l3";
8
+ var firstSelectInput = "uv_12opk3l4";
9
+ var secondSelectInput = "uv_12opk3l5";
10
+ var arrow = "uv_12opk3l6";
11
+ export {
12
+ arrow,
13
+ firstLabel,
14
+ firstSelectInput,
15
+ optionSelectorWrapper,
16
+ revealOnHover,
17
+ secondLabel,
18
+ secondSelectInput
19
+ };
@@ -0,0 +1,37 @@
1
+ import type { ComponentProps, CSSProperties, ReactNode } from 'react';
2
+ import type { SelectInput } from '../../SelectInput';
3
+ export type SelectorOption = {
4
+ content: ReactNode;
5
+ icon?: ReactNode;
6
+ value: string;
7
+ hoverContent?: ReactNode;
8
+ disabled?: boolean;
9
+ tooltip?: string;
10
+ optionalInfo?: ReactNode;
11
+ };
12
+ export type SelectorProps = Pick<ComponentProps<typeof SelectInput>, 'label' | 'labelDescription' | 'error' | 'disabled' | 'helper' | 'readOnly' | 'placeholder'> & {
13
+ options: SelectorOption[];
14
+ };
15
+ export type OptionSelectorProps = {
16
+ className?: string;
17
+ 'data-testid'?: string;
18
+ style?: CSSProperties;
19
+ firstSelector: SelectorProps;
20
+ secondSelector?: SelectorProps;
21
+ size?: ComponentProps<typeof SelectInput>['size'];
22
+ disabled?: boolean;
23
+ readOnly?: boolean;
24
+ name?: string;
25
+ 'aria-label'?: string;
26
+ error?: string | boolean;
27
+ required?: boolean;
28
+ onChange?: (values: {
29
+ first?: string;
30
+ second?: string;
31
+ }) => void;
32
+ value?: {
33
+ first?: string;
34
+ second?: string;
35
+ };
36
+ };
37
+ //# sourceMappingURL=types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/compositions/OptionSelector/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACrE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAEpD,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,EAAE,SAAS,CAAA;IAClB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,SAAS,CAAA;CACzB,CAAA;AAED,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,cAAc,CAAC,OAAO,WAAW,CAAC,EAChC,OAAO,GACP,kBAAkB,GAClB,OAAO,GACP,UAAU,GACV,QAAQ,GACR,UAAU,GACV,aAAa,CAChB,GAAG;IAAE,OAAO,EAAE,cAAc,EAAE,CAAA;CAAE,CAAA;AAEjC,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,aAAa,EAAE,aAAa,CAAA;IAC5B,cAAc,CAAC,EAAE,aAAa,CAAA;IAC9B,IAAI,CAAC,EAAE,cAAc,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IAChE,KAAK,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CAC5C,CAAA"}
@@ -0,0 +1,2 @@
1
+ export { OptionSelector } from './OptionSelector';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/compositions/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA"}
@@ -0,0 +1,4 @@
1
+ import { OptionSelector } from "./OptionSelector/index.js";
2
+ export {
3
+ OptionSelector
4
+ };