@yamada-ui/native-select 1.0.46-next-20241005220055 → 1.0.46

package/dist/{chunk-I3S2OE2F.mjs → chunk-XFZK6HRV.mjs}

@@ -2,11 +2,11 @@
 
 // src/native-select.tsx
 import {
-  ui,
   forwardRef,
-  useComponentMultiStyle,
+  layoutStyleProperties,
   omitThemeProps,
-  layoutStyleProperties
+  ui,
+  useComponentMultiStyle
 } from "@yamada-ui/core";
 import {
   formControlProperties,
@@ -16,11 +16,11 @@ import { ChevronIcon } from "@yamada-ui/icon";
 import {
   createContext,
   cx,
-  splitObject,
   getValidChildren,
   isValidElement,
+  omitObject,
   pickObject,
-  omitObject
+  splitObject
 } from "@yamada-ui/utils";
 import { cloneElement } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -34,18 +34,18 @@ var NativeSelect = forwardRef(
     const {
       className,
       children,
-      placeholderInOptions = true,
       color,
       items = [],
       placeholder,
+      placeholderInOptions = true,
       containerProps,
       iconProps,
       ...rest
     } = useFormControlProps(omitThemeProps(mergedProps));
     const {
       "aria-readonly": _ariaReadonly,
-      onFocus: _onFocus,
       onBlur: _onBlur,
+      onFocus: _onFocus,
       ...formControlProps
     } = pickObject(rest, formControlProperties);
     const [{ h, height, minH, minHeight, ...layoutProps }, selectProps] = splitObject(omitObject(rest, ["aria-readonly"]), layoutStyleProperties);
@@ -56,7 +56,7 @@ var NativeSelect = forwardRef(
           const { label, value, ...props2 } = item;
           return /* @__PURE__ */ jsx(NativeOption, { value, ...props2, children: label }, i);
         } else if ("items" in item) {
-          const { label, items: items2 = [], ...props2 } = item;
+          const { items: items2 = [], label, ...props2 } = item;
           return /* @__PURE__ */ jsx(NativeOptionGroup, { label, ...props2, children: items2.map(({ label: label2, value, ...props3 }, i2) => /* @__PURE__ */ jsx(NativeOption, { value, ...props3, children: label2 }, i2)) }, i);
         }
       }).filter(Boolean);
