@bitrise/bitkit-v2 0.3.430 → 0.3.431

package/dist/components/BitkitNativeSelect/BitkitNativeSelect.d.ts

@@ -1,7 +1,7 @@
 import { NativeSelectRootProps } from '@chakra-ui/react/native-select';
 import { ChangeEventHandler, ReactNode } from 'react';
 import { BitkitFieldProps } from '../BitkitField/BitkitField.tsx';
-export interface BitkitNativeSelectProps extends Omit<BitkitFieldProps, 'children' | 'disabled' | 'invalid' | 'onChange' | 'readOnly'> {
+export interface BitkitNativeSelectProps extends Omit<BitkitFieldProps, 'children' | 'disabled' | 'invalid' | 'onChange' | 'readOnly' | 'state'> {
     /** The `<option>` (and `<optgroup>`) elements to render inside the select. */
     children: ReactNode;
     /** Initially selected option value, for uncontrolled usage. */
@@ -25,9 +25,10 @@ export interface BitkitNativeSelectProps extends Omit<BitkitFieldProps, 'childre
     /**
      * Field state. `error`/`warning` are also implied by `errorText`/`warningText`. `disabled` takes the
      * field out of the form altogether; `readOnly` keeps it focusable and submitted, only pinning the
-     * selected value.
+     * selected value. `loading` is for options that are still on their way: it renders as `disabled`
+     * with a spinner in place of the chevron.
      */
-    state?: 'disabled' | 'error' | 'readOnly' | 'warning';
+    state?: 'disabled' | 'error' | 'loading' | 'readOnly' | 'warning';
     /** Controlled selected value. Pair with `onValueChange` or the native `onChange`. */
     value?: string;
 }

package/dist/components/BitkitNativeSelect/BitkitNativeSelect.js

@@ -1,5 +1,6 @@
 import AssetSelectChevron from "../../utilities/AssetSelectChevron.js";
 import IconErrorCircleFilled from "../../icons/IconErrorCircleFilled.js";
+import IconSpinnerOnDisabled from "../../icons/IconSpinnerOnDisabled.js";
 import IconWarningYellow from "../../icons/IconWarningYellow.js";
 import BitkitField from "../BitkitField/BitkitField.js";
 import { useSlotRecipe } from "@chakra-ui/react/styled-system";
@@ -37,6 +38,7 @@ var READ_ONLY_PROPS = {
 */
 var BitkitNativeSelect = forwardRef((props, ref) => {
 	const { children, onValueChange, selectProps, size = "lg", state, ...rest } = props;
+	const isLoading = state === "loading";
 	const isReadOnly = state === "readOnly";
 	const [nativeFieldProps, bitkitFieldProps] = splitProps(rest, [...FIELD_PROPS]);
 	const styles = useSlotRecipe({ key: "nativeSelect" })({ size });
@@ -63,7 +65,7 @@ var BitkitNativeSelect = forwardRef((props, ref) => {
 	};
 	const placeholderSelection = placeholder ? isControlled ? { value: restFieldProps.value ?? "" } : { defaultValue: restFieldProps.defaultValue ?? "" } : void 0;
 	return /* @__PURE__ */ jsx(BitkitField, {
-		state,
+		state: isLoading ? "disabled" : state,
 		...bitkitFieldProps,
 		children: /* @__PURE__ */ jsxs(NativeSelect.Root, {
 			size,
@@ -86,7 +88,7 @@ var BitkitNativeSelect = forwardRef((props, ref) => {
 				statusIcon,
 				/* @__PURE__ */ jsx(NativeSelect.Indicator, {
 					asChild: true,
-					children: /* @__PURE__ */ jsx(AssetSelectChevron, {
+					children: isLoading ? /* @__PURE__ */ jsx(IconSpinnerOnDisabled, { pointerEvents: "none" }) : /* @__PURE__ */ jsx(AssetSelectChevron, {
 						pointerEvents: "none",
 						...isReadOnly && {
 							_groupFocusWithin: { color: "icon/on-disabled" },

package/dist/components/BitkitNativeSelect/BitkitNativeSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitNativeSelect.js","names":[],"sources":["../../../lib/components/BitkitNativeSelect/BitkitNativeSelect.tsx"],"sourcesContent":["import { NativeSelect, type NativeSelectRootProps } from '@chakra-ui/react/native-select';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { splitProps } from '@zag-js/utils';\nimport {\n  type ChangeEventHandler,\n  forwardRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  useState,\n} from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron.tsx';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField.tsx';\n\nconst FIELD_PROPS = ['defaultValue', 'name', 'onChange', 'placeholder', 'value'] as const;\n\n// Keys a closed `<select>` cannot change its value with, so read-only has no reason to swallow them:\n// Tab moves on, Escape dismisses an enclosing overlay, and Enter still submits the surrounding form.\nconst READ_ONLY_ALLOWED_KEYS: readonly string[] = ['Enter', 'Escape', 'Tab'];\n\n// A native `<select>` has no read-only mode: the browser ignores the `readonly` attribute on it, so\n// the state has to be enforced by hand. Blocking the interaction rather than the control is the\n// point of read-only over `disabled` — the field stays focusable and its value is still submitted.\nconst READ_ONLY_PROPS = {\n  'aria-readonly': true,\n  onKeyDown: (event: KeyboardEvent<HTMLSelectElement>) => {\n    // Ctrl/Cmd shortcuts belong to the browser and never reach the select's value. Alt is not on the\n    // list: Alt+Arrow opens the dropdown.\n    if (READ_ONLY_ALLOWED_KEYS.includes(event.key) || event.ctrlKey || event.metaKey) {\n      return;\n    }\n\n    event.preventDefault();\n  },\n  // Preventing the default also suppresses the click's focus, which is what we want: Chrome treats a\n  // clicked `<select>` as focus-visible, so the field would take the focus ring on a mere click. It\n  // stays reachable by Tab, and BitkitSelect's read-only trigger shows nothing on click either.\n  onMouseDown: (event: MouseEvent<HTMLSelectElement>) => {\n    event.preventDefault();\n  },\n} as const;\n\nexport interface BitkitNativeSelectProps extends Omit<\n  BitkitFieldProps,\n  'children' | 'disabled' | 'invalid' | 'onChange' | 'readOnly'\n> {\n  /** The `<option>` (and `<optgroup>`) elements to render inside the select. */\n  children: ReactNode;\n  /** Initially selected option value, for uncontrolled usage. */\n  defaultValue?: string;\n  /** Form field name submitted with the enclosing form. */\n  name?: string;\n  /**\n   * Native `change` event of the underlying `<select>`. Reach for `onValueChange` when you only need\n   * the selected value.\n   */\n  onChange?: ChangeEventHandler<HTMLSelectElement>;\n  /** Convenience change handler that receives the selected value directly, without `event.target.value`. */\n  onValueChange?: (value: string) => void;\n  /** Placeholder option shown while no value is selected. */\n  placeholder?: string;\n  /** Escape hatch for the underlying Chakra `NativeSelect.Root` wrapper. */\n  /** Escape hatch onto the underlying wrapper. `size` is owned by the prop above. */\n  selectProps?: Omit<NativeSelectRootProps, 'size'>;\n  /** Field size — controls height and typography. */\n  size?: 'md' | 'lg';\n  /**\n   * Field state. `error`/`warning` are also implied by `errorText`/`warningText`. `disabled` takes the\n   * field out of the form altogether; `readOnly` keeps it focusable and submitted, only pinning the\n   * selected value.\n   */\n  state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n  /** Controlled selected value. Pair with `onValueChange` or the native `onChange`. */\n  value?: string;\n}\n\n/**\n * A dropdown built on the native `<select>` — pass the `<option>` elements as children. Reflect the\n * selection with `value` + `onValueChange` (or the native `onChange`); `selectProps` is the escape\n * hatch for the underlying wrapper. Includes the standard label and helper/error/warning chrome.\n */\nconst BitkitNativeSelect = forwardRef<HTMLSelectElement, BitkitNativeSelectProps>(\n  (props: BitkitNativeSelectProps, ref) => {\n    const { children, onValueChange, selectProps, size = 'lg', state, ...rest } = props;\n    const isReadOnly = state === 'readOnly';\n    const [nativeFieldProps, bitkitFieldProps] = splitProps(rest, [...FIELD_PROPS]);\n\n    const recipe = useSlotRecipe({ key: 'nativeSelect' });\n    const styles = recipe({ size });\n\n    const hasWarning = state === 'warning' || !!bitkitFieldProps.warningText;\n    const isInvalid = state === 'error' || !!bitkitFieldProps.errorText;\n\n    let statusIcon = undefined;\n    if (isInvalid) {\n      statusIcon = (\n        <IconErrorCircleFilled size={size === 'lg' ? '24' : '16'} css={styles.statusIcon} color=\"icon/negative\" />\n      );\n    } else if (hasWarning) {\n      statusIcon = <IconWarningYellow size={size === 'lg' ? '24' : '16'} css={styles.statusIcon} />;\n    }\n\n    const { onChange: fieldOnChange, placeholder, ...restFieldProps } = nativeFieldProps;\n    const isControlled = 'value' in nativeFieldProps;\n\n    // The placeholder colour cannot be expressed in CSS alone. `:placeholder-shown` is not defined\n    // for a `<select>`, and `:has(option:checked)` does apply but Chromium never re-evaluates it when\n    // the selection changes, so the field stays greyed after a value is picked. Tracking the value\n    // here and handing the recipe a `data-placeholder-shown` marker is what BitkitSelect gets from\n    // Zag, and it survives both controlled and uncontrolled usage.\n    const [uncontrolledValue, setUncontrolledValue] = useState(restFieldProps.defaultValue ?? '');\n    const selectedValue = isControlled ? (restFieldProps.value ?? '') : uncontrolledValue;\n\n    // `onValueChange` fires alongside the native `onChange`, with the selected value.\n    const handleChange: ChangeEventHandler<HTMLSelectElement> = (event) => {\n      if (!isControlled) {\n        setUncontrolledValue(event.target.value);\n      }\n      onValueChange?.(event.target.value);\n      fieldOnChange?.(event);\n    };\n\n    // The placeholder option is disabled so it cannot be picked again once a real value is set, and\n    // a `<select>` skips disabled options when it picks its own initial selection. Without pinning\n    // the empty value the field would come up on the first real option instead of the placeholder.\n    const placeholderSelection = placeholder\n      ? isControlled\n        ? { value: restFieldProps.value ?? '' }\n        : { defaultValue: restFieldProps.defaultValue ?? '' }\n      : undefined;\n\n    return (\n      <BitkitField state={state} {...bitkitFieldProps}>\n        <NativeSelect.Root size={size} {...selectProps} className=\"group\">\n          <NativeSelect.Field\n            ref={ref}\n            onChange={handleChange}\n            {...restFieldProps}\n            {...placeholderSelection}\n            {...(isReadOnly && READ_ONLY_PROPS)}\n            data-placeholder-shown={(!!placeholder && selectedValue === '') || undefined}\n          >\n            {!!placeholder && (\n              <option disabled value=\"\">\n                {placeholder}\n              </option>\n            )}\n            {children}\n          </NativeSelect.Field>\n          {statusIcon}\n          <NativeSelect.Indicator asChild>\n            {/*\n              A read-only chevron is inert, so it takes BitkitSelect's read-only indicator colour and\n              drops both affordances: hover, and focus-within — which a plain click triggers. Chakra's\n              `NativeSelect.Indicator` forwards only `data-disabled`/`data-invalid`, so the recipe's\n              `indicator` slot cannot see the read-only state and this has to live here.\n            */}\n            <AssetSelectChevron\n              pointerEvents=\"none\"\n              {...(isReadOnly && {\n                _groupFocusWithin: { color: 'icon/on-disabled' },\n                _groupHover: { color: 'icon/on-disabled' },\n                color: 'icon/on-disabled',\n              })}\n            />\n          </NativeSelect.Indicator>\n        </NativeSelect.Root>\n      </BitkitField>\n    );\n  },\n);\n\nBitkitNativeSelect.displayName = 'BitkitNativeSelect';\n\nexport default BitkitNativeSelect;\n"],"mappings":";;;;;;;;;;AAgBA,IAAM,cAAc;CAAC;CAAgB;CAAQ;CAAY;CAAe;AAAO;AAI/E,IAAM,yBAA4C;CAAC;CAAS;CAAU;AAAK;AAK3E,IAAM,kBAAkB;CACtB,iBAAiB;CACjB,YAAY,UAA4C;EAGtD,IAAI,uBAAuB,SAAS,MAAM,GAAG,KAAK,MAAM,WAAW,MAAM,SACvE;EAGF,MAAM,eAAe;CACvB;CAIA,cAAc,UAAyC;EACrD,MAAM,eAAe;CACvB;AACF;;;;;;AAyCA,IAAM,qBAAqB,YACxB,OAAgC,QAAQ;CACvC,MAAM,EAAE,UAAU,eAAe,aAAa,OAAO,MAAM,OAAO,GAAG,SAAS;CAC9E,MAAM,aAAa,UAAU;CAC7B,MAAM,CAAC,kBAAkB,oBAAoB,WAAW,MAAM,CAAC,GAAG,WAAW,CAAC;CAG9E,MAAM,SADS,cAAc,EAAE,KAAK,eAAe,CACpC,CAAA,CAAO,EAAE,KAAK,CAAC;CAE9B,MAAM,aAAa,UAAU,aAAa,CAAC,CAAC,iBAAiB;CAC7D,MAAM,YAAY,UAAU,WAAW,CAAC,CAAC,iBAAiB;CAE1D,IAAI,aAAa,KAAA;CACjB,IAAI,WACF,aACE,oBAAC,uBAAD;EAAuB,MAAM,SAAS,OAAO,OAAO;EAAM,KAAK,OAAO;EAAY,OAAM;CAAiB,CAAA;MAEtG,IAAI,YACT,aAAa,oBAAC,mBAAD;EAAmB,MAAM,SAAS,OAAO,OAAO;EAAM,KAAK,OAAO;CAAa,CAAA;CAG9F,MAAM,EAAE,UAAU,eAAe,aAAa,GAAG,mBAAmB;CACpE,MAAM,eAAe,WAAW;CAOhC,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,eAAe,gBAAgB,EAAE;CAC5F,MAAM,gBAAgB,eAAgB,eAAe,SAAS,KAAM;CAGpE,MAAM,gBAAuD,UAAU;EACrE,IAAI,CAAC,cACH,qBAAqB,MAAM,OAAO,KAAK;EAEzC,gBAAgB,MAAM,OAAO,KAAK;EAClC,gBAAgB,KAAK;CACvB;CAKA,MAAM,uBAAuB,cACzB,eACE,EAAE,OAAO,eAAe,SAAS,GAAG,IACpC,EAAE,cAAc,eAAe,gBAAgB,GAAG,IACpD,KAAA;CAEJ,OACE,oBAAC,aAAD;EAAoB;EAAO,GAAI;EAC7B,UAAA,qBAAC,aAAa,MAAd;GAAyB;GAAM,GAAI;GAAa,WAAU;GAA1D,UAAA;IACE,qBAAC,aAAa,OAAd;KACO;KACL,UAAU;KACV,GAAI;KACJ,GAAI;KACJ,GAAK,cAAc;KACnB,0BAAyB,CAAC,CAAC,eAAe,kBAAkB,MAAO,KAAA;KANrE,UAAA,CAQG,CAAC,CAAC,eACD,oBAAC,UAAD;MAAQ,UAAA;MAAS,OAAM;MACpB,UAAA;KACK,CAAA,GAET,QACiB;;IACnB;IACD,oBAAC,aAAa,WAAd;KAAwB,SAAA;KAOtB,UAAA,oBAAC,oBAAD;MACE,eAAc;MACd,GAAK,cAAc;OACjB,mBAAmB,EAAE,OAAO,mBAAmB;OAC/C,aAAa,EAAE,OAAO,mBAAmB;OACzC,OAAO;MACT;KACD,CAAA;IACqB,CAAA;GACP;;CACR,CAAA;AAEjB,CACF;AAEA,mBAAmB,cAAc"}
+{"version":3,"file":"BitkitNativeSelect.js","names":[],"sources":["../../../lib/components/BitkitNativeSelect/BitkitNativeSelect.tsx"],"sourcesContent":["import { NativeSelect, type NativeSelectRootProps } from '@chakra-ui/react/native-select';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { splitProps } from '@zag-js/utils';\nimport {\n  type ChangeEventHandler,\n  forwardRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  useState,\n} from 'react';\n\nimport { IconErrorCircleFilled, IconSpinnerOnDisabled, IconWarningYellow } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron.tsx';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField.tsx';\n\nconst FIELD_PROPS = ['defaultValue', 'name', 'onChange', 'placeholder', 'value'] as const;\n\n// Keys a closed `<select>` cannot change its value with, so read-only has no reason to swallow them:\n// Tab moves on, Escape dismisses an enclosing overlay, and Enter still submits the surrounding form.\nconst READ_ONLY_ALLOWED_KEYS: readonly string[] = ['Enter', 'Escape', 'Tab'];\n\n// A native `<select>` has no read-only mode: the browser ignores the `readonly` attribute on it, so\n// the state has to be enforced by hand. Blocking the interaction rather than the control is the\n// point of read-only over `disabled` — the field stays focusable and its value is still submitted.\nconst READ_ONLY_PROPS = {\n  'aria-readonly': true,\n  onKeyDown: (event: KeyboardEvent<HTMLSelectElement>) => {\n    // Ctrl/Cmd shortcuts belong to the browser and never reach the select's value. Alt is not on the\n    // list: Alt+Arrow opens the dropdown.\n    if (READ_ONLY_ALLOWED_KEYS.includes(event.key) || event.ctrlKey || event.metaKey) {\n      return;\n    }\n\n    event.preventDefault();\n  },\n  // Preventing the default also suppresses the click's focus, which is what we want: Chrome treats a\n  // clicked `<select>` as focus-visible, so the field would take the focus ring on a mere click. It\n  // stays reachable by Tab, and BitkitSelect's read-only trigger shows nothing on click either.\n  onMouseDown: (event: MouseEvent<HTMLSelectElement>) => {\n    event.preventDefault();\n  },\n} as const;\n\nexport interface BitkitNativeSelectProps extends Omit<\n  BitkitFieldProps,\n  'children' | 'disabled' | 'invalid' | 'onChange' | 'readOnly' | 'state'\n> {\n  /** The `<option>` (and `<optgroup>`) elements to render inside the select. */\n  children: ReactNode;\n  /** Initially selected option value, for uncontrolled usage. */\n  defaultValue?: string;\n  /** Form field name submitted with the enclosing form. */\n  name?: string;\n  /**\n   * Native `change` event of the underlying `<select>`. Reach for `onValueChange` when you only need\n   * the selected value.\n   */\n  onChange?: ChangeEventHandler<HTMLSelectElement>;\n  /** Convenience change handler that receives the selected value directly, without `event.target.value`. */\n  onValueChange?: (value: string) => void;\n  /** Placeholder option shown while no value is selected. */\n  placeholder?: string;\n  /** Escape hatch for the underlying Chakra `NativeSelect.Root` wrapper. */\n  /** Escape hatch onto the underlying wrapper. `size` is owned by the prop above. */\n  selectProps?: Omit<NativeSelectRootProps, 'size'>;\n  /** Field size — controls height and typography. */\n  size?: 'md' | 'lg';\n  /**\n   * Field state. `error`/`warning` are also implied by `errorText`/`warningText`. `disabled` takes the\n   * field out of the form altogether; `readOnly` keeps it focusable and submitted, only pinning the\n   * selected value. `loading` is for options that are still on their way: it renders as `disabled`\n   * with a spinner in place of the chevron.\n   */\n  state?: 'disabled' | 'error' | 'loading' | 'readOnly' | 'warning';\n  /** Controlled selected value. Pair with `onValueChange` or the native `onChange`. */\n  value?: string;\n}\n\n/**\n * A dropdown built on the native `<select>` — pass the `<option>` elements as children. Reflect the\n * selection with `value` + `onValueChange` (or the native `onChange`); `selectProps` is the escape\n * hatch for the underlying wrapper. Includes the standard label and helper/error/warning chrome.\n */\nconst BitkitNativeSelect = forwardRef<HTMLSelectElement, BitkitNativeSelectProps>(\n  (props: BitkitNativeSelectProps, ref) => {\n    const { children, onValueChange, selectProps, size = 'lg', state, ...rest } = props;\n    const isLoading = state === 'loading';\n    const isReadOnly = state === 'readOnly';\n    const [nativeFieldProps, bitkitFieldProps] = splitProps(rest, [...FIELD_PROPS]);\n\n    const recipe = useSlotRecipe({ key: 'nativeSelect' });\n    const styles = recipe({ size });\n\n    const hasWarning = state === 'warning' || !!bitkitFieldProps.warningText;\n    const isInvalid = state === 'error' || !!bitkitFieldProps.errorText;\n\n    let statusIcon = undefined;\n    if (isInvalid) {\n      statusIcon = (\n        <IconErrorCircleFilled size={size === 'lg' ? '24' : '16'} css={styles.statusIcon} color=\"icon/negative\" />\n      );\n    } else if (hasWarning) {\n      statusIcon = <IconWarningYellow size={size === 'lg' ? '24' : '16'} css={styles.statusIcon} />;\n    }\n\n    const { onChange: fieldOnChange, placeholder, ...restFieldProps } = nativeFieldProps;\n    const isControlled = 'value' in nativeFieldProps;\n\n    // The placeholder colour cannot be expressed in CSS alone. `:placeholder-shown` is not defined\n    // for a `<select>`, and `:has(option:checked)` does apply but Chromium never re-evaluates it when\n    // the selection changes, so the field stays greyed after a value is picked. Tracking the value\n    // here and handing the recipe a `data-placeholder-shown` marker is what BitkitSelect gets from\n    // Zag, and it survives both controlled and uncontrolled usage.\n    const [uncontrolledValue, setUncontrolledValue] = useState(restFieldProps.defaultValue ?? '');\n    const selectedValue = isControlled ? (restFieldProps.value ?? '') : uncontrolledValue;\n\n    // `onValueChange` fires alongside the native `onChange`, with the selected value.\n    const handleChange: ChangeEventHandler<HTMLSelectElement> = (event) => {\n      if (!isControlled) {\n        setUncontrolledValue(event.target.value);\n      }\n      onValueChange?.(event.target.value);\n      fieldOnChange?.(event);\n    };\n\n    // The placeholder option is disabled so it cannot be picked again once a real value is set, and\n    // a `<select>` skips disabled options when it picks its own initial selection. Without pinning\n    // the empty value the field would come up on the first real option instead of the placeholder.\n    const placeholderSelection = placeholder\n      ? isControlled\n        ? { value: restFieldProps.value ?? '' }\n        : { defaultValue: restFieldProps.defaultValue ?? '' }\n      : undefined;\n\n    return (\n      <BitkitField state={isLoading ? 'disabled' : state} {...bitkitFieldProps}>\n        <NativeSelect.Root size={size} {...selectProps} className=\"group\">\n          <NativeSelect.Field\n            ref={ref}\n            onChange={handleChange}\n            {...restFieldProps}\n            {...placeholderSelection}\n            {...(isReadOnly && READ_ONLY_PROPS)}\n            data-placeholder-shown={(!!placeholder && selectedValue === '') || undefined}\n          >\n            {!!placeholder && (\n              <option disabled value=\"\">\n                {placeholder}\n              </option>\n            )}\n            {children}\n          </NativeSelect.Field>\n          {statusIcon}\n          <NativeSelect.Indicator asChild>\n            {isLoading ? (\n              <IconSpinnerOnDisabled pointerEvents=\"none\" />\n            ) : (\n              /*\n                A read-only chevron is inert, so it takes BitkitSelect's read-only indicator colour and\n                drops both affordances: hover, and focus-within — which a plain click triggers. Chakra's\n                `NativeSelect.Indicator` forwards only `data-disabled`/`data-invalid`, so the recipe's\n                `indicator` slot cannot see the read-only state and this has to live here.\n              */\n              <AssetSelectChevron\n                pointerEvents=\"none\"\n                {...(isReadOnly && {\n                  _groupFocusWithin: { color: 'icon/on-disabled' },\n                  _groupHover: { color: 'icon/on-disabled' },\n                  color: 'icon/on-disabled',\n                })}\n              />\n            )}\n          </NativeSelect.Indicator>\n        </NativeSelect.Root>\n      </BitkitField>\n    );\n  },\n);\n\nBitkitNativeSelect.displayName = 'BitkitNativeSelect';\n\nexport default BitkitNativeSelect;\n"],"mappings":";;;;;;;;;;;AAgBA,IAAM,cAAc;CAAC;CAAgB;CAAQ;CAAY;CAAe;AAAO;AAI/E,IAAM,yBAA4C;CAAC;CAAS;CAAU;AAAK;AAK3E,IAAM,kBAAkB;CACtB,iBAAiB;CACjB,YAAY,UAA4C;EAGtD,IAAI,uBAAuB,SAAS,MAAM,GAAG,KAAK,MAAM,WAAW,MAAM,SACvE;EAGF,MAAM,eAAe;CACvB;CAIA,cAAc,UAAyC;EACrD,MAAM,eAAe;CACvB;AACF;;;;;;AA0CA,IAAM,qBAAqB,YACxB,OAAgC,QAAQ;CACvC,MAAM,EAAE,UAAU,eAAe,aAAa,OAAO,MAAM,OAAO,GAAG,SAAS;CAC9E,MAAM,YAAY,UAAU;CAC5B,MAAM,aAAa,UAAU;CAC7B,MAAM,CAAC,kBAAkB,oBAAoB,WAAW,MAAM,CAAC,GAAG,WAAW,CAAC;CAG9E,MAAM,SADS,cAAc,EAAE,KAAK,eAAe,CACpC,CAAA,CAAO,EAAE,KAAK,CAAC;CAE9B,MAAM,aAAa,UAAU,aAAa,CAAC,CAAC,iBAAiB;CAC7D,MAAM,YAAY,UAAU,WAAW,CAAC,CAAC,iBAAiB;CAE1D,IAAI,aAAa,KAAA;CACjB,IAAI,WACF,aACE,oBAAC,uBAAD;EAAuB,MAAM,SAAS,OAAO,OAAO;EAAM,KAAK,OAAO;EAAY,OAAM;CAAiB,CAAA;MAEtG,IAAI,YACT,aAAa,oBAAC,mBAAD;EAAmB,MAAM,SAAS,OAAO,OAAO;EAAM,KAAK,OAAO;CAAa,CAAA;CAG9F,MAAM,EAAE,UAAU,eAAe,aAAa,GAAG,mBAAmB;CACpE,MAAM,eAAe,WAAW;CAOhC,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,eAAe,gBAAgB,EAAE;CAC5F,MAAM,gBAAgB,eAAgB,eAAe,SAAS,KAAM;CAGpE,MAAM,gBAAuD,UAAU;EACrE,IAAI,CAAC,cACH,qBAAqB,MAAM,OAAO,KAAK;EAEzC,gBAAgB,MAAM,OAAO,KAAK;EAClC,gBAAgB,KAAK;CACvB;CAKA,MAAM,uBAAuB,cACzB,eACE,EAAE,OAAO,eAAe,SAAS,GAAG,IACpC,EAAE,cAAc,eAAe,gBAAgB,GAAG,IACpD,KAAA;CAEJ,OACE,oBAAC,aAAD;EAAa,OAAO,YAAY,aAAa;EAAO,GAAI;EACtD,UAAA,qBAAC,aAAa,MAAd;GAAyB;GAAM,GAAI;GAAa,WAAU;GAA1D,UAAA;IACE,qBAAC,aAAa,OAAd;KACO;KACL,UAAU;KACV,GAAI;KACJ,GAAI;KACJ,GAAK,cAAc;KACnB,0BAAyB,CAAC,CAAC,eAAe,kBAAkB,MAAO,KAAA;KANrE,UAAA,CAQG,CAAC,CAAC,eACD,oBAAC,UAAD;MAAQ,UAAA;MAAS,OAAM;MACpB,UAAA;KACK,CAAA,GAET,QACiB;;IACnB;IACD,oBAAC,aAAa,WAAd;KAAwB,SAAA;KACrB,UAAA,YACC,oBAAC,uBAAD,EAAuB,eAAc,OAAQ,CAAA,IAQ7C,oBAAC,oBAAD;MACE,eAAc;MACd,GAAK,cAAc;OACjB,mBAAmB,EAAE,OAAO,mBAAmB;OAC/C,aAAa,EAAE,OAAO,mBAAmB;OACzC,OAAO;MACT;KACD,CAAA;IAEmB,CAAA;GACP;;CACR,CAAA;AAEjB,CACF;AAEA,mBAAmB,cAAc"}

package/dist/theme/slot-recipes/NativeSelect.recipe.js

@@ -26,6 +26,7 @@ var nativeSelectSlotRecipe = defineSlotRecipe({
 			_placeholderShown: { color: "input/text/placeholder" },
 			_disabled: {
 				_hover: { borderColor: "border/disabled" },
+				borderColor: "border/disabled",
 				color: "text/disabled",
 				background: "background/disabled",
 				cursor: "not-allowed"

package/dist/theme/slot-recipes/NativeSelect.recipe.js.map

@@ -1 +1 @@
-{"version":3,"file":"NativeSelect.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/NativeSelect.recipe.ts"],"sourcesContent":["import { nativeSelectAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst nativeSelectSlotRecipe = defineSlotRecipe({\n  className: 'native-select',\n  slots: [...nativeSelectAnatomy.keys(), 'statusIcon'],\n  base: {\n    root: {\n      position: 'relative',\n    },\n    field: {\n      width: '100%',\n      minWidth: 0,\n      appearance: 'none',\n      cursor: 'pointer',\n      borderRadius: '4',\n      borderWidth: '1',\n      borderColor: 'border/strong',\n      background: 'background/primary',\n      transition: '200ms',\n      color: 'input/text/inputValue',\n      _hover: {\n        borderColor: 'border/hover',\n        _invalid: {\n          borderColor: 'border/error',\n        },\n      },\n      _invalid: {\n        borderColor: 'border/error',\n      },\n      _placeholderShown: {\n        color: 'input/text/placeholder',\n      },\n      _disabled: {\n        _hover: {\n          borderColor: 'border/disabled',\n        },\n        color: 'text/disabled',\n        background: 'background/disabled',\n        cursor: 'not-allowed',\n      },\n      _readOnly: {\n        _hover: {\n          borderColor: 'border/strong',\n        },\n        background: 'background/disabled',\n        cursor: 'default',\n      },\n    },\n    statusIcon: {\n      position: 'absolute',\n      top: '50%',\n      right: '48',\n      transform: 'translateY(-50%)',\n      pointerEvents: 'none',\n    },\n    indicator: {\n      position: 'absolute',\n      top: '50%',\n      right: rem(15),\n      transform: 'translateY(-50%)',\n    },\n  },\n  variants: {\n    size: {\n      md: {\n        field: { paddingInline: rem(11), paddingBlock: rem(9), textStyle: 'body/md/regular' },\n      },\n      lg: {\n        field: { paddingInline: rem(15), paddingBlock: rem(11), textStyle: 'body/lg/regular' },\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'lg',\n  },\n});\n\nexport default nativeSelectSlotRecipe;\n"],"mappings":";;;;AAKA,IAAM,yBAAyB,iBAAiB;CAC9C,WAAW;CACX,OAAO,CAAC,GAAG,oBAAoB,KAAK,GAAG,YAAY;CACnD,MAAM;EACJ,MAAM,EACJ,UAAU,WACZ;EACA,OAAO;GACL,OAAO;GACP,UAAU;GACV,YAAY;GACZ,QAAQ;GACR,cAAc;GACd,aAAa;GACb,aAAa;GACb,YAAY;GACZ,YAAY;GACZ,OAAO;GACP,QAAQ;IACN,aAAa;IACb,UAAU,EACR,aAAa,eACf;GACF;GACA,UAAU,EACR,aAAa,eACf;GACA,mBAAmB,EACjB,OAAO,yBACT;GACA,WAAW;IACT,QAAQ,EACN,aAAa,kBACf;IACA,OAAO;IACP,YAAY;IACZ,QAAQ;GACV;GACA,WAAW;IACT,QAAQ,EACN,aAAa,gBACf;IACA,YAAY;IACZ,QAAQ;GACV;EACF;EACA,YAAY;GACV,UAAU;GACV,KAAK;GACL,OAAO;GACP,WAAW;GACX,eAAe;EACjB;EACA,WAAW;GACT,UAAU;GACV,KAAK;GACL,OAAO,IAAI,EAAE;GACb,WAAW;EACb;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,EACF,OAAO;GAAE,eAAe,IAAI,EAAE;GAAG,cAAc,IAAI,CAAC;GAAG,WAAW;EAAkB,EACtF;EACA,IAAI,EACF,OAAO;GAAE,eAAe,IAAI,EAAE;GAAG,cAAc,IAAI,EAAE;GAAG,WAAW;EAAkB,EACvF;CACF,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}
+{"version":3,"file":"NativeSelect.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/NativeSelect.recipe.ts"],"sourcesContent":["import { nativeSelectAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst nativeSelectSlotRecipe = defineSlotRecipe({\n  className: 'native-select',\n  slots: [...nativeSelectAnatomy.keys(), 'statusIcon'],\n  base: {\n    root: {\n      position: 'relative',\n    },\n    field: {\n      width: '100%',\n      minWidth: 0,\n      appearance: 'none',\n      cursor: 'pointer',\n      borderRadius: '4',\n      borderWidth: '1',\n      borderColor: 'border/strong',\n      background: 'background/primary',\n      transition: '200ms',\n      color: 'input/text/inputValue',\n      _hover: {\n        borderColor: 'border/hover',\n        _invalid: {\n          borderColor: 'border/error',\n        },\n      },\n      _invalid: {\n        borderColor: 'border/error',\n      },\n      _placeholderShown: {\n        color: 'input/text/placeholder',\n      },\n      _disabled: {\n        _hover: {\n          borderColor: 'border/disabled',\n        },\n        borderColor: 'border/disabled',\n        color: 'text/disabled',\n        background: 'background/disabled',\n        cursor: 'not-allowed',\n      },\n      _readOnly: {\n        _hover: {\n          borderColor: 'border/strong',\n        },\n        background: 'background/disabled',\n        cursor: 'default',\n      },\n    },\n    statusIcon: {\n      position: 'absolute',\n      top: '50%',\n      right: '48',\n      transform: 'translateY(-50%)',\n      pointerEvents: 'none',\n    },\n    indicator: {\n      position: 'absolute',\n      top: '50%',\n      right: rem(15),\n      transform: 'translateY(-50%)',\n    },\n  },\n  variants: {\n    size: {\n      md: {\n        field: { paddingInline: rem(11), paddingBlock: rem(9), textStyle: 'body/md/regular' },\n      },\n      lg: {\n        field: { paddingInline: rem(15), paddingBlock: rem(11), textStyle: 'body/lg/regular' },\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'lg',\n  },\n});\n\nexport default nativeSelectSlotRecipe;\n"],"mappings":";;;;AAKA,IAAM,yBAAyB,iBAAiB;CAC9C,WAAW;CACX,OAAO,CAAC,GAAG,oBAAoB,KAAK,GAAG,YAAY;CACnD,MAAM;EACJ,MAAM,EACJ,UAAU,WACZ;EACA,OAAO;GACL,OAAO;GACP,UAAU;GACV,YAAY;GACZ,QAAQ;GACR,cAAc;GACd,aAAa;GACb,aAAa;GACb,YAAY;GACZ,YAAY;GACZ,OAAO;GACP,QAAQ;IACN,aAAa;IACb,UAAU,EACR,aAAa,eACf;GACF;GACA,UAAU,EACR,aAAa,eACf;GACA,mBAAmB,EACjB,OAAO,yBACT;GACA,WAAW;IACT,QAAQ,EACN,aAAa,kBACf;IACA,aAAa;IACb,OAAO;IACP,YAAY;IACZ,QAAQ;GACV;GACA,WAAW;IACT,QAAQ,EACN,aAAa,gBACf;IACA,YAAY;IACZ,QAAQ;GACV;EACF;EACA,YAAY;GACV,UAAU;GACV,KAAK;GACL,OAAO;GACP,WAAW;GACX,eAAe;EACjB;EACA,WAAW;GACT,UAAU;GACV,KAAK;GACL,OAAO,IAAI,EAAE;GACb,WAAW;EACb;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,EACF,OAAO;GAAE,eAAe,IAAI,EAAE;GAAG,cAAc,IAAI,CAAC;GAAG,WAAW;EAAkB,EACtF;EACA,IAAI,EACF,OAAO;GAAE,eAAe,IAAI,EAAE;GAAG,cAAc,IAAI,EAAE;GAAG,WAAW;EAAkB,EACvF;CACF,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit-v2",
   "private": false,
-  "version": "0.3.430",
+  "version": "0.3.431",
   "description": "Bitrise Design System Components built with Chakra UI V3",
   "keywords": [
     "react",