@yamada-ui/native-select 1.0.46-dev-20241005220629 → 1.0.46-dev-20241006000212

Sign up to get free protection for your applications and to get access to all the features.
Files changed (12) hide show
  1. package/dist/{chunk-I3S2OE2F.mjs → chunk-DC7KDBXQ.mjs} +20 -20
  2. package/dist/chunk-DC7KDBXQ.mjs.map +1 -0
  3. package/dist/index.js +14 -14
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +1 -1
  6. package/dist/native-select.d.mts +9 -9
  7. package/dist/native-select.d.ts +9 -9
  8. package/dist/native-select.js +14 -14
  9. package/dist/native-select.js.map +1 -1
  10. package/dist/native-select.mjs +1 -1
  11. package/package.json +5 -5
  12. package/dist/chunk-I3S2OE2F.mjs.map +0 -1
package/dist/{chunk-I3S2OE2F.mjs → chunk-DC7KDBXQ.mjs} RENAMED
@@ -2,11 +2,11 @@
2
2
 
3
3
  // src/native-select.tsx
4
4
  import {
5
- ui,
6
5
  forwardRef,
7
- useComponentMultiStyle,
6
+ layoutStyleProperties,
8
7
  omitThemeProps,
9
- layoutStyleProperties
8
+ ui,
9
+ useComponentMultiStyle
10
10
  } from "@yamada-ui/core";
11
11
  import {
12
12
  formControlProperties,
@@ -16,11 +16,11 @@ import { ChevronIcon } from "@yamada-ui/icon";
16
16
  import {
17
17
  createContext,
18
18
  cx,
19
- splitObject,
20
19
  getValidChildren,
21
20
  isValidElement,
21
+ omitObject,
22
22
  pickObject,
23
- omitObject
23
+ splitObject
24
24
  } from "@yamada-ui/utils";
25
25
  import { cloneElement } from "react";
26
26
  import { jsx, jsxs } from "react/jsx-runtime";
@@ -34,18 +34,18 @@ var NativeSelect = forwardRef(
34
34
  const {
35
35
  className,
36
36
  children,
37
- placeholderInOptions = true,
38
37
  color,
39
38
  items = [],
40
39
  placeholder,
40
+ placeholderInOptions = true,
41
41
  containerProps,
42
42
  iconProps,
43
43
  ...rest
44
44
  } = useFormControlProps(omitThemeProps(mergedProps));
45
45
  const {
46
46
  "aria-readonly": _ariaReadonly,
47
- onFocus: _onFocus,
48
47
  onBlur: _onBlur,
48
+ onFocus: _onFocus,
49
49
  ...formControlProps
50
50
  } = pickObject(rest, formControlProperties);
51
51
  const [{ h, height, minH, minHeight, ...layoutProps }, selectProps] = splitObject(omitObject(rest, ["aria-readonly"]), layoutStyleProperties);
@@ -56,7 +56,7 @@ var NativeSelect = forwardRef(
56
56
  const { label, value, ...props2 } = item;
57
57
  return /* @__PURE__ */ jsx(NativeOption, { value, ...props2, children: label }, i);
58
58
  } else if ("items" in item) {
59
- const { label, items: items2 = [], ...props2 } = item;
59
+ const { items: items2 = [], label, ...props2 } = item;
60
60
  return /* @__PURE__ */ jsx(NativeOptionGroup, { label, ...props2, children: items2.map(({ label: label2, value, ...props3 }, i2) => /* @__PURE__ */ jsx(NativeOption, { value, ...props3, children: label2 }, i2)) }, i);
61
61
  }
62
62
  }).filter(Boolean);