@@ -66,10 +66,10 @@ var NativeSelect = forwardRef(
       {
         className: "ui-select",
         __css: {
+          color,
+          h: "fit-content",
           position: "relative",
           w: "100%",
-          h: "fit-content",
-          color,
           ...styles.container
         },
         ...layoutProps,
@@ -82,14 +82,14 @@ var NativeSelect = forwardRef(
               ref,
               className: cx("ui-select__field", className),
               __css: {
-                pe: "2rem",
                 h: h != null ? h : height,
                 minH: minH != null ? minH : minHeight,
+                pe: "2rem",
                 ...styles.field
               },
               ...selectProps,
               children: [
-                placeholder ? /* @__PURE__ */ jsx(NativeOption, { value: "", hidden: !placeholderInOptions, children: placeholder }) : null,
+                placeholder ? /* @__PURE__ */ jsx(NativeOption, { hidden: !placeholderInOptions, value: "", children: placeholder }) : null,
                 children != null ? children : computedChildren
               ]
             }
@@ -109,11 +109,11 @@ var NativeSelectIcon = ({
 }) => {
   const styles = useNativeSelect();
   const css = {
-    position: "absolute",
-    display: "inline-flex",
     alignItems: "center",
+    display: "inline-flex",
     justifyContent: "center",
     pointerEvents: "none",
+    position: "absolute",
     top: "50%",
     transform: "translateY(-50%)",
     ...styles.icon
@@ -121,13 +121,13 @@ var NativeSelectIcon = ({
   const validChildren = getValidChildren(children);
   const cloneChildren = validChildren.map(
     (child) => cloneElement(child, {
-      focusable: false,
-      "aria-hidden": true,
       style: {
-        width: "1em",
+        color: "currentColor",
         height: "1em",
-        color: "currentColor"
-      }
+        width: "1em"
+      },
+      "aria-hidden": true,
+      focusable: false
     })
   );
   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 {
   NativeOptionGroup,
   NativeOption
 };
-//# sourceMappingURL=chunk-I3S2OE2F.mjs.map
+//# sourceMappingURL=chunk-XFZK6HRV.mjs.map

package/dist/chunk-XFZK6HRV.mjs.map

@@ -0,0 +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      \"aria-hidden\": true,\n      focusable: false,\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":";;;AAOA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;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;AACP,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;AAAA,MACA,QAAQ,CAAC;AAAA,MACT;AAAA,MACA,uBAAuB;AAAA,MACvB;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI,oBAAoB,eAAe,WAAW,CAAC;AACnD,UAAM;AAAA,MACJ,iBAAiB;AAAA,MACjB,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,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,OAAAC,SAAQ,CAAC,GAAG,OAAO,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;AAAA,UACA,GAAG;AAAA,UACH,UAAU;AAAA,UACV,GAAG;AAAA,UACH,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,GAAG,gBAAK;AAAA,gBACR,MAAM,sBAAQ;AAAA,gBACd,IAAI;AAAA,gBACJ,GAAG,OAAO;AAAA,cACZ;AAAA,cACC,GAAG;AAAA,cAEH;AAAA,8BACC,oBAAC,gBAAa,QAAQ,CAAC,sBAAsB,OAAM,IAChD,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,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,UAAU;AAAA,IACV,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,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,OAAO;AAAA,MACT;AAAA,MACA,eAAe;AAAA,MACf,WAAW;AAAA,IACb,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"]}

package/dist/index.js

@@ -44,18 +44,18 @@ var NativeSelect = (0, import_core.forwardRef)(
     const {
       className,
       children,
-      placeholderInOptions = true,
       color,
       items = [],
       placeholder,
+      placeholderInOptions = true,
       containerProps,
       iconProps,
       ...rest
     } = (0, import_form_control.useFormControlProps)((0, import_core.omitThemeProps)(mergedProps));
     const {
       "aria-readonly": _ariaReadonly,
-      onFocus: _onFocus,
       onBlur: _onBlur,
+      onFocus: _onFocus,
       ...formControlProps
     } = (0, import_utils.pickObject)(rest, import_form_control.formControlProperties);
     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)(
           const { label, value, ...props2 } = item;
           return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { value, ...props2, children: label }, i);
         } else if ("items" in item) {
-          const { label, items: items2 = [], ...props2 } = item;
+          const { items: items2 = [], label, ...props2 } = item;
           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);
         }
       }).filter(Boolean);
@@ -76,10 +76,10 @@ var NativeSelect = (0, import_core.forwardRef)(
       {
         className: "ui-select",
         __css: {
+          color,
+          h: "fit-content",
           position: "relative",
           w: "100%",
-          h: "fit-content",
-          color,
           ...styles.container
         },
         ...layoutProps,
@@ -92,14 +92,14 @@ var NativeSelect = (0, import_core.forwardRef)(
               ref,
               className: (0, import_utils.cx)("ui-select__field", className),
               __css: {
-                pe: "2rem",
                 h: h != null ? h : height,
                 minH: minH != null ? minH : minHeight,
+                pe: "2rem",
                 ...styles.field
               },
               ...selectProps,
               children: [
-                placeholder ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { value: "", hidden: !placeholderInOptions, children: placeholder }) : null,
+                placeholder ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { hidden: !placeholderInOptions, value: "", children: placeholder }) : null,
                 children != null ? children : computedChildren
               ]
             }
@@ -119,11 +119,11 @@ var NativeSelectIcon = ({
 }) => {
   const styles = useNativeSelect();
   const css = {
-    position: "absolute",
-    display: "inline-flex",
     alignItems: "center",
+    display: "inline-flex",
     justifyContent: "center",
     pointerEvents: "none",
+    position: "absolute",
     top: "50%",
     transform: "translateY(-50%)",
     ...styles.icon
@@ -131,13 +131,13 @@ var NativeSelectIcon = ({
   const validChildren = (0, import_utils.getValidChildren)(children);
   const cloneChildren = validChildren.map(
     (child) => (0, import_react.cloneElement)(child, {
-      focusable: false,
-      "aria-hidden": true,
       style: {
-        width: "1em",
+        color: "currentColor",
         height: "1em",
-        color: "currentColor"
-      }
+        width: "1em"
+      },
+      "aria-hidden": true,
+      focusable: false
     })
   );
   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

@@ -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"]}
+{"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      \"aria-hidden\": true,\n      focusable: false,\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

@@ -3,7 +3,7 @@ import {
   NativeOption,
   NativeOptionGroup,
   NativeSelect
-} from "./chunk-I3S2OE2F.mjs";
+} from "./chunk-XFZK6HRV.mjs";
 export {
   NativeOption,
   NativeOptionGroup,

package/dist/native-select.d.mts

@@ -3,7 +3,7 @@ import { HTMLUIProps, ThemeProps } from '@yamada-ui/core';
 import { FormControlOptions } from '@yamada-ui/form-control';
 import { DetailedHTMLProps, OptionHTMLAttributes } from 'react';
 
-interface NativeSelectBaseItem extends Omit<DetailedHTMLProps<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>, "label" | "children" | "value"> {
+interface NativeSelectBaseItem extends Omit<DetailedHTMLProps<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>, "children" | "label" | "value"> {
     label?: string;
 }
 type Value = DetailedHTMLProps<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>["value"];
@@ -16,6 +16,14 @@ interface NativeSelectItemWithItems extends NativeSelectBaseItem {
 interface NativeSelectItem extends NativeSelectItemWithValue, NativeSelectItemWithItems {
 }
 interface NativeSelectOptions {
+    /**
+     * The border color when the input is invalid.
+     */
+    errorBorderColor?: string;
+    /**
+     * The border color when the input is focused.
+     */
+    focusBorderColor?: string;
     /**
      * If provided, generate options based on items.
      *
@@ -32,14 +40,6 @@ interface NativeSelectOptions {
      * @default true
      */
     placeholderInOptions?: boolean;
-    /**
-     * The border color when the input is focused.
-     */
-    focusBorderColor?: string;
-    /**
-     * The border color when the input is invalid.
-     */
-    errorBorderColor?: string;
     /**
      * Props for container element.
      */

package/dist/native-select.d.ts

@@ -3,7 +3,7 @@ import { HTMLUIProps, ThemeProps } from '@yamada-ui/core';
 import { FormControlOptions } from '@yamada-ui/form-control';
 import { DetailedHTMLProps, OptionHTMLAttributes } from 'react';
 
-interface NativeSelectBaseItem extends Omit<DetailedHTMLProps<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>, "label" | "children" | "value"> {
+interface NativeSelectBaseItem extends Omit<DetailedHTMLProps<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>, "children" | "label" | "value"> {
     label?: string;
 }
 type Value = DetailedHTMLProps<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>["value"];
@@ -16,6 +16,14 @@ interface NativeSelectItemWithItems extends NativeSelectBaseItem {
 interface NativeSelectItem extends NativeSelectItemWithValue, NativeSelectItemWithItems {
 }
 interface NativeSelectOptions {
+    /**
+     * The border color when the input is invalid.
+     */
+    errorBorderColor?: string;
+    /**
+     * The border color when the input is focused.
+     */
+    focusBorderColor?: string;
     /**
      * If provided, generate options based on items.
      *
@@ -32,14 +40,6 @@ interface NativeSelectOptions {
      * @default true
      */
     placeholderInOptions?: boolean;
-    /**
-     * The border color when the input is focused.
-     */
-    focusBorderColor?: string;
-    /**
-     * The border color when the input is invalid.
-     */
-    errorBorderColor?: string;
     /**
      * Props for container element.
      */

package/dist/native-select.js

@@ -42,18 +42,18 @@ var NativeSelect = (0, import_core.forwardRef)(
     const {
       className,
       children,
-      placeholderInOptions = true,
       color,
       items = [],
       placeholder,
+      placeholderInOptions = true,
       containerProps,
       iconProps,
       ...rest
     } = (0, import_form_control.useFormControlProps)((0, import_core.omitThemeProps)(mergedProps));
     const {
       "aria-readonly": _ariaReadonly,
-      onFocus: _onFocus,
       onBlur: _onBlur,
+      onFocus: _onFocus,
       ...formControlProps
     } = (0, import_utils.pickObject)(rest, import_form_control.formControlProperties);
     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)(
           const { label, value, ...props2 } = item;
           return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { value, ...props2, children: label }, i);
         } else if ("items" in item) {
-          const { label, items: items2 = [], ...props2 } = item;
+          const { items: items2 = [], label, ...props2 } = item;
           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);
         }
       }).filter(Boolean);
@@ -74,10 +74,10 @@ var NativeSelect = (0, import_core.forwardRef)(
       {
         className: "ui-select",
         __css: {
+          color,
+          h: "fit-content",
           position: "relative",
           w: "100%",
-          h: "fit-content",
-          color,
           ...styles.container
         },
         ...layoutProps,
@@ -90,14 +90,14 @@ var NativeSelect = (0, import_core.forwardRef)(
               ref,
               className: (0, import_utils.cx)("ui-select__field", className),
               __css: {
-                pe: "2rem",
                 h: h != null ? h : height,
                 minH: minH != null ? minH : minHeight,
+                pe: "2rem",
                 ...styles.field
               },
               ...selectProps,
               children: [
-                placeholder ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { value: "", hidden: !placeholderInOptions, children: placeholder }) : null,
+                placeholder ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { hidden: !placeholderInOptions, value: "", children: placeholder }) : null,
                 children != null ? children : computedChildren
               ]
             }
@@ -117,11 +117,11 @@ var NativeSelectIcon = ({
 }) => {
   const styles = useNativeSelect();
   const css = {
-    position: "absolute",
-    display: "inline-flex",
     alignItems: "center",
+    display: "inline-flex",
     justifyContent: "center",
     pointerEvents: "none",
+    position: "absolute",
     top: "50%",
     transform: "translateY(-50%)",
     ...styles.icon
@@ -129,13 +129,13 @@ var NativeSelectIcon = ({
   const validChildren = (0, import_utils.getValidChildren)(children);
   const cloneChildren = validChildren.map(
     (child) => (0, import_react.cloneElement)(child, {
-      focusable: false,
-      "aria-hidden": true,
       style: {
-        width: "1em",
+        color: "currentColor",
         height: "1em",
-        color: "currentColor"
-      }
+        width: "1em"
+      },
+      "aria-hidden": true,
+      focusable: false
     })
   );
   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

@@ -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"]}
+{"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      \"aria-hidden\": true,\n      focusable: false,\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

@@ -3,7 +3,7 @@ import {
   NativeOption,
   NativeOptionGroup,
   NativeSelect
-} from "./chunk-I3S2OE2F.mjs";
+} from "./chunk-XFZK6HRV.mjs";
 export {
   NativeOption,
   NativeOptionGroup,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/native-select",
-  "version": "1.0.46-next-20241005220055",
+  "version": "1.0.46",
   "description": "Yamada UI native select component",
   "keywords": [
     "yamada",
@@ -36,10 +36,10 @@
     "url": "https://github.com/yamada-ui/yamada-ui/issues"
   },
   "dependencies": {
-    "@yamada-ui/core": "1.15.2-next-20241005220055",
-    "@yamada-ui/form-control": "2.1.4-next-20241005220055",
-    "@yamada-ui/icon": "1.1.8-next-20241005220055",
-    "@yamada-ui/utils": "1.5.2"
+    "@yamada-ui/core": "1.15.2",
+    "@yamada-ui/form-control": "2.1.4",
+    "@yamada-ui/icon": "1.1.8",
+    "@yamada-ui/utils": "1.5.3"
   },
   "devDependencies": {
     "clean-package": "2.2.0",

package/dist/chunk-I3S2OE2F.mjs.map

@@ -1 +0,0 @@
-{"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"]}