@@ -66,10 +66,10 @@ var NativeSelect = forwardRef(
66
66
  {
67
67
  className: "ui-select",
68
68
  __css: {
69
+ color,
70
+ h: "fit-content",
69
71
  position: "relative",
70
72
  w: "100%",
71
- h: "fit-content",
72
- color,
73
73
  ...styles.container
74
74
  },
75
75
  ...layoutProps,
@@ -82,14 +82,14 @@ var NativeSelect = forwardRef(
82
82
  ref,
83
83
  className: cx("ui-select__field", className),
84
84
  __css: {
85
- pe: "2rem",
86
85
  h: h != null ? h : height,
87
86
  minH: minH != null ? minH : minHeight,
87
+ pe: "2rem",
88
88
  ...styles.field
89
89
  },
90
90
  ...selectProps,
91
91
  children: [
92
- placeholder ? /* @__PURE__ */ jsx(NativeOption, { value: "", hidden: !placeholderInOptions, children: placeholder }) : null,
92
+ placeholder ? /* @__PURE__ */ jsx(NativeOption, { hidden: !placeholderInOptions, value: "", children: placeholder }) : null,
93
93
  children != null ? children : computedChildren
94
94
  ]
95
95
  }
@@ -109,11 +109,11 @@ var NativeSelectIcon = ({
109
109
  }) => {
110
110
  const styles = useNativeSelect();
111
111
  const css = {
112
- position: "absolute",
113
- display: "inline-flex",
114
112
  alignItems: "center",
113
+ display: "inline-flex",
115
114
  justifyContent: "center",
116
115
  pointerEvents: "none",
116
+ position: "absolute",
117
117
  top: "50%",
118
118
  transform: "translateY(-50%)",
119
119
  ...styles.icon
@@ -121,13 +121,13 @@ var NativeSelectIcon = ({
121
121
  const validChildren = getValidChildren(children);
122
122
  const cloneChildren = validChildren.map(
123
123
  (child) => cloneElement(child, {
124
- focusable: false,
125
- "aria-hidden": true,
126
124
  style: {
127
- width: "1em",
125
+ color: "currentColor",
128
126
  height: "1em",
129
- color: "currentColor"
130
- }
127
+ width: "1em"
128
+ },
129
+ focusable: false,
130
+ "aria-hidden": true
131
131
  })
132
132
  );
133
133
  return /* @__PURE__ */ jsx(ui.div, { className: cx("ui-select__icon", className), __css: css, ...rest, children: isValidElement(children) ? cloneChildren : /* @__PURE__ */ jsx(ChevronIcon, {}) });
@@ -150,4 +150,4 @@ export {
150
150
  NativeOptionGroup,
151
151
  NativeOption
152
152
  };
153
- //# sourceMappingURL=chunk-I3S2OE2F.mjs.map
153
+ //# sourceMappingURL=chunk-DC7KDBXQ.mjs.map
package/dist/chunk-DC7KDBXQ.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/native-select.tsx"],"sourcesContent":["import type { CSSUIObject, FC, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type {\n DetailedHTMLProps,\n OptionHTMLAttributes,\n ReactElement,\n} from \"react\"\nimport {\n forwardRef,\n layoutStyleProperties,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { ChevronIcon } from \"@yamada-ui/icon\"\nimport {\n createContext,\n cx,\n getValidChildren,\n isValidElement,\n omitObject,\n pickObject,\n splitObject,\n} from \"@yamada-ui/utils\"\nimport { cloneElement } from \"react\"\n\ninterface NativeSelectBaseItem\n extends Omit<\n DetailedHTMLProps<\n OptionHTMLAttributes<HTMLOptionElement>,\n HTMLOptionElement\n >,\n \"children\" | \"label\" | \"value\"\n > {\n label?: string\n}\n\ntype Value = DetailedHTMLProps<\n OptionHTMLAttributes<HTMLOptionElement>,\n HTMLOptionElement\n>[\"value\"]\n\ninterface NativeSelectItemWithValue extends NativeSelectBaseItem {\n value?: Value\n}\n\ninterface NativeSelectItemWithItems extends NativeSelectBaseItem {\n items?: NativeSelectItemWithValue[]\n}\n\nexport interface NativeSelectItem\n extends NativeSelectItemWithValue,\n NativeSelectItemWithItems {}\n\ninterface NativeSelectContext {\n [key: string]: CSSUIObject | undefined\n}\n\nconst [NativeSelectProvider, useNativeSelect] =\n createContext<NativeSelectContext>({\n name: \"NativeSelectContext\",\n errorMessage: `useNativeSelect returned is 'undefined'. Seems you forgot to wrap the components in \"<NativeSelect />\"`,\n })\n\ninterface NativeSelectOptions {\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: string\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: string\n /**\n * If provided, generate options based on items.\n *\n * @default '[]'\n */\n items?: NativeSelectItem[]\n /**\n * The placeholder for select.\n */\n placeholder?: string\n /**\n * If `true`, include placeholders in options.\n *\n * @default true\n */\n placeholderInOptions?: boolean\n /**\n * Props for container element.\n */\n containerProps?: Omit<HTMLUIProps, \"children\">\n /**\n * Props for icon element.\n */\n iconProps?: HTMLUIProps\n}\n\nexport interface NativeSelectProps\n extends Omit<HTMLUIProps<\"select\">, \"size\">,\n ThemeProps<\"NativeSelect\">,\n NativeSelectOptions,\n FormControlOptions {}\n\n/**\n * `NativeSelect` is a component used for allowing users to select one option from a list. It displays a native dropdown list provided by the browser (user agent).\n *\n * @see Docs https://yamada-ui.com/components/forms/native-select\n */\nexport const NativeSelect = forwardRef<NativeSelectProps, \"select\">(\n (props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"NativeSelect\", props)\n const {\n className,\n children,\n color,\n items = [],\n placeholder,\n placeholderInOptions = true,\n containerProps,\n iconProps,\n ...rest\n } = useFormControlProps(omitThemeProps(mergedProps))\n const {\n \"aria-readonly\": _ariaReadonly,\n onBlur: _onBlur,\n onFocus: _onFocus,\n ...formControlProps\n } = pickObject(rest, formControlProperties)\n const [{ h, height, minH, minHeight, ...layoutProps }, selectProps] =\n splitObject(omitObject(rest, [\"aria-readonly\"]), layoutStyleProperties)\n\n let computedChildren: ReactElement[] = []\n\n if (!children && items.length) {\n computedChildren = items\n .map((item, i) => {\n if (\"value\" in item) {\n const { label, value, ...props } = item\n\n return (\n <NativeOption key={i} value={value} {...props}>\n {label}\n </NativeOption>\n )\n } else if (\"items\" in item) {\n const { items = [], label, ...props } = item\n\n return (\n <NativeOptionGroup key={i} label={label} {...props}>\n {items.map(({ label, value, ...props }, i) => (\n <NativeOption key={i} value={value} {...props}>\n {label}\n </NativeOption>\n ))}\n </NativeOptionGroup>\n )\n }\n })\n .filter(Boolean) as ReactElement[]\n }\n\n return (\n <NativeSelectProvider value={styles}>\n <ui.div\n className=\"ui-select\"\n __css={{\n color,\n h: \"fit-content\",\n position: \"relative\",\n w: \"100%\",\n ...styles.container,\n }}\n {...layoutProps}\n {...containerProps}\n {...formControlProps}\n >\n <ui.select\n ref={ref}\n className={cx(\"ui-select__field\", className)}\n __css={{\n h: h ?? height,\n minH: minH ?? minHeight,\n pe: \"2rem\",\n ...styles.field,\n }}\n {...selectProps}\n >\n {placeholder ? (\n <NativeOption hidden={!placeholderInOptions} value=\"\">\n {placeholder}\n </NativeOption>\n ) : null}\n {children ?? computedChildren}\n </ui.select>\n\n <NativeSelectIcon {...iconProps} {...formControlProps} />\n </ui.div>\n </NativeSelectProvider>\n )\n },\n)\n\nNativeSelect.displayName = \"NativeSelect\"\nNativeSelect.__ui__ = \"NativeSelect\"\n\ninterface NativeSelectIconProps extends HTMLUIProps {}\n\nconst NativeSelectIcon: FC<NativeSelectIconProps> = ({\n className,\n children,\n ...rest\n}) => {\n const styles = useNativeSelect()\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"inline-flex\",\n justifyContent: \"center\",\n pointerEvents: \"none\",\n position: \"absolute\",\n top: \"50%\",\n transform: \"translateY(-50%)\",\n ...styles.icon,\n }\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) =>\n cloneElement(child, {\n style: {\n color: \"currentColor\",\n height: \"1em\",\n width: \"1em\",\n },\n focusable: false,\n \"aria-hidden\": true,\n }),\n )\n\n return (\n <ui.div className={cx(\"ui-select__icon\", className)} __css={css} {...rest}>\n {isValidElement(children) ? cloneChildren : <ChevronIcon />}\n </ui.div>\n )\n}\n\nNativeSelectIcon.displayName = \"NativeSelectIcon\"\nNativeSelectIcon.__ui__ = \"NativeSelectIcon\"\n\nexport interface NativeOptionGroupProps extends HTMLUIProps<\"optgroup\"> {}\n\nexport const NativeOptionGroup = forwardRef<NativeOptionGroupProps, \"optgroup\">(\n (props, ref) => <ui.optgroup ref={ref} {...props} />,\n)\n\nNativeOptionGroup.displayName = \"NativeOptionGroup\"\nNativeOptionGroup.__ui__ = \"NativeOptionGroup\"\n\nexport interface NativeOptionProps\n extends Omit<HTMLUIProps<\"option\">, \"children\"> {\n children?: string\n}\n\nexport const NativeOption = forwardRef<NativeOptionProps, \"option\">(\n (props, ref) => <ui.option ref={ref} {...props} />,\n)\n\nNativeOption.displayName = \"NativeOption\"\nNativeOption.__ui__ = \"NativeOption\"\n"],"mappings":"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","names":["props","items","label","i"]}
package/dist/index.js CHANGED
@@ -44,18 +44,18 @@ var NativeSelect = (0, import_core.forwardRef)(
44
44
  const {
45
45
  className,
46
46
  children,
47
- placeholderInOptions = true,
48
47
  color,
49
48
  items = [],
50
49
  placeholder,
50
+ placeholderInOptions = true,
51
51
  containerProps,
52
52
  iconProps,
53
53
  ...rest
54
54
  } = (0, import_form_control.useFormControlProps)((0, import_core.omitThemeProps)(mergedProps));
55
55
  const {
56
56
  "aria-readonly": _ariaReadonly,
57
- onFocus: _onFocus,
58
57
  onBlur: _onBlur,
58
+ onFocus: _onFocus,
59
59
  ...formControlProps
60
60
  } = (0, import_utils.pickObject)(rest, import_form_control.formControlProperties);
61
61
  const [{ h, height, minH, minHeight, ...layoutProps }, selectProps] = (0, import_utils.splitObject)((0, import_utils.omitObject)(rest, ["aria-readonly"]), import_core.layoutStyleProperties);
@@ -66,7 +66,7 @@ var NativeSelect = (0, import_core.forwardRef)(
66
66
  const { label, value, ...props2 } = item;
67
67
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { value, ...props2, children: label }, i);
68
68
  } else if ("items" in item) {
69
- const { label, items: items2 = [], ...props2 } = item;
69
+ const { items: items2 = [], label, ...props2 } = item;
70
70
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOptionGroup, { label, ...props2, children: items2.map(({ label: label2, value, ...props3 }, i2) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { value, ...props3, children: label2 }, i2)) }, i);
71
71
  }
72
72
  }).filter(Boolean);
@@ -76,10 +76,10 @@ var NativeSelect = (0, import_core.forwardRef)(
76
76
  {
77
77
  className: "ui-select",
78
78
  __css: {
79
+ color,
80
+ h: "fit-content",
79
81
  position: "relative",
80
82
  w: "100%",
81
- h: "fit-content",
82
- color,
83
83
  ...styles.container
84
84
  },
85
85
  ...layoutProps,
@@ -92,14 +92,14 @@ var NativeSelect = (0, import_core.forwardRef)(
92
92
  ref,
93
93
  className: (0, import_utils.cx)("ui-select__field", className),
94
94
  __css: {
95
- pe: "2rem",
96
95
  h: h != null ? h : height,
97
96
  minH: minH != null ? minH : minHeight,
97
+ pe: "2rem",
98
98
  ...styles.field
99
99
  },
100
100
  ...selectProps,
101
101
  children: [
102
- placeholder ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { value: "", hidden: !placeholderInOptions, children: placeholder }) : null,
102
+ placeholder ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { hidden: !placeholderInOptions, value: "", children: placeholder }) : null,
103
103
  children != null ? children : computedChildren
104
104
  ]
105
105
  }
@@ -119,11 +119,11 @@ var NativeSelectIcon = ({
119
119
  }) => {
120
120
  const styles = useNativeSelect();
121
121
  const css = {
122
- position: "absolute",
123
- display: "inline-flex",
124
122
  alignItems: "center",
123
+ display: "inline-flex",
125
124
  justifyContent: "center",
126
125
  pointerEvents: "none",
126
+ position: "absolute",
127
127
  top: "50%",
128
128
  transform: "translateY(-50%)",
129
129
  ...styles.icon
@@ -131,13 +131,13 @@ var NativeSelectIcon = ({
131
131
  const validChildren = (0, import_utils.getValidChildren)(children);
132
132
  const cloneChildren = validChildren.map(
133
133
  (child) => (0, import_react.cloneElement)(child, {
134
- focusable: false,
135
- "aria-hidden": true,
136
134
  style: {
137
- width: "1em",
135
+ color: "currentColor",
138
136
  height: "1em",
139
- color: "currentColor"
140
- }
137
+ width: "1em"
138
+ },
139
+ focusable: false,
140
+ "aria-hidden": true
141
141
  })
142
142
  );
143
143
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.div, { className: (0, import_utils.cx)("ui-select__icon", className), __css: css, ...rest, children: (0, import_utils.isValidElement)(children) ? cloneChildren : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.ChevronIcon, {}) });
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/native-select.tsx"],"sourcesContent":["export { NativeSelect, NativeOptionGroup, NativeOption } from \"./native-select\"\nexport type {\n NativeSelectProps,\n NativeOptionGroupProps,\n NativeOptionProps,\n NativeSelectItem,\n} from \"./native-select\"\n","import type { FC, CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentMultiStyle,\n omitThemeProps,\n layoutStyleProperties,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { ChevronIcon } from \"@yamada-ui/icon\"\nimport {\n createContext,\n cx,\n splitObject,\n getValidChildren,\n isValidElement,\n pickObject,\n omitObject,\n} from \"@yamada-ui/utils\"\nimport type {\n DetailedHTMLProps,\n OptionHTMLAttributes,\n ReactElement,\n} from \"react\"\nimport { cloneElement } from \"react\"\n\ninterface NativeSelectBaseItem\n extends Omit<\n DetailedHTMLProps<\n OptionHTMLAttributes<HTMLOptionElement>,\n HTMLOptionElement\n >,\n \"label\" | \"children\" | \"value\"\n > {\n label?: string\n}\n\ntype Value = DetailedHTMLProps<\n OptionHTMLAttributes<HTMLOptionElement>,\n HTMLOptionElement\n>[\"value\"]\n\ninterface NativeSelectItemWithValue extends NativeSelectBaseItem {\n value?: Value\n}\n\ninterface NativeSelectItemWithItems extends NativeSelectBaseItem {\n items?: NativeSelectItemWithValue[]\n}\n\nexport interface NativeSelectItem\n extends NativeSelectItemWithValue,\n NativeSelectItemWithItems {}\n\ninterface NativeSelectContext {\n [key: string]: CSSUIObject\n}\n\nconst [NativeSelectProvider, useNativeSelect] =\n createContext<NativeSelectContext>({\n name: \"NativeSelectContext\",\n errorMessage: `useNativeSelect returned is 'undefined'. Seems you forgot to wrap the components in \"<NativeSelect />\"`,\n })\n\ninterface NativeSelectOptions {\n /**\n * If provided, generate options based on items.\n *\n * @default '[]'\n */\n items?: NativeSelectItem[]\n /**\n * The placeholder for select.\n */\n placeholder?: string\n /**\n * If `true`, include placeholders in options.\n *\n * @default true\n */\n placeholderInOptions?: boolean\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: string\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: string\n /**\n * Props for container element.\n */\n containerProps?: Omit<HTMLUIProps, \"children\">\n /**\n * Props for icon element.\n */\n iconProps?: HTMLUIProps\n}\n\nexport interface NativeSelectProps\n extends Omit<HTMLUIProps<\"select\">, \"size\">,\n ThemeProps<\"NativeSelect\">,\n NativeSelectOptions,\n FormControlOptions {}\n\n/**\n * `NativeSelect` is a component used for allowing users to select one option from a list. It displays a native dropdown list provided by the browser (user agent).\n *\n * @see Docs https://yamada-ui.com/components/forms/native-select\n */\nexport const NativeSelect = forwardRef<NativeSelectProps, \"select\">(\n (props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"NativeSelect\", props)\n const {\n className,\n children,\n placeholderInOptions = true,\n color,\n items = [],\n placeholder,\n containerProps,\n iconProps,\n ...rest\n } = useFormControlProps(omitThemeProps(mergedProps))\n const {\n \"aria-readonly\": _ariaReadonly,\n onFocus: _onFocus,\n onBlur: _onBlur,\n ...formControlProps\n } = pickObject(rest, formControlProperties)\n const [{ h, height, minH, minHeight, ...layoutProps }, selectProps] =\n splitObject(omitObject(rest, [\"aria-readonly\"]), layoutStyleProperties)\n\n let computedChildren: ReactElement[] = []\n\n if (!children && items.length) {\n computedChildren = items\n .map((item, i) => {\n if (\"value\" in item) {\n const { label, value, ...props } = item\n\n return (\n <NativeOption key={i} value={value} {...props}>\n {label}\n </NativeOption>\n )\n } else if (\"items\" in item) {\n const { label, items = [], ...props } = item\n\n return (\n <NativeOptionGroup key={i} label={label} {...props}>\n {items.map(({ label, value, ...props }, i) => (\n <NativeOption key={i} value={value} {...props}>\n {label}\n </NativeOption>\n ))}\n </NativeOptionGroup>\n )\n }\n })\n .filter(Boolean) as ReactElement[]\n }\n\n return (\n <NativeSelectProvider value={styles}>\n <ui.div\n className=\"ui-select\"\n __css={{\n position: \"relative\",\n w: \"100%\",\n h: \"fit-content\",\n color,\n ...styles.container,\n }}\n {...layoutProps}\n {...containerProps}\n {...formControlProps}\n >\n <ui.select\n ref={ref}\n className={cx(\"ui-select__field\", className)}\n __css={{\n pe: \"2rem\",\n h: h ?? height,\n minH: minH ?? minHeight,\n ...styles.field,\n }}\n {...selectProps}\n >\n {placeholder ? (\n <NativeOption value=\"\" hidden={!placeholderInOptions}>\n {placeholder}\n </NativeOption>\n ) : null}\n {children ?? computedChildren}\n </ui.select>\n\n <NativeSelectIcon {...iconProps} {...formControlProps} />\n </ui.div>\n </NativeSelectProvider>\n )\n },\n)\n\nNativeSelect.displayName = \"NativeSelect\"\nNativeSelect.__ui__ = \"NativeSelect\"\n\ninterface NativeSelectIconProps extends HTMLUIProps {}\n\nconst NativeSelectIcon: FC<NativeSelectIconProps> = ({\n className,\n children,\n ...rest\n}) => {\n const styles = useNativeSelect()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n pointerEvents: \"none\",\n top: \"50%\",\n transform: \"translateY(-50%)\",\n ...styles.icon,\n }\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) =>\n cloneElement(child, {\n focusable: false,\n \"aria-hidden\": true,\n style: {\n width: \"1em\",\n height: \"1em\",\n color: \"currentColor\",\n },\n }),\n )\n\n return (\n <ui.div className={cx(\"ui-select__icon\", className)} __css={css} {...rest}>\n {isValidElement(children) ? cloneChildren : <ChevronIcon />}\n </ui.div>\n )\n}\n\nNativeSelectIcon.displayName = \"NativeSelectIcon\"\nNativeSelectIcon.__ui__ = \"NativeSelectIcon\"\n\nexport interface NativeOptionGroupProps extends HTMLUIProps<\"optgroup\"> {}\n\nexport const NativeOptionGroup = forwardRef<NativeOptionGroupProps, \"optgroup\">(\n (props, ref) => <ui.optgroup ref={ref} {...props} />,\n)\n\nNativeOptionGroup.displayName = \"NativeOptionGroup\"\nNativeOptionGroup.__ui__ = \"NativeOptionGroup\"\n\nexport interface NativeOptionProps\n extends Omit<HTMLUIProps<\"option\">, \"children\"> {\n children?: string\n}\n\nexport const NativeOption = forwardRef<NativeOptionProps, \"option\">(\n (props, ref) => <ui.option ref={ref} {...props} />,\n)\n\nNativeOption.displayName = \"NativeOption\"\nNativeOption.__ui__ = \"NativeOption\"\n"],"mappings":"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","names":["props","items","label","i"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/native-select.tsx"],"sourcesContent":["export { NativeOption, NativeOptionGroup, NativeSelect } from \"./native-select\"\nexport type {\n NativeOptionGroupProps,\n NativeOptionProps,\n NativeSelectItem,\n NativeSelectProps,\n} from \"./native-select\"\n","import type { CSSUIObject, FC, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type {\n DetailedHTMLProps,\n OptionHTMLAttributes,\n ReactElement,\n} from \"react\"\nimport {\n forwardRef,\n layoutStyleProperties,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { ChevronIcon } from \"@yamada-ui/icon\"\nimport {\n createContext,\n cx,\n getValidChildren,\n isValidElement,\n omitObject,\n pickObject,\n splitObject,\n} from \"@yamada-ui/utils\"\nimport { cloneElement } from \"react\"\n\ninterface NativeSelectBaseItem\n extends Omit<\n DetailedHTMLProps<\n OptionHTMLAttributes<HTMLOptionElement>,\n HTMLOptionElement\n >,\n \"children\" | \"label\" | \"value\"\n > {\n label?: string\n}\n\ntype Value = DetailedHTMLProps<\n OptionHTMLAttributes<HTMLOptionElement>,\n HTMLOptionElement\n>[\"value\"]\n\ninterface NativeSelectItemWithValue extends NativeSelectBaseItem {\n value?: Value\n}\n\ninterface NativeSelectItemWithItems extends NativeSelectBaseItem {\n items?: NativeSelectItemWithValue[]\n}\n\nexport interface NativeSelectItem\n extends NativeSelectItemWithValue,\n NativeSelectItemWithItems {}\n\ninterface NativeSelectContext {\n [key: string]: CSSUIObject | undefined\n}\n\nconst [NativeSelectProvider, useNativeSelect] =\n createContext<NativeSelectContext>({\n name: \"NativeSelectContext\",\n errorMessage: `useNativeSelect returned is 'undefined'. Seems you forgot to wrap the components in \"<NativeSelect />\"`,\n })\n\ninterface NativeSelectOptions {\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: string\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: string\n /**\n * If provided, generate options based on items.\n *\n * @default '[]'\n */\n items?: NativeSelectItem[]\n /**\n * The placeholder for select.\n */\n placeholder?: string\n /**\n * If `true`, include placeholders in options.\n *\n * @default true\n */\n placeholderInOptions?: boolean\n /**\n * Props for container element.\n */\n containerProps?: Omit<HTMLUIProps, \"children\">\n /**\n * Props for icon element.\n */\n iconProps?: HTMLUIProps\n}\n\nexport interface NativeSelectProps\n extends Omit<HTMLUIProps<\"select\">, \"size\">,\n ThemeProps<\"NativeSelect\">,\n NativeSelectOptions,\n FormControlOptions {}\n\n/**\n * `NativeSelect` is a component used for allowing users to select one option from a list. It displays a native dropdown list provided by the browser (user agent).\n *\n * @see Docs https://yamada-ui.com/components/forms/native-select\n */\nexport const NativeSelect = forwardRef<NativeSelectProps, \"select\">(\n (props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"NativeSelect\", props)\n const {\n className,\n children,\n color,\n items = [],\n placeholder,\n placeholderInOptions = true,\n containerProps,\n iconProps,\n ...rest\n } = useFormControlProps(omitThemeProps(mergedProps))\n const {\n \"aria-readonly\": _ariaReadonly,\n onBlur: _onBlur,\n onFocus: _onFocus,\n ...formControlProps\n } = pickObject(rest, formControlProperties)\n const [{ h, height, minH, minHeight, ...layoutProps }, selectProps] =\n splitObject(omitObject(rest, [\"aria-readonly\"]), layoutStyleProperties)\n\n let computedChildren: ReactElement[] = []\n\n if (!children && items.length) {\n computedChildren = items\n .map((item, i) => {\n if (\"value\" in item) {\n const { label, value, ...props } = item\n\n return (\n <NativeOption key={i} value={value} {...props}>\n {label}\n </NativeOption>\n )\n } else if (\"items\" in item) {\n const { items = [], label, ...props } = item\n\n return (\n <NativeOptionGroup key={i} label={label} {...props}>\n {items.map(({ label, value, ...props }, i) => (\n <NativeOption key={i} value={value} {...props}>\n {label}\n </NativeOption>\n ))}\n </NativeOptionGroup>\n )\n }\n })\n .filter(Boolean) as ReactElement[]\n }\n\n return (\n <NativeSelectProvider value={styles}>\n <ui.div\n className=\"ui-select\"\n __css={{\n color,\n h: \"fit-content\",\n position: \"relative\",\n w: \"100%\",\n ...styles.container,\n }}\n {...layoutProps}\n {...containerProps}\n {...formControlProps}\n >\n <ui.select\n ref={ref}\n className={cx(\"ui-select__field\", className)}\n __css={{\n h: h ?? height,\n minH: minH ?? minHeight,\n pe: \"2rem\",\n ...styles.field,\n }}\n {...selectProps}\n >\n {placeholder ? (\n <NativeOption hidden={!placeholderInOptions} value=\"\">\n {placeholder}\n </NativeOption>\n ) : null}\n {children ?? computedChildren}\n </ui.select>\n\n <NativeSelectIcon {...iconProps} {...formControlProps} />\n </ui.div>\n </NativeSelectProvider>\n )\n },\n)\n\nNativeSelect.displayName = \"NativeSelect\"\nNativeSelect.__ui__ = \"NativeSelect\"\n\ninterface NativeSelectIconProps extends HTMLUIProps {}\n\nconst NativeSelectIcon: FC<NativeSelectIconProps> = ({\n className,\n children,\n ...rest\n}) => {\n const styles = useNativeSelect()\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"inline-flex\",\n justifyContent: \"center\",\n pointerEvents: \"none\",\n position: \"absolute\",\n top: \"50%\",\n transform: \"translateY(-50%)\",\n ...styles.icon,\n }\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) =>\n cloneElement(child, {\n style: {\n color: \"currentColor\",\n height: \"1em\",\n width: \"1em\",\n },\n focusable: false,\n \"aria-hidden\": true,\n }),\n )\n\n return (\n <ui.div className={cx(\"ui-select__icon\", className)} __css={css} {...rest}>\n {isValidElement(children) ? cloneChildren : <ChevronIcon />}\n </ui.div>\n )\n}\n\nNativeSelectIcon.displayName = \"NativeSelectIcon\"\nNativeSelectIcon.__ui__ = \"NativeSelectIcon\"\n\nexport interface NativeOptionGroupProps extends HTMLUIProps<\"optgroup\"> {}\n\nexport const NativeOptionGroup = forwardRef<NativeOptionGroupProps, \"optgroup\">(\n (props, ref) => <ui.optgroup ref={ref} {...props} />,\n)\n\nNativeOptionGroup.displayName = \"NativeOptionGroup\"\nNativeOptionGroup.__ui__ = \"NativeOptionGroup\"\n\nexport interface NativeOptionProps\n extends Omit<HTMLUIProps<\"option\">, \"children\"> {\n children?: string\n}\n\nexport const NativeOption = forwardRef<NativeOptionProps, \"option\">(\n (props, ref) => <ui.option ref={ref} {...props} />,\n)\n\nNativeOption.displayName = \"NativeOption\"\nNativeOption.__ui__ = \"NativeOption\"\n"],"mappings":"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","names":["props","items","label","i"]}
package/dist/index.mjs CHANGED
@@ -3,7 +3,7 @@ import {
3
3
  NativeOption,
4
4
  NativeOptionGroup,
5
5
  NativeSelect
6
- } from "./chunk-I3S2OE2F.mjs";
6
+ } from "./chunk-DC7KDBXQ.mjs";
7
7
  export {
8
8
  NativeOption,
9
9
  NativeOptionGroup,
package/dist/native-select.d.mts CHANGED
@@ -3,7 +3,7 @@ import { HTMLUIProps, ThemeProps } from '@yamada-ui/core';
3
3
  import { FormControlOptions } from '@yamada-ui/form-control';
4
4
  import { DetailedHTMLProps, OptionHTMLAttributes } from 'react';
5
5
 
6
- interface NativeSelectBaseItem extends Omit<DetailedHTMLProps<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>, "label" | "children" | "value"> {
6
+ interface NativeSelectBaseItem extends Omit<DetailedHTMLProps<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>, "children" | "label" | "value"> {
7
7
  label?: string;
8
8
  }
9
9
  type Value = DetailedHTMLProps<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>["value"];
@@ -16,6 +16,14 @@ interface NativeSelectItemWithItems extends NativeSelectBaseItem {
16
16
  interface NativeSelectItem extends NativeSelectItemWithValue, NativeSelectItemWithItems {
17
17
  }
18
18
  interface NativeSelectOptions {
19
+ /**
20
+ * The border color when the input is invalid.
21
+ */
22
+ errorBorderColor?: string;
23
+ /**
24
+ * The border color when the input is focused.
25
+ */
26
+ focusBorderColor?: string;
19
27
  /**
20
28
  * If provided, generate options based on items.
21
29
  *
@@ -32,14 +40,6 @@ interface NativeSelectOptions {
32
40
  * @default true
33
41
  */
34
42
  placeholderInOptions?: boolean;
35
- /**
36
- * The border color when the input is focused.
37
- */
38
- focusBorderColor?: string;
39
- /**
40
- * The border color when the input is invalid.
41
- */
42
- errorBorderColor?: string;
43
43
  /**
44
44
  * Props for container element.
45
45
  */
package/dist/native-select.d.ts CHANGED
@@ -3,7 +3,7 @@ import { HTMLUIProps, ThemeProps } from '@yamada-ui/core';
3
3
  import { FormControlOptions } from '@yamada-ui/form-control';
4
4
  import { DetailedHTMLProps, OptionHTMLAttributes } from 'react';
5
5
 
6
- interface NativeSelectBaseItem extends Omit<DetailedHTMLProps<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>, "label" | "children" | "value"> {
6
+ interface NativeSelectBaseItem extends Omit<DetailedHTMLProps<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>, "children" | "label" | "value"> {
7
7
  label?: string;
8
8
  }
9
9
  type Value = DetailedHTMLProps<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>["value"];
@@ -16,6 +16,14 @@ interface NativeSelectItemWithItems extends NativeSelectBaseItem {
16
16
  interface NativeSelectItem extends NativeSelectItemWithValue, NativeSelectItemWithItems {
17
17
  }
18
18
  interface NativeSelectOptions {
19
+ /**
20
+ * The border color when the input is invalid.
21
+ */
22
+ errorBorderColor?: string;
23
+ /**
24
+ * The border color when the input is focused.
25
+ */
26
+ focusBorderColor?: string;
19
27
  /**
20
28
  * If provided, generate options based on items.
21
29
  *
@@ -32,14 +40,6 @@ interface NativeSelectOptions {
32
40
  * @default true
33
41
  */
34
42
  placeholderInOptions?: boolean;
35
- /**
36
- * The border color when the input is focused.
37
- */
38
- focusBorderColor?: string;
39
- /**
40
- * The border color when the input is invalid.
41
- */
42
- errorBorderColor?: string;
43
43
  /**
44
44
  * Props for container element.
45
45
  */
package/dist/native-select.js CHANGED
@@ -42,18 +42,18 @@ var NativeSelect = (0, import_core.forwardRef)(
42
42
  const {
43
43
  className,
44
44
  children,
45
- placeholderInOptions = true,
46
45
  color,
47
46
  items = [],
48
47
  placeholder,
48
+ placeholderInOptions = true,
49
49
  containerProps,
50
50
  iconProps,
51
51
  ...rest
52
52
  } = (0, import_form_control.useFormControlProps)((0, import_core.omitThemeProps)(mergedProps));
53
53
  const {
54
54
  "aria-readonly": _ariaReadonly,
55
- onFocus: _onFocus,
56
55
  onBlur: _onBlur,
56
+ onFocus: _onFocus,
57
57
  ...formControlProps
58
58
  } = (0, import_utils.pickObject)(rest, import_form_control.formControlProperties);
59
59
  const [{ h, height, minH, minHeight, ...layoutProps }, selectProps] = (0, import_utils.splitObject)((0, import_utils.omitObject)(rest, ["aria-readonly"]), import_core.layoutStyleProperties);
@@ -64,7 +64,7 @@ var NativeSelect = (0, import_core.forwardRef)(
64
64
  const { label, value, ...props2 } = item;
65
65
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { value, ...props2, children: label }, i);
66
66
  } else if ("items" in item) {
67
- const { label, items: items2 = [], ...props2 } = item;
67
+ const { items: items2 = [], label, ...props2 } = item;
68
68
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOptionGroup, { label, ...props2, children: items2.map(({ label: label2, value, ...props3 }, i2) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { value, ...props3, children: label2 }, i2)) }, i);
69
69
  }
70
70
  }).filter(Boolean);
@@ -74,10 +74,10 @@ var NativeSelect = (0, import_core.forwardRef)(
74
74
  {
75
75
  className: "ui-select",
76
76
  __css: {
77
+ color,
78
+ h: "fit-content",
77
79
  position: "relative",
78
80
  w: "100%",
79
- h: "fit-content",
80
- color,
81
81
  ...styles.container
82
82
  },
83
83
  ...layoutProps,
@@ -90,14 +90,14 @@ var NativeSelect = (0, import_core.forwardRef)(
90
90
  ref,
91
91
  className: (0, import_utils.cx)("ui-select__field", className),
92
92
  __css: {
93
- pe: "2rem",
94
93
  h: h != null ? h : height,
95
94
  minH: minH != null ? minH : minHeight,
95
+ pe: "2rem",
96
96
  ...styles.field
97
97
  },
98
98
  ...selectProps,
99
99
  children: [
100
- placeholder ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { value: "", hidden: !placeholderInOptions, children: placeholder }) : null,
100
+ placeholder ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { hidden: !placeholderInOptions, value: "", children: placeholder }) : null,
101
101
  children != null ? children : computedChildren
102
102
  ]
103
103
  }
@@ -117,11 +117,11 @@ var NativeSelectIcon = ({
117
117
  }) => {
118
118
  const styles = useNativeSelect();
119
119
  const css = {
120
- position: "absolute",
121
- display: "inline-flex",
122
120
  alignItems: "center",
121
+ display: "inline-flex",
123
122
  justifyContent: "center",
124
123
  pointerEvents: "none",
124
+ position: "absolute",
125
125
  top: "50%",
126
126
  transform: "translateY(-50%)",
127
127
  ...styles.icon
@@ -129,13 +129,13 @@ var NativeSelectIcon = ({
129
129
  const validChildren = (0, import_utils.getValidChildren)(children);
130
130
  const cloneChildren = validChildren.map(
131
131
  (child) => (0, import_react.cloneElement)(child, {
132
- focusable: false,
133
- "aria-hidden": true,
134
132
  style: {
135
- width: "1em",
133
+ color: "currentColor",
136
134
  height: "1em",
137
- color: "currentColor"
138
- }
135
+ width: "1em"
136
+ },
137
+ focusable: false,
138
+ "aria-hidden": true
139
139
  })
140
140
  );
141
141
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.div, { className: (0, import_utils.cx)("ui-select__icon", className), __css: css, ...rest, children: (0, import_utils.isValidElement)(children) ? cloneChildren : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.ChevronIcon, {}) });
package/dist/native-select.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/native-select.tsx"],"sourcesContent":["import type { FC, CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentMultiStyle,\n omitThemeProps,\n layoutStyleProperties,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { ChevronIcon } from \"@yamada-ui/icon\"\nimport {\n createContext,\n cx,\n splitObject,\n getValidChildren,\n isValidElement,\n pickObject,\n omitObject,\n} from \"@yamada-ui/utils\"\nimport type {\n DetailedHTMLProps,\n OptionHTMLAttributes,\n ReactElement,\n} from \"react\"\nimport { cloneElement } from \"react\"\n\ninterface NativeSelectBaseItem\n extends Omit<\n DetailedHTMLProps<\n OptionHTMLAttributes<HTMLOptionElement>,\n HTMLOptionElement\n >,\n \"label\" | \"children\" | \"value\"\n > {\n label?: string\n}\n\ntype Value = DetailedHTMLProps<\n OptionHTMLAttributes<HTMLOptionElement>,\n HTMLOptionElement\n>[\"value\"]\n\ninterface NativeSelectItemWithValue extends NativeSelectBaseItem {\n value?: Value\n}\n\ninterface NativeSelectItemWithItems extends NativeSelectBaseItem {\n items?: NativeSelectItemWithValue[]\n}\n\nexport interface NativeSelectItem\n extends NativeSelectItemWithValue,\n NativeSelectItemWithItems {}\n\ninterface NativeSelectContext {\n [key: string]: CSSUIObject\n}\n\nconst [NativeSelectProvider, useNativeSelect] =\n createContext<NativeSelectContext>({\n name: \"NativeSelectContext\",\n errorMessage: `useNativeSelect returned is 'undefined'. Seems you forgot to wrap the components in \"<NativeSelect />\"`,\n })\n\ninterface NativeSelectOptions {\n /**\n * If provided, generate options based on items.\n *\n * @default '[]'\n */\n items?: NativeSelectItem[]\n /**\n * The placeholder for select.\n */\n placeholder?: string\n /**\n * If `true`, include placeholders in options.\n *\n * @default true\n */\n placeholderInOptions?: boolean\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: string\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: string\n /**\n * Props for container element.\n */\n containerProps?: Omit<HTMLUIProps, \"children\">\n /**\n * Props for icon element.\n */\n iconProps?: HTMLUIProps\n}\n\nexport interface NativeSelectProps\n extends Omit<HTMLUIProps<\"select\">, \"size\">,\n ThemeProps<\"NativeSelect\">,\n NativeSelectOptions,\n FormControlOptions {}\n\n/**\n * `NativeSelect` is a component used for allowing users to select one option from a list. It displays a native dropdown list provided by the browser (user agent).\n *\n * @see Docs https://yamada-ui.com/components/forms/native-select\n */\nexport const NativeSelect = forwardRef<NativeSelectProps, \"select\">(\n (props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"NativeSelect\", props)\n const {\n className,\n children,\n placeholderInOptions = true,\n color,\n items = [],\n placeholder,\n containerProps,\n iconProps,\n ...rest\n } = useFormControlProps(omitThemeProps(mergedProps))\n const {\n \"aria-readonly\": _ariaReadonly,\n onFocus: _onFocus,\n onBlur: _onBlur,\n ...formControlProps\n } = pickObject(rest, formControlProperties)\n const [{ h, height, minH, minHeight, ...layoutProps }, selectProps] =\n splitObject(omitObject(rest, [\"aria-readonly\"]), layoutStyleProperties)\n\n let computedChildren: ReactElement[] = []\n\n if (!children && items.length) {\n computedChildren = items\n .map((item, i) => {\n if (\"value\" in item) {\n const { label, value, ...props } = item\n\n return (\n <NativeOption key={i} value={value} {...props}>\n {label}\n </NativeOption>\n )\n } else if (\"items\" in item) {\n const { label, items = [], ...props } = item\n\n return (\n <NativeOptionGroup key={i} label={label} {...props}>\n {items.map(({ label, value, ...props }, i) => (\n <NativeOption key={i} value={value} {...props}>\n {label}\n </NativeOption>\n ))}\n </NativeOptionGroup>\n )\n }\n })\n .filter(Boolean) as ReactElement[]\n }\n\n return (\n <NativeSelectProvider value={styles}>\n <ui.div\n className=\"ui-select\"\n __css={{\n position: \"relative\",\n w: \"100%\",\n h: \"fit-content\",\n color,\n ...styles.container,\n }}\n {...layoutProps}\n {...containerProps}\n {...formControlProps}\n >\n <ui.select\n ref={ref}\n className={cx(\"ui-select__field\", className)}\n __css={{\n pe: \"2rem\",\n h: h ?? height,\n minH: minH ?? minHeight,\n ...styles.field,\n }}\n {...selectProps}\n >\n {placeholder ? (\n <NativeOption value=\"\" hidden={!placeholderInOptions}>\n {placeholder}\n </NativeOption>\n ) : null}\n {children ?? computedChildren}\n </ui.select>\n\n <NativeSelectIcon {...iconProps} {...formControlProps} />\n </ui.div>\n </NativeSelectProvider>\n )\n },\n)\n\nNativeSelect.displayName = \"NativeSelect\"\nNativeSelect.__ui__ = \"NativeSelect\"\n\ninterface NativeSelectIconProps extends HTMLUIProps {}\n\nconst NativeSelectIcon: FC<NativeSelectIconProps> = ({\n className,\n children,\n ...rest\n}) => {\n const styles = useNativeSelect()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n pointerEvents: \"none\",\n top: \"50%\",\n transform: \"translateY(-50%)\",\n ...styles.icon,\n }\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) =>\n cloneElement(child, {\n focusable: false,\n \"aria-hidden\": true,\n style: {\n width: \"1em\",\n height: \"1em\",\n color: \"currentColor\",\n },\n }),\n )\n\n return (\n <ui.div className={cx(\"ui-select__icon\", className)} __css={css} {...rest}>\n {isValidElement(children) ? cloneChildren : <ChevronIcon />}\n </ui.div>\n )\n}\n\nNativeSelectIcon.displayName = \"NativeSelectIcon\"\nNativeSelectIcon.__ui__ = \"NativeSelectIcon\"\n\nexport interface NativeOptionGroupProps extends HTMLUIProps<\"optgroup\"> {}\n\nexport const NativeOptionGroup = forwardRef<NativeOptionGroupProps, \"optgroup\">(\n (props, ref) => <ui.optgroup ref={ref} {...props} />,\n)\n\nNativeOptionGroup.displayName = \"NativeOptionGroup\"\nNativeOptionGroup.__ui__ = \"NativeOptionGroup\"\n\nexport interface NativeOptionProps\n extends Omit<HTMLUIProps<\"option\">, \"children\"> {\n children?: string\n}\n\nexport const NativeOption = forwardRef<NativeOptionProps, \"option\">(\n (props, ref) => <ui.option ref={ref} {...props} />,\n)\n\nNativeOption.displayName = \"NativeOption\"\nNativeOption.__ui__ = \"NativeOption\"\n"],"mappings":"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","names":["props","items","label","i"]}
1
+ {"version":3,"sources":["../src/native-select.tsx"],"sourcesContent":["import type { CSSUIObject, FC, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type {\n DetailedHTMLProps,\n OptionHTMLAttributes,\n ReactElement,\n} from \"react\"\nimport {\n forwardRef,\n layoutStyleProperties,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { ChevronIcon } from \"@yamada-ui/icon\"\nimport {\n createContext,\n cx,\n getValidChildren,\n isValidElement,\n omitObject,\n pickObject,\n splitObject,\n} from \"@yamada-ui/utils\"\nimport { cloneElement } from \"react\"\n\ninterface NativeSelectBaseItem\n extends Omit<\n DetailedHTMLProps<\n OptionHTMLAttributes<HTMLOptionElement>,\n HTMLOptionElement\n >,\n \"children\" | \"label\" | \"value\"\n > {\n label?: string\n}\n\ntype Value = DetailedHTMLProps<\n OptionHTMLAttributes<HTMLOptionElement>,\n HTMLOptionElement\n>[\"value\"]\n\ninterface NativeSelectItemWithValue extends NativeSelectBaseItem {\n value?: Value\n}\n\ninterface NativeSelectItemWithItems extends NativeSelectBaseItem {\n items?: NativeSelectItemWithValue[]\n}\n\nexport interface NativeSelectItem\n extends NativeSelectItemWithValue,\n NativeSelectItemWithItems {}\n\ninterface NativeSelectContext {\n [key: string]: CSSUIObject | undefined\n}\n\nconst [NativeSelectProvider, useNativeSelect] =\n createContext<NativeSelectContext>({\n name: \"NativeSelectContext\",\n errorMessage: `useNativeSelect returned is 'undefined'. Seems you forgot to wrap the components in \"<NativeSelect />\"`,\n })\n\ninterface NativeSelectOptions {\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: string\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: string\n /**\n * If provided, generate options based on items.\n *\n * @default '[]'\n */\n items?: NativeSelectItem[]\n /**\n * The placeholder for select.\n */\n placeholder?: string\n /**\n * If `true`, include placeholders in options.\n *\n * @default true\n */\n placeholderInOptions?: boolean\n /**\n * Props for container element.\n */\n containerProps?: Omit<HTMLUIProps, \"children\">\n /**\n * Props for icon element.\n */\n iconProps?: HTMLUIProps\n}\n\nexport interface NativeSelectProps\n extends Omit<HTMLUIProps<\"select\">, \"size\">,\n ThemeProps<\"NativeSelect\">,\n NativeSelectOptions,\n FormControlOptions {}\n\n/**\n * `NativeSelect` is a component used for allowing users to select one option from a list. It displays a native dropdown list provided by the browser (user agent).\n *\n * @see Docs https://yamada-ui.com/components/forms/native-select\n */\nexport const NativeSelect = forwardRef<NativeSelectProps, \"select\">(\n (props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"NativeSelect\", props)\n const {\n className,\n children,\n color,\n items = [],\n placeholder,\n placeholderInOptions = true,\n containerProps,\n iconProps,\n ...rest\n } = useFormControlProps(omitThemeProps(mergedProps))\n const {\n \"aria-readonly\": _ariaReadonly,\n onBlur: _onBlur,\n onFocus: _onFocus,\n ...formControlProps\n } = pickObject(rest, formControlProperties)\n const [{ h, height, minH, minHeight, ...layoutProps }, selectProps] =\n splitObject(omitObject(rest, [\"aria-readonly\"]), layoutStyleProperties)\n\n let computedChildren: ReactElement[] = []\n\n if (!children && items.length) {\n computedChildren = items\n .map((item, i) => {\n if (\"value\" in item) {\n const { label, value, ...props } = item\n\n return (\n <NativeOption key={i} value={value} {...props}>\n {label}\n </NativeOption>\n )\n } else if (\"items\" in item) {\n const { items = [], label, ...props } = item\n\n return (\n <NativeOptionGroup key={i} label={label} {...props}>\n {items.map(({ label, value, ...props }, i) => (\n <NativeOption key={i} value={value} {...props}>\n {label}\n </NativeOption>\n ))}\n </NativeOptionGroup>\n )\n }\n })\n .filter(Boolean) as ReactElement[]\n }\n\n return (\n <NativeSelectProvider value={styles}>\n <ui.div\n className=\"ui-select\"\n __css={{\n color,\n h: \"fit-content\",\n position: \"relative\",\n w: \"100%\",\n ...styles.container,\n }}\n {...layoutProps}\n {...containerProps}\n {...formControlProps}\n >\n <ui.select\n ref={ref}\n className={cx(\"ui-select__field\", className)}\n __css={{\n h: h ?? height,\n minH: minH ?? minHeight,\n pe: \"2rem\",\n ...styles.field,\n }}\n {...selectProps}\n >\n {placeholder ? (\n <NativeOption hidden={!placeholderInOptions} value=\"\">\n {placeholder}\n </NativeOption>\n ) : null}\n {children ?? computedChildren}\n </ui.select>\n\n <NativeSelectIcon {...iconProps} {...formControlProps} />\n </ui.div>\n </NativeSelectProvider>\n )\n },\n)\n\nNativeSelect.displayName = \"NativeSelect\"\nNativeSelect.__ui__ = \"NativeSelect\"\n\ninterface NativeSelectIconProps extends HTMLUIProps {}\n\nconst NativeSelectIcon: FC<NativeSelectIconProps> = ({\n className,\n children,\n ...rest\n}) => {\n const styles = useNativeSelect()\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"inline-flex\",\n justifyContent: \"center\",\n pointerEvents: \"none\",\n position: \"absolute\",\n top: \"50%\",\n transform: \"translateY(-50%)\",\n ...styles.icon,\n }\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) =>\n cloneElement(child, {\n style: {\n color: \"currentColor\",\n height: \"1em\",\n width: \"1em\",\n },\n focusable: false,\n \"aria-hidden\": true,\n }),\n )\n\n return (\n <ui.div className={cx(\"ui-select__icon\", className)} __css={css} {...rest}>\n {isValidElement(children) ? cloneChildren : <ChevronIcon />}\n </ui.div>\n )\n}\n\nNativeSelectIcon.displayName = \"NativeSelectIcon\"\nNativeSelectIcon.__ui__ = \"NativeSelectIcon\"\n\nexport interface NativeOptionGroupProps extends HTMLUIProps<\"optgroup\"> {}\n\nexport const NativeOptionGroup = forwardRef<NativeOptionGroupProps, \"optgroup\">(\n (props, ref) => <ui.optgroup ref={ref} {...props} />,\n)\n\nNativeOptionGroup.displayName = \"NativeOptionGroup\"\nNativeOptionGroup.__ui__ = \"NativeOptionGroup\"\n\nexport interface NativeOptionProps\n extends Omit<HTMLUIProps<\"option\">, \"children\"> {\n children?: string\n}\n\nexport const NativeOption = forwardRef<NativeOptionProps, \"option\">(\n (props, ref) => <ui.option ref={ref} {...props} />,\n)\n\nNativeOption.displayName = \"NativeOption\"\nNativeOption.__ui__ = \"NativeOption\"\n"],"mappings":"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","names":["props","items","label","i"]}
package/dist/native-select.mjs CHANGED
@@ -3,7 +3,7 @@ import {
3
3
  NativeOption,
4
4
  NativeOptionGroup,
5
5
  NativeSelect
6
- } from "./chunk-I3S2OE2F.mjs";
6
+ } from "./chunk-DC7KDBXQ.mjs";
7
7
  export {
8
8
  NativeOption,
9
9
  NativeOptionGroup,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yamada-ui/native-select",
3
- "version": "1.0.46-dev-20241005220629",
3
+ "version": "1.0.46-dev-20241006000212",
4
4
  "description": "Yamada UI native select component",
5
5
  "keywords": [
6
6
  "yamada",
@@ -36,10 +36,10 @@
36
36
  "url": "https://github.com/yamada-ui/yamada-ui/issues"
37
37
  },
38
38
  "dependencies": {
39
- "@yamada-ui/core": "1.15.2-dev-20241005220629",
40
- "@yamada-ui/form-control": "2.1.4-dev-20241005220629",
41
- "@yamada-ui/icon": "1.1.8-dev-20241005220629",
42
- "@yamada-ui/utils": "1.5.2"
39
+ "@yamada-ui/core": "1.15.2-dev-20241006000212",
40
+ "@yamada-ui/form-control": "2.1.4-dev-20241006000212",
41
+ "@yamada-ui/icon": "1.1.8-dev-20241006000212",
42
+ "@yamada-ui/utils": "1.5.3-dev-20241006000212"
43
43
  },
44
44
  "devDependencies": {
45
45
  "clean-package": "2.2.0",
package/dist/chunk-I3S2OE2F.mjs.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/native-select.tsx"],"sourcesContent":["import type { FC, CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentMultiStyle,\n omitThemeProps,\n layoutStyleProperties,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { ChevronIcon } from \"@yamada-ui/icon\"\nimport {\n createContext,\n cx,\n splitObject,\n getValidChildren,\n isValidElement,\n pickObject,\n omitObject,\n} from \"@yamada-ui/utils\"\nimport type {\n DetailedHTMLProps,\n OptionHTMLAttributes,\n ReactElement,\n} from \"react\"\nimport { cloneElement } from \"react\"\n\ninterface NativeSelectBaseItem\n extends Omit<\n DetailedHTMLProps<\n OptionHTMLAttributes<HTMLOptionElement>,\n HTMLOptionElement\n >,\n \"label\" | \"children\" | \"value\"\n > {\n label?: string\n}\n\ntype Value = DetailedHTMLProps<\n OptionHTMLAttributes<HTMLOptionElement>,\n HTMLOptionElement\n>[\"value\"]\n\ninterface NativeSelectItemWithValue extends NativeSelectBaseItem {\n value?: Value\n}\n\ninterface NativeSelectItemWithItems extends NativeSelectBaseItem {\n items?: NativeSelectItemWithValue[]\n}\n\nexport interface NativeSelectItem\n extends NativeSelectItemWithValue,\n NativeSelectItemWithItems {}\n\ninterface NativeSelectContext {\n [key: string]: CSSUIObject\n}\n\nconst [NativeSelectProvider, useNativeSelect] =\n createContext<NativeSelectContext>({\n name: \"NativeSelectContext\",\n errorMessage: `useNativeSelect returned is 'undefined'. Seems you forgot to wrap the components in \"<NativeSelect />\"`,\n })\n\ninterface NativeSelectOptions {\n /**\n * If provided, generate options based on items.\n *\n * @default '[]'\n */\n items?: NativeSelectItem[]\n /**\n * The placeholder for select.\n */\n placeholder?: string\n /**\n * If `true`, include placeholders in options.\n *\n * @default true\n */\n placeholderInOptions?: boolean\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: string\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: string\n /**\n * Props for container element.\n */\n containerProps?: Omit<HTMLUIProps, \"children\">\n /**\n * Props for icon element.\n */\n iconProps?: HTMLUIProps\n}\n\nexport interface NativeSelectProps\n extends Omit<HTMLUIProps<\"select\">, \"size\">,\n ThemeProps<\"NativeSelect\">,\n NativeSelectOptions,\n FormControlOptions {}\n\n/**\n * `NativeSelect` is a component used for allowing users to select one option from a list. It displays a native dropdown list provided by the browser (user agent).\n *\n * @see Docs https://yamada-ui.com/components/forms/native-select\n */\nexport const NativeSelect = forwardRef<NativeSelectProps, \"select\">(\n (props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"NativeSelect\", props)\n const {\n className,\n children,\n placeholderInOptions = true,\n color,\n items = [],\n placeholder,\n containerProps,\n iconProps,\n ...rest\n } = useFormControlProps(omitThemeProps(mergedProps))\n const {\n \"aria-readonly\": _ariaReadonly,\n onFocus: _onFocus,\n onBlur: _onBlur,\n ...formControlProps\n } = pickObject(rest, formControlProperties)\n const [{ h, height, minH, minHeight, ...layoutProps }, selectProps] =\n splitObject(omitObject(rest, [\"aria-readonly\"]), layoutStyleProperties)\n\n let computedChildren: ReactElement[] = []\n\n if (!children && items.length) {\n computedChildren = items\n .map((item, i) => {\n if (\"value\" in item) {\n const { label, value, ...props } = item\n\n return (\n <NativeOption key={i} value={value} {...props}>\n {label}\n </NativeOption>\n )\n } else if (\"items\" in item) {\n const { label, items = [], ...props } = item\n\n return (\n <NativeOptionGroup key={i} label={label} {...props}>\n {items.map(({ label, value, ...props }, i) => (\n <NativeOption key={i} value={value} {...props}>\n {label}\n </NativeOption>\n ))}\n </NativeOptionGroup>\n )\n }\n })\n .filter(Boolean) as ReactElement[]\n }\n\n return (\n <NativeSelectProvider value={styles}>\n <ui.div\n className=\"ui-select\"\n __css={{\n position: \"relative\",\n w: \"100%\",\n h: \"fit-content\",\n color,\n ...styles.container,\n }}\n {...layoutProps}\n {...containerProps}\n {...formControlProps}\n >\n <ui.select\n ref={ref}\n className={cx(\"ui-select__field\", className)}\n __css={{\n pe: \"2rem\",\n h: h ?? height,\n minH: minH ?? minHeight,\n ...styles.field,\n }}\n {...selectProps}\n >\n {placeholder ? (\n <NativeOption value=\"\" hidden={!placeholderInOptions}>\n {placeholder}\n </NativeOption>\n ) : null}\n {children ?? computedChildren}\n </ui.select>\n\n <NativeSelectIcon {...iconProps} {...formControlProps} />\n </ui.div>\n </NativeSelectProvider>\n )\n },\n)\n\nNativeSelect.displayName = \"NativeSelect\"\nNativeSelect.__ui__ = \"NativeSelect\"\n\ninterface NativeSelectIconProps extends HTMLUIProps {}\n\nconst NativeSelectIcon: FC<NativeSelectIconProps> = ({\n className,\n children,\n ...rest\n}) => {\n const styles = useNativeSelect()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n pointerEvents: \"none\",\n top: \"50%\",\n transform: \"translateY(-50%)\",\n ...styles.icon,\n }\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) =>\n cloneElement(child, {\n focusable: false,\n \"aria-hidden\": true,\n style: {\n width: \"1em\",\n height: \"1em\",\n color: \"currentColor\",\n },\n }),\n )\n\n return (\n <ui.div className={cx(\"ui-select__icon\", className)} __css={css} {...rest}>\n {isValidElement(children) ? cloneChildren : <ChevronIcon />}\n </ui.div>\n )\n}\n\nNativeSelectIcon.displayName = \"NativeSelectIcon\"\nNativeSelectIcon.__ui__ = \"NativeSelectIcon\"\n\nexport interface NativeOptionGroupProps extends HTMLUIProps<\"optgroup\"> {}\n\nexport const NativeOptionGroup = forwardRef<NativeOptionGroupProps, \"optgroup\">(\n (props, ref) => <ui.optgroup ref={ref} {...props} />,\n)\n\nNativeOptionGroup.displayName = \"NativeOptionGroup\"\nNativeOptionGroup.__ui__ = \"NativeOptionGroup\"\n\nexport interface NativeOptionProps\n extends Omit<HTMLUIProps<\"option\">, \"children\"> {\n children?: string\n}\n\nexport const NativeOption = forwardRef<NativeOptionProps, \"option\">(\n (props, ref) => <ui.option ref={ref} {...props} />,\n)\n\nNativeOption.displayName = \"NativeOption\"\nNativeOption.__ui__ = \"NativeOption\"\n"],"mappings":";;;AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAMP,SAAS,oBAAoB;AAsHf,cAoCJ,YApCI;AApFd,IAAM,CAAC,sBAAsB,eAAe,IAC1C,cAAmC;AAAA,EACjC,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAgDI,IAAM,eAAe;AAAA,EAC1B,CAAC,OAAO,QAAQ;AACd,UAAM,CAAC,QAAQ,WAAW,IAAI,uBAAuB,gBAAgB,KAAK;AAC1E,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,uBAAuB;AAAA,MACvB;AAAA,MACA,QAAQ,CAAC;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI,oBAAoB,eAAe,WAAW,CAAC;AACnD,UAAM;AAAA,MACJ,iBAAiB;AAAA,MACjB,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,GAAG;AAAA,IACL,IAAI,WAAW,MAAM,qBAAqB;AAC1C,UAAM,CAAC,EAAE,GAAG,QAAQ,MAAM,WAAW,GAAG,YAAY,GAAG,WAAW,IAChE,YAAY,WAAW,MAAM,CAAC,eAAe,CAAC,GAAG,qBAAqB;AAExE,QAAI,mBAAmC,CAAC;AAExC,QAAI,CAAC,YAAY,MAAM,QAAQ;AAC7B,yBAAmB,MAChB,IAAI,CAAC,MAAM,MAAM;AAChB,YAAI,WAAW,MAAM;AACnB,gBAAM,EAAE,OAAO,OAAO,GAAGA,OAAM,IAAI;AAEnC,iBACE,oBAAC,gBAAqB,OAAe,GAAGA,QACrC,mBADgB,CAEnB;AAAA,QAEJ,WAAW,WAAW,MAAM;AAC1B,gBAAM,EAAE,OAAO,OAAAC,SAAQ,CAAC,GAAG,GAAGD,OAAM,IAAI;AAExC,iBACE,oBAAC,qBAA0B,OAAe,GAAGA,QAC1C,UAAAC,OAAM,IAAI,CAAC,EAAE,OAAAC,QAAO,OAAO,GAAGF,OAAM,GAAGG,OACtC,oBAAC,gBAAqB,OAAe,GAAGH,QACrC,UAAAE,UADgBC,EAEnB,CACD,KALqB,CAMxB;AAAA,QAEJ;AAAA,MACF,CAAC,EACA,OAAO,OAAO;AAAA,IACnB;AAEA,WACE,oBAAC,wBAAqB,OAAO,QAC3B;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC,WAAU;AAAA,QACV,OAAO;AAAA,UACL,UAAU;AAAA,UACV,GAAG;AAAA,UACH,GAAG;AAAA,UACH;AAAA,UACA,GAAG,OAAO;AAAA,QACZ;AAAA,QACC,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QAEJ;AAAA;AAAA,YAAC,GAAG;AAAA,YAAH;AAAA,cACC;AAAA,cACA,WAAW,GAAG,oBAAoB,SAAS;AAAA,cAC3C,OAAO;AAAA,gBACL,IAAI;AAAA,gBACJ,GAAG,gBAAK;AAAA,gBACR,MAAM,sBAAQ;AAAA,gBACd,GAAG,OAAO;AAAA,cACZ;AAAA,cACC,GAAG;AAAA,cAEH;AAAA,8BACC,oBAAC,gBAAa,OAAM,IAAG,QAAQ,CAAC,sBAC7B,uBACH,IACE;AAAA,gBACH,8BAAY;AAAA;AAAA;AAAA,UACf;AAAA,UAEA,oBAAC,oBAAkB,GAAG,WAAY,GAAG,kBAAkB;AAAA;AAAA;AAAA,IACzD,GACF;AAAA,EAEJ;AACF;AAEA,aAAa,cAAc;AAC3B,aAAa,SAAS;AAItB,IAAM,mBAA8C,CAAC;AAAA,EACnD;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,SAAS,gBAAgB;AAE/B,QAAM,MAAmB;AAAA,IACvB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,KAAK;AAAA,IACL,WAAW;AAAA,IACX,GAAG,OAAO;AAAA,EACZ;AAEA,QAAM,gBAAgB,iBAAiB,QAAQ;AAE/C,QAAM,gBAAgB,cAAc;AAAA,IAAI,CAAC,UACvC,aAAa,OAAO;AAAA,MAClB,WAAW;AAAA,MACX,eAAe;AAAA,MACf,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,OAAO;AAAA,MACT;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SACE,oBAAC,GAAG,KAAH,EAAO,WAAW,GAAG,mBAAmB,SAAS,GAAG,OAAO,KAAM,GAAG,MAClE,yBAAe,QAAQ,IAAI,gBAAgB,oBAAC,eAAY,GAC3D;AAEJ;AAEA,iBAAiB,cAAc;AAC/B,iBAAiB,SAAS;AAInB,IAAM,oBAAoB;AAAA,EAC/B,CAAC,OAAO,QAAQ,oBAAC,GAAG,UAAH,EAAY,KAAW,GAAG,OAAO;AACpD;AAEA,kBAAkB,cAAc;AAChC,kBAAkB,SAAS;AAOpB,IAAM,eAAe;AAAA,EAC1B,CAAC,OAAO,QAAQ,oBAAC,GAAG,QAAH,EAAU,KAAW,GAAG,OAAO;AAClD;AAEA,aAAa,cAAc;AAC3B,aAAa,SAAS;","names":["props","items","label","i"]}